Flutter - DropdownButton Input Widget Examples

This Flutter tutorial shows you how to create DropdownButton in Flutter including how to updaate value and how to customize it.

If you have and input field and you want the users to select only from certain values, one of the most common input types is dropdown. In Fluter, it can be done easily using DropdownButton widget.

To use the widget, there are two required properties: items and onChanged. items is of type List<DropdownMenuItem<T>>, where T is the value type. It can be a number, a String or any other type. For each DropdownMenuItem, you need to define value and child. The value must be of type T which means it must be the same across all options. For example, if you construct with DropdownButton<String>, the value of all options must be String. child is the widget that will be rendered for that option item. onChanged is a function with one parameter.

Every time the value changes, it will be called with the new value as the argument. Inside onChanged, usually we update the state that stores the dropdown value.

There are two non-required options that you'll most likely use. First is value, which stores the current value. If the value matches a DropdownMenuItem's value, the option item will be displayed as selected item. It can be used to set initial value as well. The other option is hint, which is a widget that will be shown if no value selected.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter DropdownButton Tutorial',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter DropdownButton Tutorial by Woolha.com'),
          ),
          body: Center(
              child: DropdownExample(),
          ),
        ),
      );
    }
  }
  
  class DropdownExample extends StatefulWidget {
    @override
    _DropdownExampleState createState() {
      return _DropdownExampleState();
    }
  }
  
  class _DropdownExampleState extends State<DropdownExample> {
    String? _value;
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: DropdownButton<String>(
          items: [
            DropdownMenuItem<String>(
              child: Text('Item 1'),
              value: 'one',
            ),
            DropdownMenuItem<String>(
              child: Text('Item 2'),
              value: 'two',
            ),
            DropdownMenuItem<String>(
              child: Text('Item 3'),
              value: 'three',
            ),
          ],
          onChanged: (String? value) {
            setState(() {
              _value = value;
            });
          },
          hint: Text('Select Item'),
          value: _value,
        ),
      );
    }
  }
  

Flutter DropdownButton

For list of available options, see the table below.

Option Description
Key key The widget's key
List<DropdownMenuItem<T>> The options.
T value The current value.
Widget hint Widget that will be displayed if value is null.
Widget disableHint Widget that will be displayed if the dropdown is disabled.
(T) -> void onChanged Function that will be exeucted every time the value changes.
int elevation Z-coordinate of the options.
TextStyle style Text style inside the dropdown.
Widget underline Widget that will be used for drawing the drop-down button's underline. Default is 0.0 width bottom border with color 0xFFBDBDBD.
Widget icon The dropdown's icon. Default is Icons.arrow_drop_down
Widget iconDisabledColor Icon color when it's disabled. If the thems' ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it's Brightness.dark, default is Colors.white70.
Widget iconEnabledColor Icon color when it's enabled. If the thems' ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it's Brightness.dark, default is Colors.white70.
double iconSize The icon size. Default is 24.0.
bool isDense Whether to reduce the button's height. Default is false.
bool isExpanded Whether to set the dropdown's inner contents to horizontally fill its parent. Default is false.

Below is a custom DropdownButton example that uses custom TextStyle, underline as well as icon color and size. In addition, instead of using standard Text widget as DropdownMenuItem's child, it uses a Row that also contains an Icon.

  class _DropdownExampleState extends State<DropdownExample> {
    String? _value;
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: DropdownButton<String>(
          items: [
            DropdownMenuItem<String>(
              child: Row(
                  children: <Widget>[
                    Icon(Icons.filter_1),
                    Text('Item 1'),
                  ],
              ),
              value: 'one',
            ),
            DropdownMenuItem<String>(
              child: Row(
                children: <Widget>[
                  Icon(Icons.filter_2),
                  Text('Item 2'),
                ],
              ),
              value: 'two',
            ),
            DropdownMenuItem<String>(
              child: Row(
                children: <Widget>[
                  Icon(Icons.filter_3),
                  Text('Item 3'),
                ],
              ),
              value: 'three',
            ),
          ],
          isExpanded: false,
          onChanged: (String? value) {
            setState(() {
              _value = value;
            });
          },
          hint: Text('Select Item'),
          value: _value,
          underline: Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(color: Colors.grey))
            ),
          ),
          style: TextStyle(
            fontSize: 30,
            color: Colors.black,
          ),
          iconEnabledColor: Colors.pink,
  //        iconDisabledColor: Colors.grey,
          iconSize: 40,
        ),
      );
    }
  }

Flutter DropdownButton