Dropdown in Flutter Example Code- Here’s an Easy Way (2023)

While building a form, you may want users to select a value from multiple options. There can be many ways to build such a user interaction. One of the widely used UI elements to address this requirement is using the dropdown. So this tutorial, we’ll learn an easy way to create a dropdown in Flutter with example code. 

Here’s how it looks:

Here’s what we’ll cover:

• What is Dropdown
• How to Create a Dropdown in Flutter
• How Do you get Value of Dropdown

What is Dropdown

In Flutter, A DropDown allows users to select a single item from multiple options. It shows the currently selected item and opens up a list of options when you tap on it.

How to Create a Dropdown in Flutter

In Flutter, a dropdown is created using the DropdownButton and DropdownMenuItem widgets. The DropdownButton takes the list of items and shows them using the DropdownMenuItem.

Steps to create dropdown:

Step 1: Add a variable called dropdownValue that holds the currently selected item.

Step 2: Add the DropdownButton widget to your page.

Step 3: Inside the DropdownButton, add the value parameter and assign the dropdownValue that we created in step 1.

Step 4: Inside the DropdownButton, add the items parameter and prepare the list of DropdownMenuItem.

Step 5: Inside the DropdownButton, add the onChanged parameter and add a function that sets the newly selected value to the dropdownValue (we previously added).

Code Example:

// Step 1.
String dropdownValue = 'Dog';
// Step 2.
DropdownButton<String>(
  // Step 3.
  value: dropdownValue,
  // Step 4.
  items: <String>['Dog', 'Cat', 'Tiger', 'Lion']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(
        value,
        style: TextStyle(fontSize: 30),
      ),
    );
  }).toList(),
  // Step 5.
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
),

Output:

How Do you get Value of Dropdown

If you followed all the steps in a previous section of how to create the dropdown, then getting the value is now much easier. The newly selected value is stored inside the variable called dropdownValue and you can use this variable wherever you want.

Here are the steps:

Step 1: Create a dropdown as described in the previous section.

Step 2: Add the Text widget and show the currently selected item using the variable called dropdownValue.

Code Example:

Text(
  'Selected Value: $dropdownValue', // <-- SEE HERE
  style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)

Output:

Here’s the full code:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class DropdownDemo extends StatefulWidget {
  const DropdownDemo({Key? key}) : super(key: key);
  @override
  State<DropdownDemo> createState() => _DropdownDemoState();
}
class _DropdownDemoState extends State<DropdownDemo> {
  String dropdownValue = 'Dog';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...,
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            // Step 2.
            DropdownButton<String>(
              // Step 3.
              value: dropdownValue,
              // Step 4.
              items: <String>['Dog', 'Cat', 'Tiger', 'Lion']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(
                    value,
                    style: TextStyle(fontSize: 30),
                  ),
                );
              }).toList(),
              // Step 5.
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                });
              },
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              'Selected Value: $dropdownValue',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

Conclusion

In this tutorial, we learned how to create a dropdown in Flutter with example code. We first saw what is dropdown and explored how to get a value of a dropdown. Just in case you missed any steps, we have attached the full code of the dropdown. Hope you liked it.

Would you like to check other interesting Flutter tutorials?