Flutter 多语言 插件 intl

Posted 2021-10-21 安果移不动

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

  https://pub.dev/packages/intl

 安装插件 flutter Intl

安装后重启

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

  flutter_localizations:
    sdk: flutter

 点击获取下

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

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

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

flutter_intl:
  enabled: true

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

依然还是使用脚本

 

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

新增后项目如下

多出的文件分别是 

messages_zh_CN.dart
intl_zh_CN.arb

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

intl_zh_CN.arb

一个空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翻译  

 

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

ok 怎么调用呢？ 

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

S.of(context).title

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

我给大家看下

代码

 效果图

英语环境下：

中文环境下：