FlutterのLocalization

アプリケーションを世界中の人に使ってもらう上で、Localization は欠かすことのできない重要な要件です。Flutter では ARB ファイルを使って簡単にアプリケーションの Localization 対応が可能となっています。本記事では、その方法を解説します。ちなみに、Flutter のバージョンによってやり方が変わってきます（昔は AppLocalizations クラスとかは自作していた）。本記事は Flutter 2.0.1 を使用して動作確認しています。

1. pubspec.yaml の修正

pubspec.yaml に下記の dependencies を追加します。

1dependencies:
2  flutter:
3    sdk: flutter
4  flutter_localizations:
5    sdk: flutter
6  intl: ^0.16.1

これらのパッケージはアプリケーションをローカライズする上で必要となるものです。

2. pubspec.yaml の generate フラグを true にする

1flutter:
2  generate: true

このフラグをつけることで、後述する ARB ファイルから AppLocalizations のクラスを自動生成することができます。

3. l10n.yaml ファイルを作成する

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

これは Flutter が AppLocalizations クラスを自動生成するときに使用する設定ファイルです。1 つ目の arb-dir には、後述の ARB ファイルのディレクトリを指定します。template-arb-file には、ベースとなる ARB ファイルを指定します。最後の output-localization-file は、自動生成される AppLocalizations クラスのファイル名です。

4. ARB ファイルを作成する

l10n.yaml で指定したディレクトリに ARB ファイルを作成します。 ARB ファイルは json 形式のファイルで key-value 形式で key に対して対応する文言を記載していきます。この key のことを resource id、value のことを Resource Value と呼びます。

1{
2  "helloWorld": "Hello World!",
3  "@helloWorld": {
4    "description": "The conventional newborn programmer greeting"
5  }
6}

ARB ファイルでは resource id に@マークを付けることで、その resource id に関する説明等を記載することができます。上の例では、helloWorldという resource id に対して@helloWorldで説明文を追加しています。 あとは、対応言語の数だけ ARB ファイルを作成し、各言語に対応した文言を resource value に記載していきます。 例えば、この helloWorld を日本語に対応させる場合は、下記のように app_ja.arb ファイルを作成します。

1{
2  "helloWorld": "こんにちは世界!"
3}

ARB ファイルでは様々な記載が可能になっていますが、ここで、一例として placeholder を紹介します。placeholder を使うと下記のように文言の中に外部からパラメータを指定することができます。

1"pricePerMonth": "{price} per month",
2"@pricePerMonth": {
3  "placeholders": {
4    "price": {
5      "example": "123.45",
6      "description": "price"
7    }
8  }
9}

resource value にパラメータを{price}という形式で記載します。 次にそのパラメータの情報をplaceholdersとして@resource idの中に記載します。 このようにARBファイルを記載しておくと、AppLocalizationsクラスが自動生成されて、プログラムから呼び出すときには下記のようにpriceをパラメータとして指定できるようになります。

1AppLocalizations.of(context).pricePerMonth(100.0);

5. AppLocalizations クラスの自動生成

flutter pub get もしくは、build することで自動的に AppLocalizations クラスのファイルが生成されます。ファイル名は先ほど l10n.yaml で指定したものになります。 上の例だと.dart_tool/flutter_gen/gen_l10n/app_localizations.dart ですね。ディレクトリは固定のようです。 ちなみに、この app_localizations.dart は git 等にコミットする必要はないです。arb ファイルを更新すればビルド時に毎回最新の状態を反映して自動生成されるので。

6. Material/Widget/CupertinoApp の設定

あとは、Material/Widget/CupertinoApp で、localizationsDelegates と supportedLocales パラメータを設定します。 自動生成されたクラスの import も忘れずに。

1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2 
3@override
4Widget build(BuildContext context) {
5  return MaterialApp(
6    localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
7    supportedLocales: AppLocalizations.supportedLocales, // Add this line
8    home: // ...
9  );
10}

7. 呼び出す

あとは、文言を呼び出します。下記のようにAppLocalizations.of(context).<resource id>という形式です。

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

日付などの l10n

日付などを locale に合わせて変えたいときは、下記のようにします。

1Locale locale = Localizations.localeOf(context);
2DateFormat.yMd(locale.toString()).format(DateTime.now());

参考文献

• Flutter.dev
• ARB Specification