flutter: 多言語対応する際の初期設定

flutter多言語対応の導入メモ。

Packageのインストール

$ flutter pub add flutter_localizations
$ flutter pub add intl:any

ファイル設定

pubspec.yaml で、 generate フラグがtrueでない場合は設定します

flutter:
  generate: true

プロジェクトルートに l10n.yaml を新規追加し、localizationに関するファイルの指定をします

arb-dir: lib/l10n # 各種言語ラベルを指定するarbファイルの置き場所
template-arb-file: app_en.arb # テンプレートとなるarbファイル
output-localization-file: app_localizations.dart # 自動生成先

各種言語ラベルの追加

上記 arb-dir で指定したフォルダ以下に、言語ごとにarbファイルを作成し言語ラベルを追加します

app_en.arb

{
  "@@locale": "en",
  "appTitle": "App Title",
  "settings_view_title": "Settings"
}

app_ja.arb

{
  "@@locale": "ja",
  "appTitle": "アプリタイトル",
  "settings_view_title": "設定"
}

VSCodeの設定

flutter run や flutter get で上記ラベルが適用されたlocalizationファイルを生成することができますが、watchコマンドがなく不便です。
VSCodeの設定で言語ラベルの保存時に自動生成されるようにしましょう。

"dart.flutterGenerateLocalizationsOnSave": "manualIfDirty" # 変更があって手動で保存したときのみ生成します

その他のオプションについてはこちら

私の環境では .arb が Rubyとして認識されフォーマットがうまくいかなかったため、下記を追加しました。

"files.associations": {
    "*.arb": "json"
 }

また、デフォルトでは言語ラベルへのmeta設定が必須になっていたので、任意にしておきました。

"arb-editor.suppressedWarnings": ["missing_metadata_for_key"]

これで、ラベルファイル保存するとターミナルに実行タスクの状況が表示されるはずです。エラーがでていないか確認しましょう。

MaterialAppへ適用

MaterialApp へlocalization設定を追加することで、すべての子Widgetにシステム言語または明示的に指定した言語で文言が反映されます

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

...
const MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  // locale: settings.language,
);

localizationsDelegates supportedLocales は先ほど自動生成された情報を適用します。supportedLocales は arb-dir 以下に用意した arbファイルが反映されています。
locale は任意です。指定しないとシステム言語が使われます。また、指定していてもsupportedLocalesに含まれていない言語だった場合は supportedLocales の1番目に指定された言語にフォールバックされます。

...
appBar: AppBar(
  title: Text(AppLocalizations.of(context)!.appTitle),
),

Ref

docs.flutter.dev

kokh log

yumikokhの開発日記