Flutter 多语言 插件 intl

  • Post author:
  • Post category:其他


我们使用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

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

我给大家看下

代码

效果图

英语环境下:

中文环境下: