flutter_localizations:轻松实现Flutter国际化

作为一名 Flutter 开发者,如何快速高效地让我们的应用支持多语言呢?

今天就来聊聊 flutter_localizations 这个神器,带你轻松实现 Flutter 国际化!

flutter_localizations是Flutter 官方推荐的国际化解决方案,与 Flutter 框架深度集成,稳定性和兼容性无需担心。

它的扩展性极强,当你的应用需要新增语言时,只需简单配置就能完成,大大降低了开发成本和维护难度。

01. 安装依赖

这里用的flutter_localizations是官方SDK的Package,不同于pub.dev上的名为flutter_localization的Package。

flutter_localizations依赖的intl版本lock在了0.19.0,所以不能用pub.dev上最新版本。

pubspec.yamlflutter对应小节加上generate: true

后续多国语言资源文件变更时运行flutter gen-l10n即可重新生成语言资源API代码文件

yaml 复制代码
pubspec.yaml

dependencies:
	flutter_localizations:  
		sdk: flutter  
	intl: 0.19.0
	
flutter:
	generate: true

然后运行flutter pub get更新依赖。

02. 创建l10n配置文件

pubspec.yaml同级创建l10n.yaml

makefile 复制代码
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
  • arb-dir:指定语言资源文件位置
  • template-arb-file:指定模板使用哪个语言的文件
  • output-localization-file:指定生成的语言资源API代码文件名,便于在渲染Widget时引用

03. 手动创建需要支持的语言资源文件

默认文件名格式是app_{LANG-CODE}.arb,如英语则为app_en.arb,中文则为app_zh.arb

更多语言代码参考:

GlobalMaterialLocalizations class - flutter_localizations library - Dart API

应用里用到字符串渲染时先在arb资源文件里定义,以简单的欢迎语为例:

普通字符串hello称为资源(Resource)ID,Widget里引用其值的时候,可以通过语言资源API对象点语法操作取值。

@开头的字符串@hello称为资源属性,定义对应Resource的元数据,数据类型,描述等

示例中hello对应Resource里带有一个placeholder参数userName,对应取值形式是作为带参数函数调用。

其他常用语法可以参考文档: i18n | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

04. 生成语言资源API代码

运行flutter gen-l10n,没有错误信息说明生成成功。 生成的文件在.dart_tool/flutter_gen/gen_l10n目录里,

05. 应用入口类里全局配置

main.dart

arduino 复制代码
`import`语言资源:
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

MaterialApp添加初始化参数:
localizationsDelegates: AppLocalizations.localizationsDelegates,  
supportedLocales: AppLocalizations.supportedLocales,

06. Widget的build上下文里引用对应Resource

这里有个地方要注意,引用语言资源不能直接在MaterialApp里使用。 如下图用法运行会报空安全异常

Material 应用必须启动完成后才能初始化 AppLocalizations

如果应用尚未完全启动, AppLocalizations.of(context)!.helloWorld 将导致空异常。

然后单独创建一个Widget就可以正常运行了

  • 17行在MaterialApp里可以通过指定语言代码来测试

07. 总结

通过 flutter_localizations,我们能够轻松实现 Flutter 应用的国际化,让应用突破语言的限制,走向更广阔的市场。

从基础配置到动态切换,再到避坑指南,相信大家对它已经有了全面的了解。

相关推荐
心中有国也有家1 小时前
AtomGit Flutter 鸿蒙客户端:呼吸球动画
学习·flutter·华为·harmonyos
心中有国也有家3 小时前
AtomGit Flutter 鸿蒙客户端:呼吸练习的三种科学模式
学习·flutter·华为·harmonyos
yuanlaile4 小时前
前端转 Flutter 自学完整规划,避开跨栈思维转换误区
前端·flutter·flutter跨平台开发
姑苏倾城客4 小时前
Flutter中,html 与 dart 桥接沟通
javascript·flutter·html
ZZZMMM.zip5 小时前
基于鸿蒙HarmonyOS NEXT开发AI书籍推荐应用:智能阅读新体验与鸿蒙Flutter框架跨端实践
人工智能·flutter·华为·harmonyos·鸿蒙
铅笔侠_小龙虾6 小时前
DSL-Flutter : 告别嵌套地狱,用缩进书写 Flutter!
flutter
ZZZMMM.zip19 小时前
基于鸿蒙HarmonyOS NEXT开发AI股票分析应用:智能投资新体验与鸿蒙Flutter框架跨端实践
人工智能·flutter·华为·harmonyos·鸿蒙
韩曙亮1 天前
【Flutter】Flutter 进程保活 ③ ( 屏幕常亮设置 | Flutter 禁止息屏、关闭自动锁屏、屏蔽系统屏保 )
android·flutter·ios·屏幕常亮·禁止息屏
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:情绪日记的时间线实现
学习·flutter·华为·harmonyos
西西学代码1 天前
Flutter---Container
flutter