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.

El objeto opcion:

import 'dart:convert';
import 'dart:ffi';
import 'dart:ui';

class Opcion{
  String nombre;
  int value;

  Opcion({
    required this.nombre,
    required this.value,
  });

  Map<String, dynamic> toMap() {
    return {'nombre': nombre, 'value': value};
  }

  factory Opcion.fromJson(Map<String, dynamic> json) {
    return Opcion(
      nombre: json['nombre'],
      value: json['value'],
    );
  }
}

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í.
  },
)

Creamos la variable miOpcionSeleccionada y la lista de opciones:

Por último visualizamos el resultado

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