【2022年12月版】Flutterの多言語対応のベストプラクティスとハマりどころ

            const Text(
-              'You have pushed the button this many times:',
+            Text(
+              AppLocalizations.of(context).message,
            ),

こちらで実行して頂くと、カウントアップアプリの外観は変わらない、、、ですが、メッセージは言語のクラスから取得するように変更されました。

日本語のファイルを作成する

引き続き、日本語の言語ファイルを作っていきましょう。app_en.arb と同じディレクトリに、app_ja.arb を作成して、以下を入力してください。

{
  "@@locale":"ja",
  "title":"Flutterのデモページ",
  "message": "あなたは以下の回数ボタンを押しました:"
}

そして、ターミナルで、以下のコマンドを実行します。

flutter gen-l10n --no-nullable-getter  

このような感じで、言語ファイルを量産していけば、多くの言語に対応できるようになります。

エミュレータの言語設定

自分のスマートフォンは自分の言葉になっていると思います。しかし、エミュレータを使用していると、デフォルトのままで使用しているので、上記の場合日本語が出てこないかも知れません。

Androidの言語変更

「設定」→、、、って、日本語だから、問題ないや。一度、英語に戻す、､､
「Setting > System > Languages&input > Languages」から「Add a language」をタップ。検索でjと入れたら、「日本語」が出てきたので、選択した。その後、1番上に「日本語(日本)」が来るように移動させた。
ここら辺は、OSや端末ごとに違うので、参考程度でお願いします。

iOSの言語変更

「Settings> Lnaguage & Region」から日本語を上にする

プログラム側で言語を指定する方法

MaterialApp.localeに表示したいLocaleを指定することで、プログラム側で言語を指定することが可能になります。また、この値を変更することで、アプリ内で言語を変更することが可能です。

    return MaterialApp(
      home:  MyHomePage(title: AppLocalizations.of(context).title),
      locale: Locale('ja')
    );

ハマった点

Android StudioでAppLocalizations関連に赤い下線がつく

AppLocalizationsの下に赤い線がでますが、実行はできます。Android Sutdioのバグかと思われます。現象は、flutter pub get 実行後に発生します。解決策は、Android Studioを再起動する。

Null check operator used on a null value の赤画面が発生した

以下のようにすると、発生します。

    return MaterialApp(
      home:  MyHomePage(title: AppLocalizations.of(context).title),
    );

調べたところ、どうやらMaterialApp直下に入れると、AppLocalizationsの初期化完了前に呼び出されるため、Nullでエラーが発生するようです。そのため、AppLocalizations.ofはScaffold内で使った方が安全です。

l10n.yaml があると文句を言われる

flutter gen-l10nを実行すると、以下のようなメッセージが出力された。色々と言語のクラスの作成方法があるようで、参考にしていたページが「アプリを実行すると、自動で言語のクラスが生成される」(私の環境を除く)方法だった。そのため、l10n.yamlがあった。それが残っていた。消したら、実行できるようになった。

Because l10n.yaml exists, the options defined there will be used instead.
To use the command line arguments, delete the l10n.yaml file in the Flutter project.

GoRouteを使っていた

画面遷移のプラグインで、GoRouteというのを使っている。そちらは、MaterialAppに言語設定を追加するのではなく、プラグインのメソッドで言語設定する必要があった。

    return MaterialApp(
      home: MaterialApp.router(
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        supportedLocales: AppLocalizations.supportedLocales,
      ),

以上のように(言語設定以外は削除してます)、しなければならないことに気づかなかった。何かプラグインをかましていたら、気をつける必要があります。
これを機会に、Navigator2.0に入れ替えるかなぁ、､､

Builderを使っていた

いつ入れたのかは定かではないし、入れた覚えもないのだが、以下のようにBuilderが入っていて、そのためかnullチェックが発動して(Null check operator used on a null value)、赤い画面が出力された。

      home: Scaffold(
        body: Builder(
          builder: (context) {
            return Center(

Builderを消したら、普通に動いた。

「Error: Couldn’t resolve the package ‘flutter_localizations’ 」のエラー

以下を追記するのを忘れていた。

flutter_localizations: 
sdk: flutter

エラーメッセージ

Error: Couldn't resolve the package 'flutter_localizations' in 'package:flutter_localizations/flutter_localizations.dart'.
.dart_tool/flutter_gen/gen_l10n/app_localizations.dart:5:8: Error: Not found: 'package:flutter_localizations/flutter_localizations.dart'
import 'package:flutter_localizations/flutter_localizations.dart';

何回もやっているので、舐めてかかって、痛い目を見てます、、、

ソース

ソースは、以下に置いておきます。
https://github.com/fluttersalon/l10n

ブランチ:

• master 最終版
• 1_change_pubspecyaml: pubspec.yamlを修正
• 2_changeCode: 実際にコードを言語のクラスから取得するように変更
• 3_addJapanese: 日本語の言語ファイルを追加

参考

• Internationalizing Flutter apps
  Flutterの公式。
• Flutterの多言語対応は意外に簡単だった
  簡単じゃなかったっす。公式を挫折して読みました。どのような仕組みなのかが理解できました。
• Why is Flutter not generating the internationalization files?
  flutter gen-l10n を知る
• 【Flutter】Localization(L10n)対応
  色々細かい設定が載っていて参考になる。iOSはInfo.plistの修正が必要とあるが(他のサイトで書いてある)、私はシミュレータでも、実機でも修正せずに変更できた。なぜだろう。

豆知識

言語をプログラム側で設定する

MaterialApp.localeに設定する。

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: Locale('en'),
    );
  }

プログラム側で言語設定を取得する

Localizations.localeOf(context).languageCode 
 //=>'ja'

まとめ

ということで、Flutterの言語化対応を説明しました。皆様のFlutter開発に役に立てば幸いです。

宣伝

この記事を作成していたり、言語ファイルを機械的に大量生成する方法を教えてもらったりした末に、多言語対応に興味が湧いて、色々と調べました。その情報をまとめて、Udemyで講座にしました。アプリを75言語に対応させる方法、アプリ内で動的に言語設定を切り替える方法などをまとめています。
ご興味があれば、見てみてください！

[Flutter]最短で75言語に対応させ、あなたのアプリを世界の人が届ける方法