微信交流群

# 使用Intl包实现国际化

Intl 官方出品,包含用于处理国际化/本地化消息,日期和数字格式和解析,双向文本以及其他国际化问题。

pub地址:https://pub.dev/packages/intl

Github地址:https://github.com/dart-lang/intl

Android Studio 和 VS Code 都有 Flutter Intl 插件,方便接入。

# 安装插件

并不是一定要使用插件,也可以通过命令行,当然 Flutter Intl 插件简化操作, Android Studio -> File -> Setting -> Plugins -> 搜索Flutter Intl:

安装重启即可。

VS Code 的 Flutter Intl 插件:https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

# 添加依赖

在项目的 pubspec.yaml 文件中添加依赖:

dev_dependencies:
	...
  flutter_localizations:
    sdk: flutter
1
2
3
4

执行命令:

flutter pub get
1

Tool->Flutter Intl ->Initalize for the project:

成功后,在 pubspec.yaml末尾增加:

flutter_intl:
  enabled: true
1
2

在lib下生成generated 和 l10n

  • generated包下的intl目录默认生成 messages_all.dartmessages_en.dart 文件,messages开头的文件无需手动修改,是自动生成的。
  • generated包下的 I10n.dart 是Localizations和Delegate的实现,无需手动修改,是自动生成的。
  • l10n包下存在一个intl_en.arb文件,文案存放在此处。

# 添加语言

Tool->Flutter Intl -> Add Locale:

添加中文支持:

自动生成相关文件:

# 添加系统国际化支持

在pubspec.yaml文件中添加包依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
1
2
3
4
5

MaterialApp 修改如下:

MaterialApp(
  ...
  localizationsDelegates: [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  ...
)
1
2
3
4
5
6
7
8
9
10
11

# 在 intl_en.arb 和 intl_zh.arb下添加文案

添加一个 title 文案,intl_en.arb:

{
  "title": "hello word"
}
1
2
3

intl_zh.arb:

{
  "title": "你好"
}
1
2
3

command + s 保存,generated 目录下相关文件将会重新生成。

使用:

class LocalizationDemo extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('${S.of(context).title}'),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10

Intl 还可以进行日期和数字格式化等, 具体功能可参考官方文档:https://github.com/dart-lang/intl