【Flutter】Flutter实现国际化多语言支持方案分享

移动端出海，搞APP的就不得不提前预备应对方案，Flutter 实现国际化的方案有许多，例如：

1. flutter_localizations
2. Intl
3. getx

参考众多开源库，这里推荐一种较简单且容易理解的实现方案，通过flutter_localizations + getx组合实现多语言适配、切换刷新。具体实现方案如下：

通过Flutter的gen-l10n命令，基于arb资源文件生成对应的国际化语言文件及相关调用类

1. 准备

• l10n.yaml
  • 在项目工程根目录新建一个l10n.yaml文件
  • 是flutter gen-l10n 命令的默认配置文件
  • gen-l10n命令的参数可以跟在命令行后面，同时也可以在项目中的l10n.yaml文件定义
  • l10n.yaml大致内容

    arb-dir: lib/language/l10n  #指定arb多国语文件目录
    template-arb-file: app_zh.arb #指定arb多国语文件
    output-dir: lib/language/l10n/gen
    output-class: AppLocalizations
    output-localization-file: app_localizations.dart  #指定多国语配置生成的代码文件，代码中自动生成类文件AppLocalizations.dart
    synthetic-package: false
    untranslated-messages-file: lib/language/l10n/gen/app_localizations_untranslated.json
    format: true
    

    • arb（Application Resource Bundle）文件
      • 准备要支持的国际化语言集合，如下：

        #app_en.arb
        {
          "@@locale": "en",
          "appVersion": "Version: {version}",
          "@appVersion": {
            "placeholders": {
              "version": {
                "type": "String"
              }
            }
          },
          "helloWorld": "helloWorld"
        }
        #app_zh.arb
         {
          "@@locale": "zh",
          "appVersion": "版本号: {version}",
          "@appVersion": {
            "placeholders": {
              "version": {
                "type": "String"
              }
            }
          },
          "helloWorld": "你好，世界"
        }
        

        2. 生成

        在l10n.yaml同级目录下，运行命令flutter gen-l10n

        生成的代码如下：

        //app_localizations_en.dart
        //略
        //app_localizations_zh.dart
        class AppLocalizationsZh extends AppLocalizations {
          AppLocalizationsZh([String locale = 'zh']) : super(locale);
          @override
          String appVersion(String version) {
            return '版本号: $version';
          }
          @override
          String get helloWorld => '你好，世界';
        }
        //app_localizations.dart
        abstract class AppLocalizations {
          AppLocalizations(String locale)
              : localeName = intl.Intl.canonicalizedLocale(locale.toString());
          final String localeName;
          static AppLocalizations? of(BuildContext context) {
            return Localizations.of(context, AppLocalizations);
          }
          static const LocalizationsDelegate delegate =
              _AppLocalizationsDelegate();
          /// A list of this localizations delegate's supported locales.
          static const List supportedLocales = [
            Locale('en'),
            Locale('zh')
          ];
          /// No description provided for @appVersion.
          ///
          /// In zh, this message translates to:
          /// **'版本号: {version}'**
          String appVersion(String version);
          /// No description provided for @helloWorld.
          ///
          /// In zh, this message translates to:
          /// **'你好，世界'**
          String get helloWorld;
        }
        class _AppLocalizationsDelegate
            extends LocalizationsDelegate {
          const _AppLocalizationsDelegate();
          @override
          Future load(Locale locale) {
            return SynchronousFuture(lookupAppLocalizations(locale));
          }
          @override
          bool isSupported(Locale locale) =>
              ['en', 'zh'].contains(locale.languageCode);
          @override
          bool shouldReload(_AppLocalizationsDelegate old) => false;
        }
        AppLocalizations lookupAppLocalizations(Locale locale) {
          // Lookup logic when only language code is specified.
          switch (locale.languageCode) {
            case 'en':
              return AppLocalizationsEn();
            case 'zh':
              return AppLocalizationsZh();
          }
          throw FlutterError(
              'AppLocalizations.delegate failed to load unsupported locale "$locale". This is likely '
              'an issue with the localizations generation tool. Please file an issue '
              'on GitHub with a reproducible sample app and the gen-l10n configuration '
              'that was used.');
        }
        

        3. 配置

        • 配置MaterialApp或GetMaterialApp国际化字段
          • supportedLocales，支持切换的语言
          • localizationsDelegates，委托定义
          • locale，默认语言
          • fallbackLocale，出错时配置语言

            4. 调用

            • 方法1：直接使用
              • AppLocalizations.of(context).helloWorld

                //使用
                Text(AppLocalizations.of(context).helloWorld)
                

                • 方法2：扩展使用
                  • 将方法1的AppLocalizations.of(context)定义为BuildContext的扩展l10n，则可以在使用文本的地方调用context.l10n.helloWorld

                    //扩展BuildContext
                    extension BuildContextExtension on BuildContext {
                      AppLocalizations get l10n => AppLocalizations.of(this)!;
                    }
                    //使用
                    Text(context.l10n.helloWorld)
                    

                    5. 与getx结合

                    方案中提到getx，目的是利用它单实例的优点，可直接获取当前设备使用的语言，同时与main.dart的GetMaterialApp相结合，在切换的时候，可以实现全局刷新。

                    Get.updateLocale(Locale('zh')); //切换语言
                    略...
                    

                    Enjoy it~~