0
点赞
收藏
分享

微信扫一扫

Flutter 多语言 插件 intl


我们使用as支持的一款插件 intl

  ​​https://pub.dev/packages/intl​​

Flutter 多语言 插件 intl_html5

 安装插件 flutter Intl

Flutter 多语言 插件 intl_flutter_02

安装后重启

 新增依赖 dev_dependencies 下面添加如下代码

flutter_localizations:
sdk: flutter

Flutter 多语言 插件 intl_html5_03

 点击获取下

Flutter 多语言 插件 intl_flutter_04

使用刚才安装的工具,点击Tools Flutter Intl  初始化工程给他多语言的能力

Flutter 多语言 插件 intl_重启_05

 Lib下会新增很英语的多语言文件

Flutter 多语言 插件 intl_重启_06

并且 清单文件最下面会新增(不需要我们手动改什么)

flutter_intl:
enabled: true

这些文件我们不需要用手动去创建 

依然还是使用脚本

 

Flutter 多语言 插件 intl_多语言_07

Flutter 多语言 插件 intl_重启_08

根据我多年开发者的多语言的经验。已知中文是zh_CN

新增后项目如下

Flutter 多语言 插件 intl_重启_09

多出的文件分别是 

messages_zh_CN.dart
intl_zh_CN.arb

 我们后面要用。现在先看下里面有什么

intl_zh_CN.arb

Flutter 多语言 插件 intl_html5_10

一个空Json。。想必在座的各位都知道他是怎么设计的了吧?

不知道也没关系。我们继续往下配置

在我们的 


runAPP的第一个Wegight标签下新增如下代码


MaterialApp(
...
localizationsDelegates: const [
GlobalCupertinoLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
S.delegate
],
supportedLocales: S.delegate.supportedLocales,
...
)

直接报错?没关系 !我们在上面导入依赖

import 'package:flutter_catalog/generated/l10n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

我们编辑intl_zh_CN.arb 这个文件新增如下代码

{
"title": "安果移动果然名不虚传"
}

英语是不是也同样要加上? 

修改文件 intl_en.arb

打开Goole翻译  

 

Flutter 多语言 插件 intl_重启_11

{
"title": "Anguo Mobile really deserves its reputation"
}

ok 怎么调用呢? 

如果想用title里面的文案就可以使用

S.of(context).title

他会在英语的时候使用英语。中文环境下使用中文。想必在做的各位都清楚了吧

我给大家看下

代码

Flutter 多语言 插件 intl_重启_12

 效果图

英语环境下:

Flutter 多语言 插件 intl_flutter_13

中文环境下:

Flutter 多语言 插件 intl_多语言_14

举报

相关推荐

0 条评论