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() ?? [], ), ], ), ), ); } }