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

2,199 阅读1分钟

image.png

1. 介绍

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

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

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

image.png

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目录下,生成了国际化适配的代码,再重新查看之前报错的代码,都正常了

image.png

5.使用

MaterialApp修改如下:

image.png

需要使用的地方:

image.png

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