Flutter自带国际化适配自动生成方案

1. 介绍

在研究别人的项目期间,突然发现了此方案,特意分享,原来flutter自己已经有一套成熟的国际化生成功能,配置完成后,只需要编写arb即可,主要有以下步骤

• 1. 新建一个l10n.yaml文件
• 2. 添加和配置所需文件
• 3. 更改pubspec.yaml
• 4. flutter packages get
• 5. 使用

1. 新建一个l10n.yaml文件

添加内容如下:

arb-dir: lib/l10n/arb
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: false

解析:

• arb-dir: arb 所在的目录
• template-arb-file: 默认使用的arb文件
• output-localization-file: 导出的文件名
• nullable-getter: 获取国际化文本是否可空

2. 添加和配置所需文件

新建文件及文件夹如下:

• 项目下的lib
  • l10n
    • arb
      • app_en.arb
      • app_es.arb
    • l10n.dart

app_en.arb 文件内容

{
  "@@locale": "en",
  "appName": "Remarks",
  "@appName": {
      "description": "备注"
  }
}

@appName表示配置一些东西,description表示添加注释,app_es.arb 同理可得

l10n.dart 代码如下:(导入的内容虽然有报错,先不用管)

import 'package:flutter/widgets.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

export 'package:flutter_gen/gen_l10n/app_localizations.dart';

extension AppLocalizationsX on BuildContext {
  AppLocalizations get l10n => AppLocalizations.of(this);
}

3. 更改pubspec.yaml

添加generate属性

flutter:
  uses-material-design: true
  # 添加这个属性
  generate: true

4. 运行flutter packages get

运行成功后,可以在.dart_tool目录下,生成了国际化适配的代码,再重新查看之前报错的代码,都正常了

5.使用

MaterialApp修改如下:

需要使用的地方:

arb的内容还有很多,例如,添加参数等,自行可研究,以上完!