How to display nested dependent dynamic data in drop down with flutter? - flutter

Question

I have a json data, I want to display it in drop down such that initial one drop down will shown with name and upon selecting on that it should display child drop down and each child drop down has its own children as well.
class LocationDetail {
final String name;
final String id;
final String categoryId;
final List<LocationDetail>? childrens;
const LocationDetail({
required this.name,
required this.id,
required this.categoryId,
this.childrens,
});
Map<String, dynamic> toMap() {
return {
'name': name,
'id': id,
'categoryId': categoryId,
'childrens': childrens,
};
}
factory LocationDetail.fromMap(Map<String, dynamic> map) {
List<LocationDetail> childrens = [];
if (map['childrens'] != null) {
map['childrens'].forEach((v) {
childrens.add(LocationDetail.fromMap(v));
});
}
return LocationDetail(
name: map['name'] as String,
id: map['id'] as String,
categoryId: map['categoryId'] as String,
childrens: childrens,
);
}
}
Here is the location.json data
[
{
"name": "NewYork",
"id": "NY",
"categoryId": "A",
"childrens": [
{
"name": "Rental Car 1",
"id": "NY-Rental Car1",
"categoryId": "T1"
},
{
"name": "Rental Car 2",
"id": "NY-Rental Car2",
"categoryId": "T2",
"childrens": [
{
"name": "Rental Car 21",
"id": "NY-Rental Car21",
"categoryId": "T21"
},
{
"name": "Rental Car 22",
"id": "NY-Rental Car22",
"categoryId": "T22"
}
]
}
]
}
]
This is how I am reading json and converting to List of locationDetail
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: FutureBuilder<List<LocationDetail>>(
future: _getJsonData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// all the drop down will come here
} else if (snapshot.hasError) {
return Center(
child: Text(snapshot.error.toString()),
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
),
);
}
Future<List<LocationDetail>> _getJsonData() async {
final contents = await rootBundle.loadString(
'assets/location.json',
);
List<dynamic> dataList = jsonDecode(contents);
List<LocationDetail> locationList =
dataList.map((v) => LocationDetail.fromMap(v)).toList();
return locationList;
}
}
Expected Output:
Initially only one drop down should show which contain only NewYork.
Upon selection on NewYork should show one more drop down which contains Rental Car 1 and Rental Car 2.
If Rental Car 1 is selected nothing should happened since that is the last node.
If Rental Car 2 is selected one more drop down should show to select Rental Car 21 or Rental Car 22.
Same should happened till we reach to end.
P.S Thanks