這次我們要加入多國語系，除了官方的做法之外還有可以透過我們熟悉 JSON 的方式來加入，話不多說那我們就開始吧！

Easy Localization 1.3.1

在開始之前我們先確認一下我們當前的環境，Flutter的世界變換很快，有可能你看到這篇文章時已經過時了，不過大多都只是小更新一下。

Name Version
Flutter Version v1.12.13+hotfix+6
Easy Localization v1.3.1

初始化

首先我們在根目錄(此專案的目錄)底下存放多語系的 JSON 檔案，剛開始我們分別先建立中文跟英文的檔案，可以根據你想要的語系建立其他的檔案。

1
2
3
4
assets/
  i18n/
    en-US.json
    zh-TW.json

接著我們可以在各個檔案裡加入語系內容，我以zh-TW.json做示範。

1
2
3
{
  "TITLE": "多語系範例"
}

緊接著打開pubspec.yaml檔案並加入套件，可以根據你現在的版本來調整，除此之外加入file.json的內容：

1
2
3
4
5
6
7
8
9
10
11
12
dependencies:
  easy_localization: ^1.3.1

  ...

flutter:

  ...

  assets:
    - assets/i18n/en-US.json
    - assets/i18n/zh-TW.json

下一步我們打開main.dart，初期導入一些內容，實作中我以...的方式壓縮程式碼，比較方便觀看實作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
...

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:easy_localization/easy_localization.dart';

void main() {
  runApp(EasyLocalization(child: MyApp()));
}

class MyApp extends StatelessWidget{
  ...

  Widget build(Buildcontext context) {
    var localeData = EasyLocalizationProvider.of(context).data;
    return EasyLocalizationProvider(
      data: localeData,
      child: MaterialApp(
        /// 此處放置預設與語系位置
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          // app-specific localization
          EasylocaLizationDelegate(
            locale: localeData.locale,
            path: 'assets/i18n',
          ),
        ],

        /// 接著告訴他們我們要使用哪些語系
        supportedLocales: [
          Locale('en', 'US'),
          Locale('zh', 'TW'),
        ],

        /// 當前的語系
        locale: localeData.savedLocale,
      ),
    );
  }
}

此時初始化就完成了，接著就可以在 Flutter 裡面使用多語系。

使用多語系

接著我們使用指令呼叫內容，首先我們先導入套件接著再使用下方指令來新增。

1
2
3
4
5
import 'package:easy_localization/easy_localization.dart';

Text(
  child: AppLocalizations.of(context).tr('TITLE'),
);

辨識當前語系

依照需求可以透過下方來判斷當前語系：

1
2
3
4
5
6
7
8
/// zh-tw
Localizations.localeOf(context).toLanguageTag()

/// zh
Localizations.localeOf(context).languageCode

/// TW
Localizations.localeOf(context).countryCode

舉個例子，下方我是建立一個清單，右側(trailing)資訊會顯示是否為當前語系，可以透過此方法來清楚告訴使用者，當前使用的是哪一種語系類型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import 'package:easy_localization/easy_localization.dart';

...

class ... {

  dynamic localeData;

  Widget build(BuildContext context) {
    localeData = EasyLocalizationProvider.of(context).data;

    ...

    InkWell(
      child: ListTile(
        title: Text(
          AppLocalizations.of(context).tr('LANGUAGE.ZHTW'),
          style: TextStyle(
            color: textColor,
          ),
        ),
        trailing:
            (Localizations.localeOf(context).toLanguageTag() == 'zh-TW')
                ? Text(
                    AppLocalizations.of(context).tr('LANGUAGE.CURRENT'),
                    style: TextStyle(
                      color: primaryColor,
                    ),
                  )
                : null,
      ),
      onTap: () {
        print(Localizations.localeOf(context).countryCode);
      },
    )

    ...

  }

}

更改語系

同上題的範例，我們可以在onTap加入更改現有的語系：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...

InkWell(
  child: ListTile(
    title: Text(
      AppLocalizations.of(context).tr('LANGUAGE.ZHTW'),
      style: TextStyle(
        color: textColor,
      ),
    ),
    trailing:
        (Localizations.localeOf(context).toLanguageTag() == 'zh-TW')
            ? Text(
                AppLocalizations.of(context).tr('LANGUAGE.CURRENT'),
                style: TextStyle(
                  color: primaryColor,
                ),
              )
            : null,
  ),
  onTap: () {
    localeData.changeLocale(Locale("zh","TW"));
  },
)

以上就是這次的小教學，非常感謝各位，我們下次見。