如何将 json 列表项添加到 Flutter 中的下拉搜索项 | Dart

Question

I'm creating a dropdown button with search. So I using this package. Here with this package I have problem. The response from the API is like this.

List countries = [
    {
      'id': '1',
      'name': 'Brazil',
    },
    {
      'id': '2',
      'name': 'India',
    },
    {
      'id': '3',
      'name': 'Japan',
    },
    {
      'id': '4',
      'name': 'Tokyo',
    },
    {
      'id': '5',
      'name': 'Australia',
    },
    {
      'id': '6',
      'name': 'Srilanka',
    },
    {
      'id': '7',
      'name': 'Canada',
    },
  ];

My Dropdown code is this,

body: Column(
        children: [
          DropdownSearch<String>(
            mode: Mode.MENU,
            items: countries['name'],
            showSearchBox: true,
            label: "Menu mode",
            hint: "country in menu mode",
            onChanged: (value){
               print(countries['name']);
            },
            selectedItem: "Canada",
          ),
        ],
      ),

Here items: countries['name'] line i getting error as The argument type 'String' can't be assigned to the parameter type 'int'. Also when i select a country i want to print the country id. eg: if i select country as japan then it should print 4 in console. My Code is not working.

Answer 1

First of all, a List of Map doesn't work like this -> ( countries['name] ), try replace your items to:

DropdownSearch<String>(
        mode: Mode.MENU,
        items: countries.map((e)=>e['name']).toList(),
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        onChanged: (value){
           print(value);
        },
        selectedItem: "Canada",
      ),

Answer 2

Try below code hope its help to you.

Refer my answer here for put json data to dropdown

     Padding(
              padding: const EdgeInsets.all(8.0),
              child: DropdownSearch<dynamic>(
                mode: Mode.MENU,
                items: countries.map((e) => e['name']).toList(),
                showSearchBox: true,
                label: "Menu mode",
                hint: "country in menu mode",
                onChanged: (value) {},
                selectedItem: "Canada",
              ),
            ),

Your result screen->

Answer 3

you have to create a data class Country and override the toString function to return the country name.

and update your dropdownSearch like this:

//don't forget to generate the list of countries frop the map

DropdownSearch<Country>(
        mode: Mode.MENU,
        items: yourCountries,
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        onChanged: (Country value){
           print(value.id);
        },
        selectedItem: Country("Canada",7),
      ),

Answer 4

use your own country Model like this

DropdownSearch<Country>(
        mode: Mode.MENU,
        items: yourCountries,
        popupProps: PopupProps.dialog(
                     showSelectedItems: false,
                     showSearchBox: true,
                    ),
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        itemAsString: (Country u) => u.name,
        onChanged: (Country country){
           print(country.name);
           print(country.id);
        },
        selectedItem: Country("Canada",7),
      ),

don't forget to use -> itemAsString field

//OR

you can Visit the - https://pub.dev/packages/dropdown_search#customize-showed-field-itemasstring . section from the package it self