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,
        ),
      );
    }
  }
  

For list of available options, see the table below.

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,
        ),
      );
    }
  }