CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-dependenciesflutter-web
MURALI KRISHNAN MT
MURALI KRISHNAN MT

Reputation: 195

How to add json list items to dropdown search items in Flutter | Dart

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.

Upvotes: 0

Views: 7255

Answers (5)

ali sampson
ali sampson

Reputation: 467

Please update your code to what is here:

DropdownSearch<Country>(
   
    items: yourCountryList,
    popupProps: PopupProps.dialog(
                 showSelectedItems: false,
                 showSearchBox: true,
                ),
    showSearchBox: true,
    label: "Select your country",
    hint: "country in menu mode",
    itemAsString: (Country country) => country.name,
    onChanged: (Country country){
       print(country.id); // you can get ur id here and use it
       print(country.name);
     
    },
    selectedItem: Country("Japan",3),
  ),

Don't forget to add this. It is very important:

itemAsString: (Country country) => country.name,

I hope this helps.

Upvotes: 0

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

Try below code hope its help to you. and use dropdown_search library

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-> enter image description here

Upvotes: 0

Ankit
Ankit

Reputation: 73

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

Upvotes: 2

Salim Lachdhaf
Salim Lachdhaf

Reputation: 1082

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

Upvotes: 0

emily
emily

Reputation: 372

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",
      ),

Upvotes: 2

Related Questions