はじめに

Flutterの公式で紹介されているInternationalizingを使うと、言語ファイルの更新がだる過ぎて無理だったので、
Flutter i18nプラグインで多言語化を楽にした備忘。

環境

Flutter 1.7.8+hotfix.4
Dart 2.4.0
Android studio 3.5

前準備

Flutter i18nプラグインをインストール済
（プラグインインストールするだけだから割愛）

Flutter i18nプラグイン

やってくれること

arbファイルからInternationalizing用のファイルを自動生成してくれる
ファイル自体は「generated/i18n.dart」にできる

自分でやらないといけないこと

arbファイルの中身を記述する

注意事項

プラグイン入れると、res/values/strings_en.arbっていうのができるけど、これは消してはいけない
自動生成ファイルはstrings_en.arbに定義されているキーのモノしか生成されない
プラグインのページに書いてある通りに、

return new MaterialApp(
  localizationsDelegates: [S.delegate],
  supportedLocales: S.delegate.supportedLocales,
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new MyHomePage(title: 'Flutter Demo Home Page'),
);

ってやると、ScaffoldのAppbar周りがエラー吐きまくる。
(MaterialLocalizations使ってるけど、en以外はデフォルトで見てないからエラーになる)
以下みたいに書かないといけない。


import 'package:your_app_name/generated/i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

// ・・・ 

return new MaterialApp(
  localizationsDelegates: [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new MyHomePage(title: 'Flutter Demo Home Page'),
);

クパチーノ使わない場合でも、GlobalCupertinoLocalizationsしないといけない。
テキストフィールドの長押しでアプリがクラッシュする。

TextFieldの長押しでクラッシュする問題の対応方法

使い方

言語の足し方

${project_root}/res/valuesを選択した状態で、
[File] - [New] - [Arb File]

こんなダイアログが出てくるので言語を選ぶ。方言は任意。

作ったarbファイルに設定を追加していく

strings_en.arb

{
  "_comment": "アプリ名",
  "appName": "my app name",

  "_comment": "コメント適当に入れながら書いてく",

}

strings_ja.arb

{
  "_comment": "アプリ名",
  "appName": "アプリ名適当に入れて",

  "_comment": "コメント適当に入れながら書いてく",

}

ファイルを変更したタイミングで自動生成される
ちなみに自動生成ファイルを自分で編集しようとしても、自動生成された状態に戻る

この定義自体はnestしたObjectで定義できないので、コメント書きながらやるのが良さげ。
同じキーのものは一番最後のものだけが自動生成されて追加されるので、好きなだけ追加は可能。
（ただ、ideが視覚的にうるさいという難点が・・・）

使い方


import 'package:your_app_name/generated/i18n.dart';

// ・・・ 

@override
Widget build(BuildContext context) {
  var name = S.of(context).appName;
}

locationはplatformレベルの言語設定に依存するしかないっぽい？
アプリレベルで書き換えれるならやり方一応知っときたいという思いがあるので、どなたか教えてください。

終わりに

Mapで定義してgetter生やすか、コマンド何回も自分で叩かないといけないのかと思ってつらそう。。って思ってたけど、
このプラグインがあればストレスなく多言語化できます。

enが必須になっちゃいますが、多言語化はおいおいって場合は、日本語で突っ込んどけばいいと思います。
（今自分の作ってるものはそうなってる）

Flutter i18nプラグインの使い方