Flutter自带国际化适配自动生成方案
2023-06-13 09:12:13 时间
1. 介绍
在研究别人的项目期间,突然发现了此方案,特意分享,原来flutter自己已经有一套成熟的国际化生成功能,配置完成后,只需要编写arb
即可,主要有以下步骤
- 新建一个
l10n.yaml
文件
- 新建一个
- 添加和配置所需文件
- 更改pubspec.yaml
- flutter packages get
- 使用
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
- arb
- l10n
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的内容还有很多,例如,添加参数等,自行可研究,以上完!
相关文章
- Flutter快速开发——列表分页加载封装
- flutter 序列化 jsonEncode jsonDecode
- [- Flutter 数据&状态篇 -] setState
- 【Flutter&Flame 游戏 - 叁】手势操作与键盘事件
- flutter的画布认识
- flutter源码:setState分析
- Flutter中如何设置全局字体
- flutter系列之:flutter中可以建索引的栈布局IndexedStack
- 【Flutter】Dart 数据类型 布尔类型 ( 布尔类型定义 | 逻辑运算 )
- 【错误记录】Flutter 设备连接显示 Loading... ( 断网 | 删除 flutter/bin/cache/lockfile 文件 )
- 【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【错误记录】Flutter 报错 ( Because xx depends on flutter_driver any from sdk which depends on args 1.6.0 )
- 【Flutter】JSON 模型转换 ( JSON 序列化工具 | JSON 手动序列化 | 根据 JSON 编写 Dart 模型类 | 在线自动根据 JSON 转换 Dart 类 )
- 【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 BasicMessageChannel 通信 )
- 只需浏览器!在线完成Flutter从编程到打包全过程