Creating a Multi-Level Dropdown Menu in Flutter: 1

The multi-level dropdown is used in various applications and there are very good chances that you have came across this case.

Let me give you a simple and very common example which you have seen around you.

Understand multilevel dropdown with example

Suppose you are looking for a service center for your electronic product. You visit the website of that product and look for the service center page. You find two dropdowns in the find service page.

  • Country
  • Province (also known as the state)

The province/state is dependent on the country. If you select a country like India then you will find the province of India in the province dropdown. If you select a country like Germany you will find Province related to Germany in the province of dropdown.

Get Started

Before going to a multi-level dropdown, it’s important that you understand the dropdown properly. I have one article where I have discussed everything you need to know about dropdown.

Now you have a good understanding of dropdown and you should learn multi-level. It’s something which is very important for building e-commerce or any school or bank kind of app.

How dropdown works?

I am not sure how much you understand the dropdown. To make multi-level dropdown easier, I will remind you some of the important terms of the dropdown.

Arguments Description
hint This value will be shown when no value is selected.
value This value will be shown as selected
items It looks for a list of DropdownMenuItem widget.
onChanged It is a callback and it is called with the value of DropdownButton

What this article will cover?

I am going to make the above example in the flutter where the province dropdown will depend on the country dropdown. I think this is very generic for you all and this will make much more sense than any other example.

Type Explanation
Static Data In this example we will have static data stored in variable
Data from Cloud In this example we will get the data from a remote server

Multi Level dropdown in flutter - Part 2

Static Data Example

Screenshot of final UI

We will have 3 different variables holding different data. We will use this as have dynamic dropdown. Based on the country selection we will change the province dropdown options.

final List<String> country = ['USA', 'India'];
final List<String> indiaProvince = ['New Delhi', 'Bihar', 'Rajasthan'];
final List<String> usaProvince = ['Texas', 'Florida', 'California'];
home.dart 
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> countries = ['USA', 'India'];
  List<String> indiaProvince = ['New Delhi', 'Bihar', 'Rajasthan'];
  List<String> usaProvince = ['Texas', 'Florida', 'California'];

  List<String> provinces = [];
  String selectedCountry;
  String selectedProvince;  // will ues this variable later

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Level Dropdown'),
      ),
      body: Center(
        child: DropdownButton<String>(
          hint: Text('Country'),
          value: selectedCountry,
          items: countries.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: onChangedCallback,
        ),
      ),
    );
  }

  void onChangedCallback(country) {
    if (country == 'USA') {
      provinces = usaProvince;
    } else if (country == 'India') {
      provinces = indiaProvince;
    } else {
      provinces = [];
    }
    setState(() {
      selectedProvince = null;
      selectedCountry = country;
    });
  }
}

Let’s focus on onChanged of country dropdown. As we have two country in countries variable, when we will select any dropdown then we will get a callback with the value of the dropdown item value.

So, based on the country we will change the provinces list’s(array) data. After this we will call setState then it will update the province dropdown.

void onChangedCallback(country) {
    if (country == 'USA') {
        provinces = usaProvince;
    } else if (country == 'India') {
        provinces = indiaProvince;
    } else {
        provinces = [];
    }
    setState(() {
        selectedProvince = null;
        selectedCountry = country;
    });
}

Source Code

Now let’s see the final code, I mean how province dropdown is being built. As we have province details in the provinces List. So we will just make dropdown using it and we got a multi-level dropdown.

home.dart 
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> countries = ['USA', 'India'];
  List<String> indiaProvince = ['New Delhi', 'Bihar', 'Rajasthan'];
  List<String> usaProvince = ['Texas', 'Florida', 'California'];
  
  List<String> provinces = [];
  String selectedCountry;
  String selectedProvince;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Level Dropdown'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20.0),
        children: [
          // Country Dropdown
          DropdownButton<String>(
            hint: Text('Country'),
            value: selectedCountry,
            isExpanded: true,
            items: countries.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (country) {
              if (country == 'USA') {
                provinces = usaProvince;
              } else if (country == 'India') {
                provinces = indiaProvince;
              } else {
                provinces = [];
              }
              setState(() {
                selectedProvince = null;
                selectedCountry = country;
              });
            },
          ),
          // Country Dropdown Ends here

          // Province Dropdown
          DropdownButton<String>(
            hint: Text('Province'),
            value: selectedProvince,
            isExpanded: true,
            items: provinces.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (province) {
              setState(() {
                selectedProvince = province;
              });
            },
          ),
          // Province Dropdown Ends here
        ],
      ),
    );
  }
}

I hope you understood how to make a multi-level dropdown and it’s a concept and I hope now you can make any kind of multi-level dropdown. To help you more, I will make one more multi-level dropdown with a different sources of data.

Github Repository
Download
nstack-in/multilevel_dropdown_flutter

This repo has two example of multi-level dropdown, first uses static data and other uses data from internet.

Dart 3

If you looking for making a multi-level dropdown using backend API(Data from Cloud) then part 2 is for you.

Multi Level dropdown in flutter - Part 2

Conclusion

I hope this gave you a basic understating of the multilevel dropdown. Now you got the idea that how the next dropdown works based on the previous dropdown.

This is the magic of onChanged callback, onChnage on the dropdown value we update the next dropdown.

If you like it then do share it with your friends or flutter developers. If you have any questions then let me know in the comment.