How to display list of map into DropdownMenuItem in Flutter

Question

I'm new with Flutter. I want to display DropdownMenuItem from my list variable. Check out my code.


// my list variable


  List listUserType = [
    {'name': 'Individual', 'value': 'individual'},
    {'name': 'Company', 'value': 'company'}
  ];




// items property in DropdownMenuItem

return DropdownButtonFormField<List<Map>>(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.settings),
          hintText: 'Organisation Type',
          filled: true,
          fillColor: Colors.white,
          errorStyle: TextStyle(color: Colors.yellow),
        ),
        items: listUserType.map((map) {
          return DropdownMenuItem(
            child: Text(map['name']),
            value: map['value'],
          );
        }).toList());

This is the result I got

I/flutter (22528): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (22528): The following assertion was thrown building RegisterPage(dirty, state: RegisterPageState#5b83a):
I/flutter (22528): type 'List<DropdownMenuItem<dynamic>>' is not a subtype of type
I/flutter (22528): 'List<DropdownMenuItem<List<Map<dynamic, dynamic>>>>'

I do not know what is causing the error.

A DropDown is designed for displaying one item, if it is ok to display `key` or `value` for then I try to help as much as I can, otherwise I do not know what to do — Jasurbek, Jun 25 '19 at 11:18

score 8 · Accepted Answer · answered Jun 25 '19 at 11:21

Try removing <List<Map>>

return DropdownButtonFormField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.settings),
          hintText: 'Organisation Type',
          filled: true,
          fillColor: Colors.white,
          errorStyle: TextStyle(color: Colors.yellow),
        ),
        items: listUserType.map((map) {
          return DropdownMenuItem(
            child: Text(map['name']),
            value: map['value'],
          );
        }).toList());

score 1 · Answer 2 · answered Jun 25 '19 at 11:23

1

Change DropdownButtonFormField<List<Map>> to DropdownButtonFormField<String> and add a String type parameter to return DropdownMenuItem<String>

answered Jun 25 '19 at 11:23

Marko Devcic

1,069
2
13
16

score 0 · Answer 3 · answered Oct 06 '21 at 16:46

I show the complete flow using a DropDownButtonField of YourClassView type. I create a variable called _listMenuItems which will hold your DropdownMenuItem. You must property cast its <DropdownMenuItem> or an casting error will ocurr. The _currentComboView points keeps the YourClassView object that the user has selected from the DropdownButtonField. The _loadStatusCombo is called from initState() override. It called a provder to get a list of YourClassView objects called dataViews. I map the dataViews into the _listMenuItems by casting it and using the map function. Make sure to include .tolist to flat out the results of the mapping.

YourClassView has two field: DisplayValue and DatabaseValue
YourClassView _currentComboView;
List<DropdownMenuItem> _listMenuItems =
  <DropdownMenuItem<YourClassView>>[];

                  DropdownButtonFormField<YourClassView>(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: const BorderRadius.all(
                              const Radius.circular(2.0),
                            ),
                          ),
                          filled: true,
                          hintStyle: TextStyle(color: Colors.grey[800]),
                          hintText: "Select a Status",
                          fillColor: Colors.orange),
                      items: _listMenuItems,
                      isDense: true,
                      isExpanded: true,
                      value: this._currentComboView,
                      validator: (value) =>
                          value == null ? 'field required' : null,
                      onChanged: (YourClassView value) {
                        setState(() {
                          this._currentComboView = value;
                        });
                      }),


_loadStatusCombo() {
    Provider.of<Api>(context, listen: false)
        .getComboViews()
        .then((dataViews) {
        setState(() {
          _listMenuItems =
             dataViews.map<DropdownMenuItem<YourClassView>>((item) {
            return DropdownMenuItem<YourClassView>(
                value: item, child: Text(item.displayValue));
        }).toList();
      });
     });
   }

How to display list of map into DropdownMenuItem in Flutter

3 Answers3

Linked