Dropdown Button in Flutter

Introduction

DropdownButton is a type of button in Flutter that displays a list of items when pressed. It allows users to select a single item from the list. This guide will help you understand the DropdownButton widget with the help of real-world examples.

Use Cases

• Country Selection: Use a dropdown button to allow users to select a country from a list of countries.
• Changing App Settings: Use a dropdown button to allow users to change app settings such as language, theme, or font size.

Example 1: Basic Dropdown Button

In this example below, you will learn to create a basic dropdown button with a list of items. For full code, press Run Online button.

DropdownButton<String>(
  value: dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
)

Example 2: Country Selection App

In this example below, you will learn to create a country selection app using a dropdown button. For full code, press Run Online button.

DropdownButton<String>(
  value: selectedCountry,
  onChanged: (String? newValue) {
    setState(() {
      selectedCountry = newValue!;
    });
  },
  items: <String>['India', 'USA', 'UK', 'Canada']
      .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
)

Challenge

Create a dropdown button to select days of the week (Monday, Tuesday, Wednesday, etc.) and display the selected day in the app.