【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<AppLocalizations>(context, AppLocalizations);
  }

  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

  /// A list of this localizations delegate's supported locales.
  static const List<Locale> supportedLocales = <Locale>[
    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<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(lookupAppLocalizations(locale));
  }

  @override
  bool isSupported(Locale locale) =>
      <String>['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~~