Yukii

主にプログラミング(Flutter)についての記事を書いています。

Flutterでの多言語対応をする

本日はFlutterでの多言語対応のの方法と確認方法について書きたいと思います。

設定方法

1. pubspec.yamlにpackageを追加

まず、多言語用にパッケージを追加します。
f:id:muscle_girl:20200531181442p:plain

2. lib/l10n というファイルを作成し、その中にローカライズ用のクラスを作成

l10n.dartf:id:muscle_girl:20200522164358p:plain

l10n_delegate.dart
f:id:muscle_girl:20200531202102p:plainf:id:muscle_girl:20200531202247p:plain


3. messates.dartを作成し、多言語に使うためのgetterを定義する

f:id:muscle_girl:20200531182115p:plain
今後、言語を追加したいときに逐次このファイルに追加します。

4. メインのarbファイル自動作成

f:id:muscle_girl:20200531182324p:plain
これによって intl_messages.arbが生成されます。

5. 主言語のarbファイル自動作成(今回は日本語)

f:id:muscle_girl:20200531182532p:plain
この命令で、4で生成されたintl_messages.arbをコピーしてintl_ja.arbを作成します。

6.別言語のarbファイル作成(今回は英語)

intl_ja.arbを参考に別言語のarbファイル((ex) 英語ならintl_en.arb)を作ります。
(messages.dartに新たに追加したgetterから生成したJSONがintl_ja.arbに追加されているので、その部分を別言語のarbファイルにコピーしvalueを翻訳してください(下図の赤枠部分))。
f:id:muscle_girl:20200531185250p:plain


7. arbファイル群から多言語対応に必要なクラスを自動生成

f:id:muscle_girl:20200531185423p:plain
messages_*.dartが生成されます。(生成されたmessages_*.dartは編集しないでください)

8. main.dartに設定

f:id:muscle_girl:20200531202247p:plain
f:id:muscle_girl:20200531185623p:plain
パッケージと設定ファイルをインポートし、localizationsDelegatesと supportedLocalesをMaterialAppに設定します。
ここで L10c.delegateは今回のローカライズのために 2.で作成したDelegateです。
GlobalMaterialLocalizations.delegate は多分組み込みのローカライズのものらしく日付のフォーマットなどが管理されています。
GlobalWidgetsLocalizationsはウィジェットローカライズするために必要らしく右から書く言語とかに対応するためにいるみたいです。
GlobalCupertinoLocalizations.delegateはFlutterで多言語対応をした場合にiosで言語を日本語にして、TextFieldで長押しするとクラッシュするのを回避ために設置しました。

9. 多言語設定したい各ファイルに設定

f:id:muscle_girl:20200531202613p:plain
f:id:muscle_girl:20200531185933p:plain
設定ファイルをインポートし、言語切り替えしたい部分に呼び出します。
この時、l10n.dartで生成したClass名を使ってmessages.dartで設定したgetterのメソット名を使います。
さらにここではBuildContext contextが使える範囲で使用しないとエラーが発生するので、設定場所を工夫したたり、contextを変数にしておいてbuild内等で初めて代入するなど工夫が必要は部分も出てきます。

確認方法

1. iOS

1.1-XcodeでLocalozationを変える
f:id:muscle_girl:20200531190555p:plain
このDevelopment Languageはproject.pbxproj の以下の部分を変えると変更できます。
f:id:muscle_girl:20200531190659p:plain

1-2. runするときの言語と地域を選択する
f:id:muscle_girl:20200531191413p:plain

1-3. 実機を起動してチェック

2. Android

端末の言語を切り替えるだけで確認できます。