如何在 Flutter 中添加 json 列表项到下拉搜索项 |镖

Question

我正在创建一个带有搜索功能的下拉按钮。所以我使用 this 包。这个包我有问题。 API 的响应是这样的。

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',
    },
  ];

我的下拉代码是这样的，

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

这里 items: countries['name'] 行我收到错误，因为 The argument type 'String' can't be assigned to the parameter type 'int'. 另外当我 select 一个国家时，我想打印国家 ID。例如：如果我 select country as japan 那么它应该在控制台中打印 4 。我的代码无效。

Answer 1

首先，地图列表不是这样工作的 -> (countries['name])，请尝试将您的 items 替换为：

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

试试下面的代码希望对你有帮助。

参考我的回答将 json 数据放入下拉列表

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

您的结果屏幕->

Answer 3

您必须创建数据 class 国家并将 toString 函数覆盖为 return 国家名称。

并像这样更新您的下拉搜索：

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

如何在 Flutter 中添加 json 列表项到下拉搜索项 |镖

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

dart

flutter

flutter-dependencies

flutter-layout

flutter-web