How do I create a DropdownButton in flutter?

To create a material design button like DropdownButton we need to use DropdownMenuItem class.

In this short but insightful tutorial on material design Flutter UI structure we’ll discuss how we can add a drop down button for selecting from a list of items.

When we use the DropdownMenuItem<T> class, DropdownButton actually instantiate a DropdownMenuItem object or creates an item in the menu.

Usually the button shows the currently selected item as well as an arrow that opens a menu so that we can select another item.

The question is what type of item the value represents. The type T is the type of the value the entry represents. Since it represents type of the value, the menu must represent values of consistent types.

Although the parent of DropdownMenuItem is a stateless widget, we need a stateful widget to use the onChanged callback. So that the function can update a state variable that defines the drop down’s value.

Subsequently, it also calls State.setState to rebuild the DropdownButton with the new value.

In the following code, we’ll see how we can add multiple drop downs in Flutter.

How do you add two drop downs in flutter?

We need a drop down button for selecting from a list of items. Therefore, adding more than on drop downs is not a big issue as long as we can create on drop down.

Let us see how it looks like first.

Let’s take a close look, so we can understand how it looks like on the mobile device.

The DropdownButton class has many properties and tow most important properties are items and onChanged method.

DropdownButton example() => DropdownButton<String>(
        items: [
          DropdownMenuItem(
            value: "1",
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const <Widget>[
                Icon(Icons.build),
                SizedBox(width: 10),
                Text(
                  'Example',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          DropdownMenuItem(
            value: "2",
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const <Widget>[
                Icon(Icons.settings),
                SizedBox(width: 10),
                Text(
                  "Setting",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
        onChanged: (value) {
          setState(() {
            _value = value!;
          });
        },
        value: _value,
        isExpanded: true,
      );

The DropdownButton items property consists of a list. Therefore, whenever we want to display we must remember that.

In many cases, we can directly map the list items and use toList() method.

However, in this case, we directly call inside the build method of a stateful widget.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DropDownButton Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('DropDownButton Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 10),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                color: Colors.green,
                child: example(),
              ),
              const SizedBox(height: 10),
            ],
          ),
        ),
      ),
    );
  }
// For full code please visit GitHub repository

As a result, we can now click the drop down icon to select any item.

We must use a stateful widget because if the list of items is null or the onChanged callback is null, the drop down button will not be enabled anymore.

What does that mean?

It means the arrow will be displayed in grey and it will not respond to input.

And, finally, since we’ve created a material design button like DropdownButton, one of its ancestors should be a Material widget.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter