Flutter如何获取仅含国家名与代码的下拉选择组件国家列表

目标下拉选择效果

下面三种方案按需选择即可，都能直接拿到仅包含国家名称、国家代码的结构化数据，适配下拉选择组件：

方案1：引入轻量纯数据依赖（最省事，数据维护成本为0） #

不用自己整理国家数据，直接用社区维护的合规ISO标准数据源，不带冗余UI逻辑，包体积极小。

1. 在pubspec.yaml添加依赖（版本号可自行查找最新稳定版）：

dependencies:
  world_countries: ^2.3.0

2. 直接提取需要的两个字段生成列表：

import 'package:world_countries/world_countries.dart';

// 返回的列表可以直接传给DropdownButton的items属性
List<Map<String, String>> getSimpleCountryList() {
  return WorldCountries.values.map((item) {
    return {
      // 国家名称，需要中文的话可以搭配本地化配置
      "name": item.name,
      // ISO 3166-1 alpha-2标准二位国家代码，比如CN、US、JP
      "code": item.codeShort,
    };
  }).toList();
}

方案2：本地内置静态数据（最灵活，完全可控） #

不想引入第三方依赖的话，直接自己维护精简的国家列表，只保留需要的字段，多余内容全删掉。

• 可以直接把数据写成Dart常量，不用额外读资源文件：

// 可以放在全局常量文件里，全局直接调用
const List<Map<String, String>> simpleCountryList = [
  {"name": "中国", "code": "CN"},
  {"name": "美国", "code": "US"},
  {"name": "日本", "code": "JP"},
  {"name": "韩国", "code": "KR"},
  {"name": "英国", "code": "GB"},
  // 按需补全你需要展示的国家即可
];

如果国家数量多，也可以把数据存成json文件放在assets目录，启动时读取加载，逻辑和常量写法一致。这种方式可以自由筛选要展示的国家，不需要把所有主权国家都列出来，完全适配业务需求。

方案3：直接用封装好的国家选择组件（省掉自己写下拉UI的成本） #

如果不需要高度自定义UI，直接用现成的国家选择组件包，内置的数据源已经包含国家名称、代码、国旗、区号等信息，你只需要配置隐藏不需要的字段，只展示名称和代码即可，不用单独处理数据源。

下拉组件适配示例 #

拿到列表数据之后，直接传给Flutter原生的DropdownButton就能实现目标效果：

String? selectedCode;

@override
Widget build(BuildContext context) {
  return DropdownButton<String>(
    value: selectedCode,
    hint: const Text("请选择国家"),
    items: simpleCountryList.map((country) {
      return DropdownMenuItem<String>(
        value: country["code"],
        child: Text("${country["name"]} (${country["code"]})"),
      );
    }).toList(),
    onChanged: (value) {
      setState(() {
        selectedCode = value;
      });
    },
  );
}

注意事项 #

• 国家代码统一用ISO 3166-1标准编码，不要自定义编码规则，避免后续对接接口、做多语言适配时出现兼容问题
• 需要多语言切换的场景，不要硬编码国家名称，搭配Flutter本地化arb文件做不同语言的名称映射即可

内容的提问来源于stack exchange，提问作者bidyut das