从下拉选择中获取完整信息（Flutter / Dart）

Question

我正在制作一个新冠病毒应用程序，我希望如果您从下拉列表中选择一个国家/地区，它会显示感染人数、死亡人数和康复人数。当我将值 item['Country'] 更改为 just item 时，我得到了我选择的国家/地区的所有信息但是当我将 _mySelection = newVal 更改为 _mySelection = newval['Country'] 我得到一个错误。

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'

如果您知道如何获取信息的解决方案，请告诉我。

下拉菜单

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 示例 国家/地区包含阿富汗在此示例中具有相同信息的所有国家/地区

{
    "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"
        },

Answer 1

您可以像这样创建一个 Country class（这是您的 CountryCollection class）：

class Country {
  String country;
  String countryCode;
  String slug;
  int newConfirmed;
  int totalConfirmed;
  int newDeaths;
  int totalDeaths;
  int newRecovered;
  int totalRecovered;
  String date;

  Country(
      {this.country,
      this.countryCode,
      this.slug,
      this.newConfirmed,
      this.totalConfirmed,
      this.newDeaths,
      this.totalDeaths,
      this.newRecovered,
      this.totalRecovered,
      this.date});

  Country.fromJson(Map<String, dynamic> json) {
    country = json['Country'];
    countryCode = json['CountryCode'];
    slug = json['Slug'];
    newConfirmed = json['NewConfirmed'];
    totalConfirmed = json['TotalConfirmed'];
    newDeaths = json['NewDeaths'];
    totalDeaths = json['TotalDeaths'];
    newRecovered = json['NewRecovered'];
    totalRecovered = json['TotalRecovered'];
    date = json['Date'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['Country'] = this.country;
    data['CountryCode'] = this.countryCode;
    data['Slug'] = this.slug;
    data['NewConfirmed'] = this.newConfirmed;
    data['TotalConfirmed'] = this.totalConfirmed;
    data['NewDeaths'] = this.newDeaths;
    data['TotalDeaths'] = this.totalDeaths;
    data['NewRecovered'] = this.newRecovered;
    data['TotalRecovered'] = this.totalRecovered;
    data['Date'] = this.date;
    return data;
  }
}

并尝试像这样创建 DropdownButton：

child: new DropdownButton<Country>(
    value: selectedCountry,
    onChanged: (Country newValue) {
      setState(() {
        selectedCountry = newValue;
      });
    },
    items: countries.map((Country country) {
      return new DropdownMenuItem<Country>(
        value: country,
        child: new Text(
          country.country,
        ),
      );
    }).toList(),

要填充您的 countries 列表，您可以迭代 Countries 的每个元素并使用 fromJson[= Country class 的 25=] 方法，然后使用 setState 将元素添加到列表中。

Answer 2

一些评论

我会说使用国家代码作为下拉列表的值会更自然。
执行 onChanged 时，您可以从 data 获取完整的国家/地区信息。

您的代码将被此替换

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

从下拉选择中获取完整信息（Flutter / Dart）

Getting full info from dropdown selection (Flutter / Dart)

api

dart

dropdown

flutter