how to use Json list in dropdown button in flutter - json

Question

I have this code which works and print the list but when i use it in a dropdown button, it throws the null red screen error while running the app.
Future<void> readJson() async {
final response = await rootBundle.loadString('assets/json/units.json');
final data = await json.decode(response);
setState(() {
List jsonList = data["length"] as List;
print(jsonList);
});
}
here is how the Json file structure looks like
{
"length" : [
{
"name": "Meter",
"conversion": 1.0,
"base_unit": true
},
{
"name": "Millimeter",
"conversion": 1000.0
},
{
"name": "Centimeter",
"conversion": 100.0
}
]
}
and here is how the dropdown button looks like,
Widget customJsonDropDown(String value, void onChange(val)) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 5),
child: SizedBox(
//width: 80,
height: 50,
child: DropdownButton<String>(
value: value,
onChanged: (val) {
onChange(val);
},
items: jsonList?.map((item) {
return DropdownMenuItem(
child: Text(item['name']),
value: item['conversion'].toString(),
);
}).toList() ??
[],
underline: Container(),
isExpanded: true,
))));
}
any help is highly appreciated.

Answer 1

What are you sending in as the value parameter to customJsonDropDown?
The error message is saying either none of the value properties of any of the items you have passed to the DropdownButton match the value set the DropdownButton itself, or that more than one do. Can you confirm what item['conversion'].toString() evaluates to, and if exactly one of those values matches the DropdownButton's value?
EDIT:
Let me try to clarify a bit:
Widget customJsonDropDown(String value, void onChange(val)) {
return ...
child: DropdownButton<String>(
value: value, // <-- this needs exactly one corresponding DropdownMenuItem, or be null
onChanged: (val) {
onChange(val); // <-- this needs to update the value above to a value that also matches exactly one of the items you set below, or null
},
items: jsonList?.map((item) {
return DropdownMenuItem(
child: Text(item['name']),
value: item['conversion'].toString(), // <-- exactly one of these has to match the DropdownButton's value above, if not null
);
}).toList() ??
[],
// ...