How to use DropdownButton widget in Flutter

Dropdown menus are a common user interface tool that presents a list of options to the user with a single press of a button. This allows the user to select any option according to their program preference.

DropdownButton widget in Flutter

In Flutter, the DropdownButton widget is a built-in widget available in the materials.dart package in Flutter that provides an easy way to create dropdown menus and handle user selections.

You can import the library at the top of the dart file in which you want to use the DropdownButton widget like this:

The material.dart package provides access to a plethora of built-in Material Design widgets, including the slider widget.

DropdownButton widget attributes

The DropdownButton widget has a number of required attributes that can be set according to the user's specifications. Specifying these parameters allows the widget to function properly according to the user's needs.

Some of the important attributes are as follows.

value: Represents the currently selected item in the drop-down list
onChanged: Callback function that is called when the user selects a different item from the list.
items: Represents the items presented in the drop-down list.
icon: Symbol used to represent the drop-down button.

Initialization of the DropdownButton widget

You can initialize the widget in the following way.

Here, value represents the currently selected item and its value is saved into a new variable named dropdownValue. Moreover, items is a list of DropdownMenuItem widgets that represent the available options in the drop-down list.

In addition to that, we have used a downward arrow as an icon of the widget and styled the widget to be colored dark blue.

Customizing the DropdownButton appearance

After providing all the necessary parameters in the DropdownButton widget, you can customize the appearance of the widget by specifying additional properties.

Any of the following attributes can be specified according to your own preference:

dropdownColor
focusColor
iconSize
iconEnabledColor

Using the DropdownButton widget in your Flutter app

import 'package:flutter/material.dart';

class MyDropdownWidget extends StatefulWidget {
  @override
  _MyDropdownWidgetState createState() => _MyDropdownWidgetState();
}

class _MyDropdownWidgetState extends State<MyDropdownWidget> {
  String dropdownValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Dropdown Button',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blue),
        ),
        SizedBox(height: 16),
        DropdownButton<String>(
          value: dropdownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
          height: 2,
          color: Colors.deepPurpleAccent,
          ),
         onChanged: (String newValue) {
            setState(() {
              dropdownValue = newValue;
            });
          },
          items: <String>['Item 1', 'Item 2', 'Item 3', 'Item 4'].map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ],
    );
  }
}

Using DropdownButton widget

Lines 13–15: We wrapped the DropdownButton with a Column widget and set the mainAxisAlignment property to MainAxisAlignment.center to vertically center the content.
Lines 21–41: We add DropdownButton as the third child of Column after the SizedBox. Inside the DropdownButton widget, we specify all the attributes necessary for the functioning of the widget.
Lines 30–34: We use the setState function to change the dropdownValue attribute, and this allows us to output the updated value in the label.
The setState function is used in a stateful widget to set the state of an attribute. This automatically updates the attribute's value wherever it is used throughout the page.
Lines 36–41: we return the DropdownMenuItem with their value and text. This Text is used to output the item selected from the DropdownButton list.

Free Resources