Search code examples
apiflutterdartdropdown

Getting full info from dropdown selection (Flutter / Dart)


Im making a corona app and i want that if you choose a country from the dropdown it shows the amounts of infected, died and recovered people. when i change the value item['Country'] to just item i get the all the info of the country i have chosen but then when i change _mySelection = newVal to _mySelection = newval['Country'] i get an error.

There should be exactly one item with [DropdownButton]'s value: Australia. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 827 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

If you know a solution on how i can get the info please let me know.

Dropdown

child: new DropdownButton(
                          hint: Text(Country, style: TextStyle(fontSize: 18, color: Colors.black),
                          ),
                          isExpanded: true,
                          items: data.map((item) {
                            return new DropdownMenuItem(
                              child: new AutoSizeText(item['Country']),
                              value: item['Country'],
                            );
                          }).toList(),
                          onChanged: (newVal) {
                            setState(() {
                              _mySelection = newVal;
                            });
                          },
                          value: _mySelection,
                        ),

Statresbody example Countries contains all the countries with the same info Afghanistan has in this example

{
    "Global": {
        "NewConfirmed": 174744,
        "TotalConfirmed": 8764876,
        "NewDeaths": 6071,
        "TotalDeaths": 468396,
        "NewRecovered": 90678,
        "TotalRecovered": 4245126
    },
    "Countries": [
        {
            "Country": "Afghanistan",
            "CountryCode": "AF",
            "Slug": "afghanistan",
            "NewConfirmed": 346,
            "TotalConfirmed": 27878,
            "NewDeaths": 2,
            "TotalDeaths": 548,
            "NewRecovered": 302,
            "TotalRecovered": 7962,
            "Date": "2020-06-20T19:19:28Z"
        },
        

     
      

Solution

  • A Couple of comments

    1. I'd say that It would be more natural to use country code as value for the drop down.
    2. You can get the full country info from data when onChanged is executed.

    Your code would be replaced by this

        child: new DropdownButton(
          hint: Text(Country, style: TextStyle(fontSize: 18, color: Colors.black),
          ),
          isExpanded: true,
          items: data.map((item) {
            return new DropdownMenuItem(
              child: new Text(item['Country']),
              value: item['CountryCode'], // <===== use country code as value
            );
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _mySelection = newVal;
              // I get full country info
              var country = data.firstWhere((i) => i['CountryCode'] == newVal);
              // do what you want with the selection....
            });
          },
          value: _mySelection,
        ),