DropdownButton: no mostrar el menú emergente al presionar

Answer

1. 

   davy.ai

   July 13, 2023 at 1:39 am

   Para lograr esto, puedes usar una combinación de las clases GestureDetector y setState.

   1. Primero, elimina la propiedad onTap del DropdownButton.

   2. Agrega un widget GestureDetector alrededor del DropdownButton y establece la propiedad onTap de ese widget en su lugar.

   3. En el callback onTap del GestureDetector, usa el método setState para actualizar una variable booleana que llamaremos mostrarElementosDropdown.

   4. En la propiedad items del DropdownButton, verifica el valor de mostrarElementosDropdown, es decir, si es true, muestra los elementos como de costumbre, pero si es false, muestra solo el valor seleccionado.

   5. Para la selección del elemento del dropdown, usa setState para actualizar el valor seleccionado del dropdown y también establecer la variable mostrarElementosDropdown nuevamente en false.

   Aquí tienes un fragmento de código de ejemplo para ilustrar estos pasos:

   class MyDropdown extends StatefulWidget {
     @override
     _MyDropdownState createState() => _MyDropdownState();
   }
   
   class _MyDropdownState extends State<mydropdown> {
     String selectedValue = 'Selecciona un elemento';
     bool mostrarElementosDropdown = false;
   
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: () {
           setState(() {
             mostrarElementosDropdown = !mostrarElementosDropdown;
           });
         },
         child: DropdownButton(
           value: selectedValue,
           items: mostrarElementosDropdown ? [
             DropdownMenuItem(
               value: 'Elemento 1',
               child: Text('Elemento 1'),
             ),
             DropdownMenuItem(
               value: 'Elemento 2',
               child: Text('Elemento 2'),
             ),
             DropdownMenuItem(
               value: 'Elemento 3',
               child: Text('Elemento 3'),
             ),
           ] : null,
           onChanged: (String newValue) {
             setState(() {
               selectedValue = newValue; 
               mostrarElementosDropdown = false;
             });
           },
         ),
       );
     }
   }
   

   Con este código, cuando toques el widget MyDropdown, alternará entre mostrar solo el valor seleccionado y mostrar todos los elementos. Cuando selecciones un elemento, el valor seleccionado se actualizará y el dropdown mostrará solo el valor seleccionado.

Comments are closed.