這次我們要加入多國語系，除了官方的做法之外還有可以透過我們熟悉 JSON 的方式來加入，話不多說那我們就開始吧！
Easy Localization 1.3.1
在開始之前我們先確認一下我們當前的環境，Flutter的世界變換很快，有可能你看到這篇文章時已經過時了，不過大多都只是小更新一下。
初始化
首先我們在根目錄(此專案的目錄)底下存放多語系的 JSON 檔案，剛開始我們分別先建立中文跟英文的檔案，可以根據你想要的語系建立其他的檔案。
1
2
3
4
| assets/
i18n/
en-US.json
zh-TW.json
|
接著我們可以在各個檔案裡加入語系內容，我以zh-TW.json做示範。
緊接著打開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"));
},
)
|
以上就是這次的小教學，非常感謝各位，我們下次見。
