Flutter-国际化开发

flutter 国际化方面，在网上蛮多的。这篇文章只是记录，用来稳固我的记忆力。

部署环境&初始化

这边用到vscode进行开发，需要下载 Flutter Intl 插件。

image.png
下载完成后，在项目中的pubspec.yaml添加依赖库。

...
dependencies:
    flutter_localizations:
        sdk: flutter
...

在vscode中按command\ctrl+shift+p，然后会弹出一个输入vscode内置命令的输入框和下拉结果。
在flutter项目中，首次需要搜索Flutter Intl: Initialize命令，回车即可初始化和生成国际化相关文件代码。

image.png image.png

就在项目中lib中默认生成了以下文件：

|-- generated 自动生成的文件，不需要手动编辑
    |-- intl
    |   |-- messages_all.dart 桥接多个语言文件 下面en zh等文件。
    |   |-- messages_en.dart 转译文件 自动从l10n/intl_en.arb 提取key/value 自动生成代码
    |-- l10n.dart 入口文件代码，不需要手动编辑
|-- l10n  存放国际化json文件位置 arb=json
    |-- intl_en.arb

在入口Widget添加，localizationsDelegates 和 supportedLocales变量。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

新增国际化

添加新的国际化文件可以搜索Flutter Intl: Add Locale命令，回车会切换到输入国际化编码。

image.png
会提示输入国际化编码，例如简体中文就 zh_Hans_CN。
image.png

然后就会在l10n文件夹，自动添加 intl_zh_Hans_CN.arb文件，以及在generated/l10n中生成转译文件。

注：在ios中按需添加以下配置：

image.png

在代码中使用

首先在arb文件里面分别添加国家化。
intl_en.arb

{
  "hello": "hello"
}

intl_zh_Hans_CN.arb

{
  "hello": "你好"
}

保存后就会在转译文件自动生成相应代码。

在页面上使用：

Widget build(BuildContext context) {
    return Column(children: [
        Text(
            S.current.hello,
        ),
    ]);
}

页面内国际化切换

Flutter项目默认是自动跟随系统语言的。
页面内切换语言。

const locale = Locale('zh', 'CN');
MyApp.of(context).setLocale(locale)