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