Flutter列表本地化实现：城市下拉框多语言切换问题

1. 完善本地化资源文件 #

在英文（en.json）和阿拉伯语（ar.json）本地化配置文件中，为每个城市添加对应的键值对：

en.json

{
  "chooseProvinence": "Choose Province",
  "city_amman": "Amman",
  "city_irbid": "Irbid",
  "city_zarqa": "Zarqa",
  "city_mafraq": "Mafraq",
  "city_tafilah": "Tafilah",
  "city_ajloun": "Ajloun",
  "city_maaan": "Ma'an",
  "city_karak": "Karak",
  "city_madaba": "Madaba",
  "city_aqaba": "Aqaba",
  "city_balqa": "Balqa",
  "city_jerash": "Jerash"
}

ar.json

{
  "chooseProvinence": "اختر المحافظة",
  "city_amman": "عمان",
  "city_irbid": "إربد",
  "city_zarqa": "الزرقاء",
  "city_mafraq": "المفرق",
  "city_tafilah": "الطفيلة",
  "city_ajloun": "عجلون",
  "city_maaan": "معان",
  "city_karak": "الكرك",
  "city_madaba": "مادبا",
  "city_aqaba": "العقبة",
  "city_balqa": "البلقاء",
  "city_jerash": "جرش"
}

2. 修改城市列表为本地化Key集合 #

把原有的固定文本列表替换为存储本地化Key的列表，避免直接绑定显示文本：

// 存储本地化key，而非直接存储显示文本
List<String> provinceKeys = [
  'city_amman',
  'city_irbid',
  'city_zarqa',
  'city_mafraq',
  'city_tafilah',
  'city_ajloun',
  'city_maaan',
  'city_karak',
  'city_madaba',
  'city_aqaba',
  'city_balqa',
  'city_jerash'
];
// 默认值使用key，而非固定阿拉伯语文本
String dropDownValueKey = 'city_amman';

3. 重构DropdownButtonFormField代码 #

在构建下拉选项时，通过AppLocalizations根据Key获取当前语言对应的城市名称：

final provincesField = DropdownButtonFormField<String>(
  value: dropDownValueKey,
  onChanged: (String? newKey) {
    setState(() {
      dropDownValueKey = newKey!;
    });
  },
  items: provinceKeys.map<DropdownMenuItem<String>>((String key) {
    return DropdownMenuItem<String>(
      value: key,
      child: SizedBox(
        width: 100.0,
        child: Text(
          // 根据key获取当前语言对应的城市名称
          AppLocalizations.of(context)!.translate(key),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }).toList(),
  elevation: 4,
  decoration: InputDecoration(
    prefixIcon: const Icon(Icons.flag_circle),
    labelText: AppLocalizations.of(context)!.chooseProvinence,
    alignLabelWithHint: true,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
);

关键说明 #

• 核心思路是用本地化Key绑定城市，而非直接存显示文本，切换语言时无需修改列表，只需通过Key拉取对应语言的文本。
• 如果你的AppLocalizations类没有translate方法，直接调用生成的属性即可，比如AppLocalizations.of(context)!.cityAmman（需确保本地化类生成时包含对应属性）。

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