Flutter の多言語対応

どうも、たくチャレ(@takuchalle)です。

Flutterで作ってるアプリの多言語対応した時のメモです。 多言語対応といっても今は日本語しかサポートしていません。例え1言語しかサポートしなくてもソースコードに直値があるのは気持ち悪いので、この対応を行うことでソースコードがスッキリすると思います。

公式サイトに詳しく記載されているので、英語に抵抗がない方・詳しく見たい方はこちらを参照してください。

多言語対応方法

flutter_localizationsをインストールする

Flutterはデフォルトでは英語しかサポートしていないので、flutter_localizationsパッケージをインストールことで他の言語をサポートすることができます。 サポートされている言語はこちらで確認できます。

pubspec.yamlに記載します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 追加
    sdk: flutter         # 追加

インストールすると下記のようにMaterialAppのlocalizationsDelegatesとsupportedLocalesを指定します。

import 'package:flutter_localizations/flutter_localizations.dart';

return const MaterialApp(
  title: 'サンプル',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('ja', ''), // 日本語追加
    Locale('en', ''), // 英語追加
  ],
  home: MyHomePage(),
);

Widgetのbuildメソッド内でMaterialLocalizations.of(context)でMaterialLocalizationsにアクセスできるので、

Text(MaterialLocalizations.of(context).cancelButtonLabel)

と記述すると日本語の場合キャンセル、英語の場合Cancelと表示されます。¹

Widgetでよく使われる単語はMaterialLocalizationsに定義されているので自分で用意する必要はありません。 こちらにすべて定義されているので、一度見てみることをオススメします。命名ルールも参考になるかと思います。

intlをインストール

ここから自分で定義した単語や文章を使用する準備をします。

大まかな流れは以下のようになります。

1. パッケージをインストールする
2. .arb拡張子の定義ファイルを用意する
3. .dartに変換する
4. MaterialAppに追加する
5. Widgetから参照する

まずいつもどおりpubspec.yamlにintlを追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: # 追加

更にflutterセクションにgenerate: trueも追加します。 これでビルド時に.arbから.dartに変換してくれます。

flutter:
  generate: true

次に変換するための定義ファイルを作成します。 ルートディレクトリにl10n.yamlファイルを作成し、以下のように書きます。

arb-dir: lib/l10n # .arb を配置する任意のディレクトリ
template-arb-file: app_ja.arb # 日本語を定義するファイル
output-localization-file: app_localizations.dart # 変換後のファイル名

lib/l10n/app_ja.arbの中身を書いていきます。

{
    "helloWorld": "こんにちわ、世界",
    "@helloWorld": {
      "description": "生まれたてのプログラマの最初の挨拶です"
    }
}

VSCode を使用しているなら、Flutter Intlというプラグインで.arbファイルの色付けとかしてくれるので便利です。

今後言語を増やしていきたい場合は、app_ja.arbのjaの部分を言語コードにして定義ファイルを書いていけば良いです。

ここまでの準備ができたらアプリをビルドします。すると${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10nに.arbから変換されたapp_localizations.dartが生成されているはずです。

生成されたファイルはflutter_gen/gen_l10n/app_localizations.dartで参照できるのでインポートして、AppLocalizations.delegateをlocalizationsDelegatesに指定します。 ひとまとめにしたコードがこちらです。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

return const MaterialApp(
  title: 'サンプル',
  localizationsDelegates: [
    AppLocalizations.delegate, // 追加
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('ja', ''), // 日本語追加
  ],
  home: MyHomePage(),
);

最後にWidget内で以下のように参照して表示できれば完成です。

Text(AppLocalizations.of(context)!.helloWorld);

MaterialAppは以下のように書くこともできます。これらは自動生成されるので、新規の言語の.arbファイルを追加するだけで、ソースコードは修正せずに新規の言語に対応できます。

const MaterialApp(
  title: 'サンプル',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
);