Elemento Widget Select de opciones o DropdownButton en Dart usando Flutter

Tiempo de lectura: 2 minutos

Hoy vamos a hacer un widget personalizado llamado CustomDropdownButton, que se utiliza para mostrar un menú desplegable (DropdownButton) con opciones seleccionables.

El widget acepta tres parámetros:

import 'package:flutter/material.dart';

import '../comun/Option.dart';

class CustomDropdownButton extends StatefulWidget {
  final Opcion opcionSeleccionada;
  final List<dynamic> opciones;
  final void Function(Opcion?) onChanged;

  CustomDropdownButton({
    required this.opcionSeleccionada,
    required this.opciones,
    required this.onChanged,
  });


  @override
  _CustomDropdownButtonState createState() => _CustomDropdownButtonState();
}

class _CustomDropdownButtonState extends State<CustomDropdownButton> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: DropdownButton<Opcion>(
        isExpanded: true,
        value: widget.opcionSeleccionada,
        onChanged: widget.onChanged,
        items: widget.opciones
            .map<DropdownMenuItem<Opcion>>(
              (opcion) => DropdownMenuItem<Opcion>(
            value: opcion,
            child: Text(opcion.nombre),
          ),
        )
            .toList(),
      ),
    );
  }
}

1. opcionSeleccionada: Representa la opción actualmente seleccionada en el menú desplegable.
2. opciones: Es una lista de opciones que se mostrarán en el menú desplegable.
3. onChanged: Es una función que se llama cuando se cambia la selección del menú desplegable.

Uso del Widget: Para utilizar este widget, simplemente hay que incorporarlo en el árbol de widgets y proporciona los parámetros requeridos como muestro a continuación

CustomDropdownButton(
  opcionSeleccionada: miOpcionSeleccionada,
  opciones: listaDeOpciones,
  onChanged: (nuevaOpcion) {
    // Lógica para manejar el cambio de la opción seleccionada.
    // Puedes actualizar el estado u realizar otras acciones aquí.
  },
)

Por último visualizamos el resultado

Espero que les sirva de ayuda y que tengan un feliz día.