DropdownButton

 

¿Qué es un DropdownButton en Flutter?

Un DropdownButton en Flutter es un widget que te permite seleccionar un valor de una lista de opciones. Es como un menú desplegable que, al hacer clic sobre él, muestra una lista de elementos de los cuales el usuario puede seleccionar uno. Es ideal para presentar opciones a los usuarios de una forma compacta y organizada.

Imagina una aplicación donde el usuario debe seleccionar un país. En lugar de mostrar todos los países en una lista larga, puedes usar un DropdownButton. Al hacer clic en él, se desplegará una lista con todos los países, y el usuario podrá seleccionar el que desee.

¿Cómo se usa?

Para utilizar un DropdownButton, debes proporcionar una lista de elementos que se mostrarán en el menú desplegable. Cada elemento debe tener un valor asociado que representará la opción seleccionada.

Dart

import 'package:flutter/material.dart';

class MyDropdownButtonExample extends StatefulWidget {
  @override
  _MyDropdownButtonExampleState createState() => _MyDropdownButtonExampleState();
}

class _MyDropdownButtonExampleState extends State<MyDropdownButtonExample> {
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),   
      iconSize: 24,
      elevation: 16,
      style: const 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(),   
    );
  }
}

Explicación del código:

• dropdownValue: Almacena el valor actualmente seleccionado.
• items: Una lista de DropdownMenuItem que representa cada opción.
• onChanged: Se ejecuta cuando se selecciona un nuevo valor.
• Otras propiedades: Personalizan la apariencia del DropdownButton (icono, estilo de texto, etc.).

Propiedades importantes de DropdownButton

• value: El valor actualmente seleccionado.
• items: La lista de elementos a mostrar en el menú desplegable.
• onChanged: La función que se ejecuta cuando se cambia el valor seleccionado.
• hint: Un texto que se muestra cuando no hay ningún valor seleccionado.
• disabledHint: Un texto que se muestra cuando el DropdownButton está deshabilitado.

Usos comunes de DropdownButton

• Formularios: Para seleccionar un país, una provincia, un género, etc.
• Filtros: Para filtrar datos basados en la selección del usuario.
• Configuraciones: Para permitir que el usuario seleccione una configuración entre varias opciones.

En resumen

El DropdownButton es un widget muy útil en Flutter para presentar opciones de una manera compacta y organizada. Es ideal para cuando tienes un conjunto de valores predefinidos y quieres que el usuario seleccione uno.