K-Learn

Flutter DropDownButton Widget

Posted on Friday, 03 March 2023 04:57 PM

The DropdownButton widget in Flutter is used to display a dropdown menu with a list of options that the user can select from. You can customize the appearance and behavior of the dropdown button by using various properties of the DropdownButton widget.

Here's an example of how to use the DropdownButton widget:

List list = ['One', 'Two', 'Three', 'Four'];
  @override
  Widget build(BuildContext context) {
    String dropdownValue = list.first;
    return DropdownButton(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? value) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValue = value!;
        });
      },
      items: list.map>((String value) {
        return DropdownMenuItem(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
 }

Some common properties of the DropdownButton widget:

value: The currently selected value of the dropdown button.

items: A list of DropdownMenuItem widgets that represent the options in the dropdown menu.

onChanged: The callback function that is called when the user selects an option in the dropdown menu.

hint: The widget that is displayed when no option is selected.

disabledHint: The widget that is displayed when the dropdown button is disabled.

icon: The icon that is displayed next to the dropdown button.

iconSize: The size of the icon that is displayed next to the dropdown button.

isDense: Whether the dropdown button should have a smaller vertical height.

isExpanded: Whether the dropdown button should expand to fill its parent widget.