In this post, we will create a multi-level dependent dropdown list in Flutter, using the example of selecting a country, state, and city. This involves utilizing Flutter's DropdownButton widget and managing the state of each dropdown. Initially, all countries will be listed in the country dropdown. Upon selecting a country, the corresponding states will be fetched from the JSON data and displayed in the state dropdown. Subsequently, when a state is selected, the relevant cities will be retrieved from the JSON data and populated in the cities dropdown.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedCountry;
  String selectedState;
  String selectedCity;

  List<String> countries = ["USA", "Canada", "UK"];
  Map<String, List<String>> states = {
    "USA": ["New York", "California", "Texas"],
    "Canada": ["Ontario", "Quebec", "British Columbia"],
    "UK": ["London", "Manchester", "Birmingham"]
  };
  Map<String, List<String>> cities = {
    "New York": ["New York City", "Buffalo", "Rochester"],
    "California": ["Los Angeles", "San Francisco", "San Diego"],
    "Texas": ["Houston", "Austin", "Dallas"],
    "Ontario": ["Toronto", "Ottawa", "Mississauga"],
    "Quebec": ["Montreal", "Quebec City", "Laval"],
    "British Columbia": ["Vancouver", "Victoria", "Kelowna"],
    "London": ["Central London", "East London", "West London"],
    "Manchester": ["City Centre", "Salford", "Old Trafford"],
    "Birmingham": ["City Centre", "Edgbaston", "Solihull"]
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dependent Dropdown Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<String>(
              value: selectedCountry,
              hint: Text("Select Country"),
              onChanged: (value) {
                setState(() {
                  selectedCountry = value;
                  selectedState = null;
                  selectedCity = null;
                });
              },
              items: countries.map((country) {
                return DropdownMenuItem<String>(
                  value: country,
                  child: Text(country),
                );
              }).toList(),
            ),
            SizedBox(height: 20.0),
            DropdownButton<String>(
              value: selectedState,
              hint: Text("Select State"),
              onChanged: (value) {
                setState(() {
                  selectedState = value;
                  selectedCity = null;
                });
              },
              items: states[selectedCountry]?.map((state) {
                return DropdownMenuItem<String>(
                  value: state,
                  child: Text(state),
                );
              })?.toList() ?? [],
            ),
            SizedBox(height: 20.0),
            DropdownButton<String>(
              value: selectedCity,
              hint: Text("Select City"),
              onChanged: (value) {
                setState(() {
                  selectedCity = value;
                });
              },
              items: cities[selectedState]?.map((city) {
                return DropdownMenuItem<String>(
                  value: city,
                  child: Text(city),
                );
              })?.toList() ?? [],
            ),
          ],
        ),
      ),
    );
  }
}
In above example, we maintain the selected values for country, state, and city using state variables selectedCountry, selectedState, selectedCity. Depending on the selected country and state, the available options for states and cities are updated accordingly in dropdown list.

Read Similar Articles