Flutter: widget de botón desplegable

En este artículo, aprenderemos cómo usar un DropDownButton y aprenderemos varias propiedades del mismo en flutter. Usaremos el widget Flutter DropDownButton para mostrar una lista desplegable en nuestra aplicación. Así que primero veamos qué es DropDownButton.

DropDownButton: en Flutter, un DropDownButton es un botón de diseño de materiales. DropDownButton es un widget que podemos usar para seleccionar un valor único de un conjunto de valores. Permite al usuario seleccionar un valor de una serie de elementos. El valor predeterminado muestra el valor seleccionado actualmente. Incluso podemos incluir un icono de flecha hacia abajo en la lista. Al hacer clic en DropDownButton, se abre una lista de elementos, desde la cual el usuario puede seleccionar la opción deseada.

Flutter DropDownButton Constructor:

Sintaxis:

DropdownButton(
{Key key, 
@required List<DropdownMenuItem<T>> items, 
DropdownButtonBuilder selectedItemBuilder, 
T value, 
Widget hint, 
Widget disabledHint, 
@required ValueChanged<T> onChanged, 
VoidCallback onTap, 
int elevation: 8, 
TextStyle style, 
Widget underline, 
Widget icon, 
Color iconDisabledColor, 
Color iconEnabledColor, 
double iconSize: 24.0, 
bool isDense: false, 
bool isExpanded: false, 
double itemHeight: kMinInteractiveDimension,
Color focusColor, 
FocusNode focusNode, 
bool autofocus: false, 
Color dropdownColor
}
)

Código del botón desplegable Flutter:

Este es el archivo main.dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DropDownButton',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
   
  // Initial Selected Value
  String dropdownvalue = 'Item 1';  
 
  // List of items in our dropdown menu
  var items = [   
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Geeksforgeeks"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton(
               
              // Initial Value
              value: dropdownvalue,
               
              // Down Arrow Icon
              icon: const Icon(Icons.keyboard_arrow_down),   
               
              // Array list of items
              items: items.map((String items) {
                return DropdownMenuItem(
                  value: items,
                  child: Text(items),
                );
              }).toList(),
              // After selecting the desired option,it will
              // change button value to selected value
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue = newValue!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Producción:

Antes de hacer clic en el botón desplegable:

Al hacer clic en el botón desplegable: el usuario puede ver seleccionar una opción única de varios elementos.

Propiedades de DropDownButton:

• elementos: Usamos esta propiedad para definir varios elementos que se definirán en nuestro menú/lista desplegable. Es una lista de elementos que los usuarios pueden seleccionar
• valor: el valor es el elemento seleccionado actualmente.
• estilo: Usamos la propiedad de estilo para darle estilo a nuestro texto en el menú/lista desplegable como color, tamaño de fuente, peso de fuente, etc.
• alineación: la alineación define cómo se coloca la sugerencia o el elemento seleccionado dentro del botón.
• elevación: Usamos la propiedad de elevación para elevar el menú/lista desplegable.
• icon: esta propiedad se utiliza para mostrar un icono en el botón desplegable.
• iconSize: Esta propiedad se utiliza para definir el tamaño del icono.
• iconDisabledColor: esta propiedad se usa para establecer el color del icono cuando el botón desplegable está deshabilitado.
• iconEnabledColor: esta propiedad se usa para establecer el color del icono cuando el botón desplegable está habilitado.
• dropdownColor: esta propiedad se utiliza para mostrar el color de fondo del menú desplegable.
• isDense: esta propiedad reduce la altura del botón.
• isExpanded: esta propiedad se usa para expandir el botón desplegable al ancho completo.
• selectedItemBuilder: cuando el usuario selecciona una opción de la lista desplegable, muestra la opción en el botón. Si queremos mostrar algún otro texto en lugar de la opción seleccionada en el botón, usaremos selectedItemBuilder.
• sugerencia: Podemos mostrar una de las opciones de la lista desplegable en el botón o podemos establecer nuestro texto deseado por defecto usando la sugerencia.
• disabledHint: esta propiedad se usa para mostrar el texto deseado cuando el botón desplegable está deshabilitado.

¿Quiere un entorno más dinámico y competitivo para aprender los fundamentos de Android? ¡ Haga clic aquí para dirigirse a una guía seleccionada exclusivamente por nuestros expertos con el objetivo de prepararlo para la industria en poco tiempo!