如何在Flutter中实现本地化？附相关代码咨询

1. 先搞定基础配置 #

要让本地化正常工作，首先得在pubspec.yaml里配置依赖和资源：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.18.1 # 处理日期、数字格式化时用得上
  flutter_localization: ^你的版本号 # 确保用最新稳定版

flutter:
  generate: true # 开启自动生成本地化相关文件
  assets:
    - assets/locales/ # 翻译文件存这里，比如en.json、ru.json

然后在assets/locales目录下创建对应语言的JSON文件：

• en.json（英文）：

{
  "hello": "Hello",
  "internet_error": "Internet disconnected"
}

• ru.json（俄语）：

{
  "hello": "Привет",
  "internet_error": "Интернет отключен"
}

2. 现有代码的优化点 #

你的代码已经搭了基础框架，但有几个细节可以调整得更规范：

• 把super.initState()移到最前面，保证State生命周期执行顺序正确
• 网络错误提示别用硬编码，换成本地化字符串
• 对系统语言的判断做更安全的空值处理
  优化后的代码：

final connectivity = Connectivity();
late StreamSubscription<List<ConnectivityResult>> connRes;
final FlutterLocalization localization = FlutterLocalization.instance;

@override
void initState() {
  super.initState(); // 调整到最前面
  WidgetsBinding.instance.addObserver(this);
  
  // 提取系统语言代码，处理空值情况
  final String localeName = Platform.localeName.split("_").firstOrNull ?? "en";
  localization.init(
    mapLocales: [
      const MapLocale('en', AppLocale.EN),
      const MapLocale('ru', AppLocale.RU),
    ],
    initLanguageCode: localeName == "ru" ? "ru" : "en",
  );
  localization.onTranslatedLanguage = (_) => setState(() {});

  // 网络监听改用本地化字符串
  connRes = connectivity.onConnectivityChanged.listen((event) {
    if (event.first == ConnectivityResult.none){
      showError(context, localization.translate('internet_error'));
    }
  });
}

@override
void didChangeLocales(List<Locale>? locales) {
  if (locales?.isEmpty ?? true) return;
  final languageCode = locales!.first.languageCode;
  localization.translate(languageCode == "ru" ? "ru" : "en");
  super.didChangeLocales(locales);
}

@override
void dispose() {
  WidgetsBinding.instance.removeObserver(this);
  connRes.cancel(); // 先取消订阅再执行super.dispose()
  super.dispose();
}

3. 在UI里用本地化文本 #

直接通过localization.translate()获取对应语言的内容就行：

Text(localization.translate('hello')),

如果要处理带参数的文本（比如“Hello, {name}”），可以这么写：
// 先在翻译文件里加："greeting": "Hello, {name}"
Text(localization.translate('greeting', args: ['John'])),

4. 给用户加手动切换语言的功能 #

如果要做语言切换按钮，加个方法就行：

void switchLanguage(String languageCode) {
  localization.translate(languageCode);
  setState(() {}); // 触发UI刷新
}

// 按钮示例
Row(
  children: [
    ElevatedButton(
      onPressed: () => switchLanguage('en'),
      child: const Text('English'),
    ),
    const SizedBox(width: 16),
    ElevatedButton(
      onPressed: () => switchLanguage('ru'),
      child: const Text('Русский'),
    ),
  ],
)

5. 额外注意事项 #

• 记住用户的语言选择：现在每次启动都会读系统语言，如果要保存用户手动切换的语言，可以用shared_preferences存语言代码，初始化时先读存储的值
• 扩展更多语言：只需要在mapLocales里加对应的MapLocale，再新增翻译文件就行
• 别硬写文本：所有显示用的文本都要放进翻译文件，别直接写在代码里

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