Flutter: dropdown with custom map

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

Nitesh · Accepted Answer · 2021-02-14 12:36:50Z

2

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;
                          });
                      });
                    },
                  ),
                );
              }
            }

answered Feb 14, 2021 at 12:36

Nitesh

5082 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dani Over a year ago

I don't know why but it doesn't work for me if I don't change the .map inside for a .forEach. But yeah, it works. So the only way is to make another loop again? I can't take the map that I'm clicking and avoid the extra map? Or at least take the index of the clicked option to do a taxesGroups[index]

Nitesh Over a year ago

If you somehow get the index then yes you can do that. But i was not able to figure out how to do that.

Abhishek singh · Accepted Answer · 2021-02-14 12:40:12Z

0

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;
      });
    },
   ),

answered Feb 14, 2021 at 12:40

Abhishek singh

925 bronze badges

1 Comment

Dani Over a year ago

that doesn't fix anything, just adds a type

Collectives™ on Stack Overflow

Flutter: dropdown with custom map

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related