Debido a que esté widget es una lista desplegable necesitaremos almacenar nuestras opciones o variables dentro de una lista. Eso será la forma más eficiente de construir un dropdown.

DropdownButtonFormField necesitan dos parámetros requeridos los cuáles son children y onChanged.

children espera recibir una lista de widgets, específicamente una lista de widgets tipo DropdownMenuItem().

onChanged también es requerido, como una función. Si no agregamos este parámetro no obtendremos un error; sin embargo nuestro dropdown no funcionará. Esta función recibe un valor y dentro de las llaves podremos ejecutar cualquier tarea.

Crear una lista desplegable en flutter

Cuando utilizamos la función .map() en una lista, separamos cada uno de sus ítems en valores independientes y a continuación podemos retornar algo, en este caso retornaremos un DropdownMenuItem() por cada item de la lista. Y debido a que nuestra lista es simple, de tipo string, solo tendremos el valor string en la variable «e».

DropdownMenuItem() requiere de un child y value. child será propiamente un widget de tipo Text() regularmente, y value tendrá directamente el valor que necesitamos obtener.

Finalmente ahora que tenemos construida cada una de las opciones de nuestro widget, tal como en un principio se esperaba una list [] y ahora tenemos un map, simplemente procederemos a agregar la función .toList().

¿Tienes problemas con textos que se desbordan?

Para limitar el tamaño del texto en el DropdownButtonFormField puedes agregar una propiedad isDense y establecerla en true. Esto reduce el espacio vertical utilizado por cada elemento en el menú desplegable.

Además, puedes usar la propiedad isExpanded para hacer que el menú desplegable ocupe todo el ancho disponible. De esta manera, el texto se ajustará al ancho del menú desplegable en lugar de envolverse en varias líneas.

Aquí te dejo un ejemplo de cómo podrías implementarlo:

List<String> listaDeOpciones = ["A","B","C","D","E","F","G"];

DropdownButtonFormField(
  items: listaDeOpciones.map((e){
    return DropdownMenuItem(
      child: SizedBox(
        width: double.infinity,
        child: Text(
          e,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      value: e,
    );
  }).toList(),
  onChanged: (String value) {},
  isDense: true,
  isExpanded: true,
)

En este ejemplo, se establece la propiedad isDense en true y se envuelve el Text en un SizedBox con ancho infinito. También se utiliza la propiedad overflow de Text establecida en TextOverflow.ellipsis para que el texto que exceda el ancho del menú desplegable se muestre con puntos suspensivos. Por último, se establece la propiedad isExpanded en true para que el menú desplegable ocupe todo el ancho disponible.