flutter_localizations&intlパッケージでFlutterを多言語対応させるための手順を解説

2022 6/07

2021.10.18 2022.06.07

こんにちは、株式会社Pentagonでエンジニアをしているtsurumiです。
今回の記事は、Flutterの多言語対応についてです。
日本人のユーザーだけでなく、さまざまな国の方々に使っていただくアプリには必須の項目だと思います。
今回は、Flutterで多言語対応を導入するための手順を解説します。

【こんな人に読んで欲しい】

Flutterで開発したアプリを世界の人へ使ってもらいたいと思ってる人。
GAFA級のアプリを作るぞ！！と熱量高めの人。

【この記事を読むメリット】

Flutterの多言語対応の導入方法がわかります。
サンプルコードも載せてありますので、Flutter初心者の方でもすぐに試せます。

「Flutterの多言語対応ってめんどくさそう」と感じる方もいそうですが、意外と簡単に出来ます！翻訳作業についてはDeepLにコピペして効率化しましょう。

作業環境

Flutter : 2.5.2

パッケージを追加する

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^-.17.0
.
.
.
flutter:
  generate: true

flutter_localizations: このパッケージを追加することにより、78の国の言語に対応できるようになります。

intl: このパッケージを使うと以下の機能を提供してくれます

メッセージの翻訳
複数形と性別
日付/数字のフォーマットと解析
双方向テキスト
国際化とローカライゼーション

l10n.yamlの追加

プロジェクトのルートの l10n.yamlという設定ファイルを作成して以下を記述して下さい下さい。

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

arb-dir: この記述部分は言語を置いておくファイルの場所を設定しています。現在の設定だと flutter_project/lib/l10n/配下に置いておくよという設定です。
template-arb-file: ベースとなる言語ファイル名を設定します。
output-localization-file: app_en.dartに設定したファイルから生成した言語をまとめてくれるファイル名を設定しています。このファイルは.dart_tool内に生成されます。

言語ファイルの追加

上の設定で lib/l10n配下にapp_en.dartで言語ファイルを作る設定をしたので、作成してみましょう。
今回は英語と日本語を設定します。

lib/l10n/app_en.dart

{
 "@@locale": "en",
 "@@last_modified": "2020-10-02T17:55:19.703396",
 "title": "localization sample App",
 "@title": {
   "type": "text",
   "placeholders": {}
 }
}

lib/10n/app_ja.dart

{
 "@@locale": "ja",
 "@@last_modified": "2020-10-02T17:55:19.703396",
 "title": "言語対応 App",
 "@title": {
   "type": "text",
   "placeholders": {}
 }
}

MaterialApp内のlocalizationsDelegatesとsupportedLocalesを設定する

MaterialApp内には言語を設定する機能があるので、追加していきましょう。

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

class main extends StatelesWidget {
  @override
  widget build(BuildContext context) {
    return MaterialApp(
      title: ‘多言語 sample app’
      localizationzDelegates: [
        GlobalCupertinoLocalizations.delegate,
       GlobalMaterialLocalizations.delegate,
       ...AppLocalizations.localizationsDelegates,
      ],
      supportedLocales: AppLocalizations.supportedLocales,
    );
  }
}

これで導入は完了です！

使用方法

多言語対応の導入・設定が終わったら実際に使用してみましょう！

Text(AppLocalizations.of(context)!.title)

これだけです！
また、「AppLocalizations.of(context)を何度も記述するのが嫌だなー」と思う方は、BuildContextのextensionを作成すると便利です。

extension ContextExtension on BUildcontext {
  AppLocalizations get l10n => AppLocalizations.of(this)!;
}

これを作成しておくと、

Text(context.l10n.title)

これで呼び出せます！
私はこれを普段使ってます。

まとめ

多言語対応と聞くと、設定方法が面倒なイメージがあるかもしれませんが、これだけで設定できます。
ただ、翻訳作業などは少し面倒なので、DeppLをうまく使いましょう！

最後に注意事項です！！
Flutterの画像ファイルなどの定義を自動生成してくれるflutter_genというパッケージとは名前が被ってしまうので、同時には使えません.....
ここだけ、ご注意下さい！