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.

OptionDescription
Key keyThe widget's key
List<DropdownMenuItem<T>>The options.
T valueThe current value.
Widget hintWidget that will be displayed if value is null.
Widget disableHintWidget that will be displayed if the dropdown is disabled.
(T) -> void onChangedFunction that will be exeucted every time the value changes.
int elevationZ-coordinate of the options.
TextStyle styleText style inside the dropdown.
Widget underlineWidget that will be used for drawing the drop-down button's underline. Default is 0.0 width bottom border with color 0xFFBDBDBD.
Widget iconThe dropdown's icon. Default is Icons.arrow_drop_down
Widget iconDisabledColorIcon 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 iconEnabledColorIcon 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 iconSizeThe icon size. Default is 24.0.
bool isDenseWhether to reduce the button's height. Default is false.
bool isExpandedWhether 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