Saltar al contenido principal

Ejemplo desplegable de aleteo

En Flutter, el widget desplegable se usa para proporcionar una lista de opciones al usuario. Este widget se usa comúnmente en formularios donde se requiere que el usuario seleccione una opción de una lista de opciones. El widget desplegable es fácil de usar y proporciona una forma elegante e intuitiva para que los usuarios seleccionen una opción.

Creación de un widget desplegable​

Crear un widget desplegable en Flutter es simple. Para crear un widget desplegable, debe especificar las opciones que se mostrarán en la lista. Aquí hay un ejemplo de cómo crear un widget desplegable:

String dropdownValue = 'One';

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
);

En este ejemplo, se crea el widget DropdownButton y el parámetro value se establece en dropdownValue. El parámetro elementos es una lista de cadenas que se mostrarán en la lista desplegable. El parámetro onChanged se establece en una función que se llamará cuando el usuario seleccione una opción de la lista.

Personalización del widget desplegable​

El widget desplegable se puede personalizar para adaptarse al estilo y diseño de su aplicación. Estos son algunos ejemplos de cómo personalizar el widget desplegable:

Cambio del icono del botón desplegable​

Para cambiar el icono que se muestra en el botón desplegable, puede utilizar el parámetro icono. Aquí hay un ejemplo:

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_forward),
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
);

En este ejemplo, el parámetro icon se establece en el widget Icon con el icono Icons.arrow_forward.

Cambiar el color del botón desplegable​

Para cambiar el color del botón desplegable, puede usar el parámetro estilo. Aquí hay un ejemplo:

DropdownButton<String>(
  value: dropdownValue,
  style: TextStyle(color: Colors.red),
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
);

En este ejemplo, el parámetro estilo se establece en un objeto TextStyle con el color establecido en Colors.red.

Más ejemplos​

Este es un ejemplo desplegable de aleteo. Mediante Dropdowns podemos seleccionar uno o varios elementos. Los menús desplegables normalmente ocupan un espacio más pequeño que otro tipo de widgets que muestran listas de datos como gridview y listview.

Este ejemplo no requiere ninguna dependencia.

(a). dardo principal​

Este es el único archivo que debe crear en este proyecto.

Comience agregando importaciones:

import 'package:flutter/material.dart';

Ese material.dart nos da acceso a varios componentes de diseño de materiales de aleteo para usar, incluido el menú desplegable.

Cree MyAppState, extendiendo la clase de estado. MyApp es un StatefulWidget personalizado para el cual se crea el estado.

class MyAppState extends State<MyApp> {

Dentro de esta clase, defina la lista de elementos que se representarán en el menú desplegable:

  List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];

Luego agregue dos campos de instancia más, incluida una lista de elementos del menú desplegable y una cadena para contener el elemento seleccionado:

  List<DropdownMenuItem<String>> _dropDownMenuItems;
  String _selectedFruit;

Luego anula la clase initState():


  @override
  void initState() {
    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
    _selectedFruit = _dropDownMenuItems[0].value;
    super.initState();
  }

Aquí está el método para construir y obtener los elementos del menú desplegable:

  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
    List<DropdownMenuItem<String>> items = new List();
    for (String fruit in fruits) {
      items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
    }
    return items;
  }

Este es el método para cambiar los elementos desplegables:

    void changedDropDownItem(String selectedFruit) {
    setState(() {
      _selectedFruit = selectedFruit;
    });
  }

Finalmente anula el método build():

    @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("DropDown Button Example"),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text("Please choose a fruit: "),
              new DropdownButton(
                value: _selectedFruit,
                items: _dropDownMenuItems,
                onChanged: changedDropDownItem,
              )
            ],
          )),
        ),
      ),
    );
  }

Aquí está el código completo para main.dart:

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}
class MyAppState extends State<MyApp> {
  List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
  List<DropdownMenuItem<String>> _dropDownMenuItems;
  String _selectedFruit;
  @override
  void initState() {
    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
    _selectedFruit = _dropDownMenuItems[0].value;
    super.initState();
  }
  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
    List<DropdownMenuItem<String>> items = new List();
    for (String fruit in fruits) {
      items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
    }
    return items;
  }
  void changedDropDownItem(String selectedFruit) {
    setState(() {
      _selectedFruit = selectedFruit;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("DropDown Button Example"),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text("Please choose a fruit: "),
              new DropdownButton(
                value: _selectedFruit,
                items: _dropDownMenuItems,
                onChanged: changedDropDownItem,
              )
            ],
          )),
        ),
      ),
    );
  }
}

Demostración​

Aquí está la demostración

Ejemplo desplegable de Flutter

La licencia para el código anterior es Apache versión 2.0.

Conclusión​

El widget desplegable es un widget importante en Flutter que se usa para proporcionar una lista de opciones al usuario. Este widget es fácil de usar y puede personalizarse para adaptarse al estilo y diseño de su aplicación. Al utilizar los ejemplos proporcionados, puede crear un widget desplegable que cumpla con los requisitos de su aplicación.