【Flutter】アプリを多言語対応（ローカライズ）する方法

アプリを作っていると、「英語対応もしたほうがいいかな？」「海外のユーザーにも使ってもらいたい！」と思うことはありませんか？そんなときに必要になるのが「ローカライズ（多言語対応）」です。
本記事では、Flutterアプリをローカライズするための基本的な手順を紹介します！

Flutter のローカライズの基本
1. ローカライズとは？
2. Flutter のローカライズで使う主要な仕組み
ローカライズ方法
まとめ
参考
おすすめ書籍

Flutter のローカライズの基本

ローカライズとは？

ローカライズ（localization、略して l10n）は、アプリのテキストやフォーマットを ユーザーの言語や地域に合わせて変更する 仕組みです。
例えば、日本語のユーザーには「こんにちは」と表示し、英語のユーザーには「Hello」と表示するようにできます。

「l10n」は、localization を「l」+「ocalizatioの10文字」+「n」という意味で表した略語です。

Flutter のローカライズで使う主要な仕組み

Flutter では、ローカライズを簡単に行うために、以下の仕組みを活用します。

flutter_localizations パッケージ（Flutter標準のローカライズ機能）
Flutterには、標準で flutter_localizations というローカライズ機能が組み込まれています。
これを MaterialApp に設定することで、アプリ全体をローカライズできます。
intl パッケージ（翻訳データ管理）
intl パッケージは、アプリの翻訳データを管理するためのパッケージです。
このパッケージを使うことで、言語ごとにテキストを切り替えたり、日付や数値のフォーマットを適用したりできます。
.arb ファイル（翻訳データの管理ファイル）
ローカライズのための翻訳データは、.arb という JSON形式のファイルに保存します。
例えば、英語用の app_en.arb、日本語用の app_ja.arb というファイルを作り、それぞれの言語に対応するテキストを定義します。

ローカライズ方法

パッケージをインストール

以下のコマンドをターミナルで入力して、パッケージを追加します。

$ flutter pub add flutter_localizations --sdk=flutter
$ flutter pub add intl:any

また、生成フラグを有効にします。

pubspec.yaml で、以下のようにハイライト行が追加されていれば OK です！

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true # 生成フラグの有効化

設定ファイルを作成

プロジェクトのルートディレクトリに以下のように「l10n.yaml」ファイルを作成します。

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

このファイルでは、以下の設定を行っています。

arb-dir
.arb ファイルの配置場所を設定
template-arb-file
テンプレート（デフォルト）となる .arb ファイルを設定
output-localization-file
生成されるローカライゼーションファイル名を設定

.arb ファイルを作成

JSON形式の .arb ファイルを言語ごとに作成します。
以下は、英語と日本語のファイル例です。

{
    "yes": "Yes",
    "hello": "Hello, {name}",
    "@hello": {
        "placeholder": {
           "name": {}
       }
    }
}

{
    "yes": "はい",
    "hello": "ようこそ, {name}",
}

.arbファイルの書き方の詳細については、以下のページにまとめられていますので、ご確認ください。

【Flutter】多言語対応のための .arb ファイルの書き方 - Qiita

#はじめにFlutter のバージョン 1.22.0 から正式な多言語対応機能が導入されました。これの具体的なやり方については以下の記事が詳しいです。【Flutter】l10n ローカライゼー…

ローカライゼーションファイルを自動生成

ターミナルで「flutter pub get」コマンドを実行するか、アプリを実行すると、ローカライゼーションファイルが自動生成されます。

自動生成されたファイルは、.dart_tool/flutter_gen/gen_l10n/ 以下に現れます。

アプリのローカライゼーション対応

アプリをローカライゼーション対応させましょう。
以下2つを main.dart にインポートします。

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

MaterialApp に以下のように localizationsDelegates と supportedLocales を追記します。

return const MaterialApp(
  title: 'Sample App',
  localizationsDelegates: const [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en'), // 英語 
    Locale('ja'), // 日本語
  ],
  home: MyHomePage(),
);

ローカライゼーションを利用

アプリのローカライゼーション対応ができれば、いよいよ文言をローカライズすることができます。
ローカライゼーションは、AppLocalizations.of(context)!.〜という形で利用します。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text(AppLocalizations.of(context)!.hello("Hiyoko")),
    Text(AppLocalizations.of(context)!.yes),
  ],
),

上記実行結果が以下のようになります。端末の言語に応じて表示する文言が切り替わっています。