FlutterでLocalizationする

公式のInternationalizing Flutter appsの通りにやると多言語対応できます。

また、ほぼ同じ内容でよりわかりやすい記事がありましたのでこちらを読むのが早いかなと思います。

---

Flutterの多言語対応の全体の流れは以下のようになります。

• MaterialAppの多言語対応設定をする
• localization用の翻訳ファイルを作成する
• Viewで翻訳ファイルを呼び出す

MaterialAppの多言語対応設定をする

flutter_localizations パッケージを追加する

pubspec.yamlにflutter_localizationsを追加する

pubspec.yaml

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

MaterialAppのdelegateと対応localesを設定

import 'package:flutter_localizations/flutter_localizations.dart';

// ...

MaterialApp(
 localizationsDelegates: [
   // localizations delegateを追加
   AppLocalizations.delegate,
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', ''), // 英語
    const Locale('ja', ''), // 日本語
    // ... 他のlocaleを追加
  ],
  // ...
)

localization用の翻訳ファイルを作成する

intlパッケージを追加する

pubspec.yaml

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

pubspec.yamlにgenerate flagを追加する

これによってpub get時に多言語対応のファイルが自動生成されるようになります。

pubspec.yaml

# The following section is specific to Flutter.
flutter:
  generate: true # 追加

l10n.yamlを追加する

ルートディレクトリにl10n.yamlを追加して、以下を記述する

l10n.yaml

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

これにより以下の設定がなされます。

• json形式の翻訳ファイルの設置場所をlib/l10nと設定
• 翻訳ファイルのテンプレートを app_en.arbと設定
• 生成するl10n用dartファイルを app_localizations.dartと設定

l10n.yamlで設定したlib/l10nにapp_en.arbを設置する

app_en.arb

{
    "helloWorld": "Hello World!",
    "@helloWorld": {
        "description": "The conventional newborn programmer greeting"
    },
    "since": "Since",
    "@since": {
        "description": "Since {YEAR}",
        "placeholders": {
            "YEAR": {
                "example": "2020",
                "description": "created year"
            }
        }
    }
}

sinceはプレースホルダを利用しています。
その他のarbの使い方はこちらを参考にしてみてください。

app_ja.arbを設置する

app_ja.arb

{
    "@@locale": "ja",
    "helloWorld": "こんにちは、世界！",
    "since": "{YEAR}年からやってます"
}

/flutter_gen/gen_l10nを生成する

pub getすると/flutter_gen/gen_l10nが生成されるので確認する

Viewで翻訳ファイルを呼び出す

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        AppLocalizations.of(context).helloWorld,
        style: Theme.of(context).textTheme.headline2,
      ),
      Text(
        AppLocalizations.of(context).since(2020),
        style: Theme.of(context).textTheme.headline2,
      ),
      Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.headline4,
      ),
    ],
  ),
),

表示

それぞれの表示は以下のようになります。

---

記事にすると煩雑に思えますが、やってみると簡単です。
ぜひやってみてください。