flutter application that populates a dropdown menu from json - json

Question

I am a newbie in flutter and I'm trying to create 3 dropdown menus from a json file hosted online. Here is a sample of the json file. This is the link to the json file and this is the model class:
class DropdownModel {
DropdownModel({
this.sports,
this.movies,
this.tv,
});
List<Movie> sports;
List<Movie> movies;
List<Movie> tv;
factory DropdownModel.fromJson(Map<String, dynamic> json) => DropdownModel(
sports: List<Movie>.from(json["sports"].map((x) => Movie.fromJson(x))),
movies: List<Movie>.from(json["movies"].map((x) => Movie.fromJson(x))),
tv: List<Movie>.from(json["tv"].map((x) => Movie.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"sports": List<dynamic>.from(sports.map((x) => x.toJson())),
"movies": List<dynamic>.from(movies.map((x) => x.toJson())),
"tv": List<dynamic>.from(tv.map((x) => x.toJson())),
};
}
class Movie {
Movie({
this.id,
this.name,
});
int id;
String name;
factory Movie.fromJson(Map<String, dynamic> json) => Movie(
id: json["id"],
name: json["name"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
};
}
How do I go about it?
EDIT
After searching around got a solution I came across this solution which answers my question

Answer 1

An example would be:
// Let's supose you have a variable of the DropdownModel
DropwdownModel model = DropdownModel(...);
// We store the current dropdown value
// Here you can put the default option
// Since you have Movies with id, I would recommend saving
// the movie value as the dropdownValue
String dropdownValue = '';
// For example, let's use the music
#override
Widget build(BuildContext context) {
// We define the dropdown button
return DropdownButton<String>(
// The value is the selected value, you should control the state
value: model.fromNameFromId(dropdownValue),
// The icon to open the dropdown
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
// On changed is the method that it is called when a dropdown option
// is selected
onChanged: (String? newValue) {
// Here we change the state, as I noted before
// The newValue will be a movie id
setState(() {
dropdownValue = newValue!;
});
},
items: model.movies.map<DropdownMenuItem<String>>(
// We have to iterate through all the movies and return
// a list of DropdownMenuItems
(Movie m) {
return DropdownMenuItem<String>(
value: m.id,
// We display the movie name instead of the id
child: Text(m.name),
);
})
.toList(),
);
}
If you want three dropdowns, you would have to create three DropdownButton! You can find more information in the documentation!