Flutter: dropdown with custom map - flutter

Question

I have a list of maps list this:
var taxesGroups = [
{
"name": "Spain",
"taxes": [
{"name": "IVA", "percentage": "21"},
{"name": "IRPF", "percentage": "19"},
]
},
{
"name": "UK",
"taxes": [
{"name": "VAT", "percentage": "20"},
]
}
];
var dropdownValue = taxesGroups[0]["name"];
So far I tried this:
DropdownButton(
value: dropdownValue,
items: taxesGroups.map((taxGroup) {
return DropdownMenuItem<String>(
value: taxGroup["name"],
child: Text(taxGroup["name"]),
);
}).toList(),
onChanged: (taxGroup) {
setState(() {
dropdownValue = taxGroup;
});
},
),
I get this error:
type 'List' is not a subtype of type
'List<DropdownMenuItem>'
I guess it's related to the info I want to display in the dropdown (Spain, UK) and what I get when choose an option but I don't figure it out

Answer 1

You have mismatched the taxesGroups map.
I tried to recreate your use case with this and it works.
class MyApp2 extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp2> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var taxesGroups = [
{
"name": "Spain",
"taxes": [
{"name": "IVA", "percentage": "21"},
{"name": "IRPF", "percentage": "19"},
]
},
{
"name": "UK",
"taxes": [
{"name": "VAT", "percentage": "20"},
]
}
];
var dropdownValue;
#override
void initState() {
dropdownValue = taxesGroups[0];
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: DropdownButton(
value: dropdownValue['name'],
items: taxesGroups.map((taxGroup) {
return DropdownMenuItem<String>(
value: taxGroup["name"],
child: Text(taxGroup["name"]),
);
}).toList(),
onChanged: (taxGroup) {
print('taxGroup $taxGroup');
taxesGroups.map((e) {
if (e["name"] == taxGroup)
setState(() {
dropdownValue = e;
});
});
},
),
);
}
}

Answer 2

Add type as DropownMenuItem for map
DropdownButton(
value: dropdownValue,
items: taxesGroups.map<DropdownMenuItem>((taxGroup) {
return DropdownMenuItem<String>(
value: taxGroup["name"],
child: Text(taxGroup["name"]),
);
}).toList(),
onChanged: (taxGroup) {
setState(() {
dropdownValue = taxGroup;
});
},
),