How to implement dropdown lists in Flutter

Share this post

To use dropdown lists we can use the DropdownButton class in Flutter. DropdownButton requires a type for the items on the list. For instance, if we would have a list of Strings then we have to define that when setting up the list.

The reason that the widget is called a DropdownButton and not DropdownList, is because it actually is a clickable widget that shows the currently chose item as a text. Also, it can be pretty much styled like a button.

To create a dropdown list in Flutter we can use the following code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

The result will be the following:

DropdownButton

We can easily customize the DropdownButton by styling the underline by defining a widget.

How to remove the underline from Flutter DropdownButton

To remove the underline from the DropdownButton, we need to define it as an empty Container widget. Like so:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(), // this is the magic
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

It then looks like this:

DropdownButton without an underline

How to add a custom icon to Flutter DropdownButton

What if we want to add a custom icon to the DropdownButton? Well, that’s quite easy as this widget is actually a button.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(
                // underline can be styled as well
                // height: 4.0,
                // color: Colors.blue,
                ), // this removes underline
            icon: Icon(Icons.arrow_downward),
            iconSize: 20.0, // can be changed, default: 24.0
            iconEnabledColor: Colors.blue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

We added a custom icon and color and this is how it looks like now:

DropdownButton with custom icon

I hope you’re comfortable using dropdown lists in Flutter now. If you have any questions, then please let me know in the comment section. Have fun with Flutter!