【Flutter】アプリを多言語対応にする手順

こんにちは!本記事では、端末の言語設定によってアプリの言語も変わる機能を実装する手順を説明します。ざっくりまとめると、多言語ライブラリ(flutter_localizations)を導入対応したい言語分の言語対応ファイル作成文字を変数で指定、していきます。読み進めた通りに操作すれば多言語対応できますし、生じたエラーも下に記載しておきます。

目次

開発環境

macOS Monterey

MacBook Air (M1, 2020)

①多言語パッケージのインストール

flutter_localizationsは、flutter pub add fluuter_localizationsでは機能しません。下記のようなエラーが出てきてしまいます。
Because (プロジェクト名) depends on flutter_localizations any which doesn’t exist (could not find package flutter_localizations at https://pub.dartlang.org), version solving failed.
以下に従って、pubspec.yamlを編集してください。

下記のように、pubspec.yamlのdependencies:の箇所に記載してください

dependencies:
...
  flutter_localizations: //ここの二行を追加する
    sdk: flutter

また、pubspec.yamlを下にスクロールすると、flutter:と書いてある箇所があるので、そこに下記一行を追記します。周囲にデフォルトで書いてあるコードも記載しておきます。

# The following section is specific to Flutter.
flutter:
  generate: true //これを追記

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

その後、flutter pub add intlflutter pub get でパッケージをインストールしましょう。

パッケージのインストール方法について詳しくはこちら↓

あわせて読みたい
【Flutter】パッケージをインストール/アンインストールする方法について~コマンドと一緒に紹介 パッケージとは、Widgetをまとめたものです。目的に沿ったパッケージを導入することで完成されたWidgetを使って簡単に開発ができるため、手間が大幅に短縮されます。 本...

②多言語対応ファイルの設定

英語単語と日本語単語の一覧ファイルを作成していきます。

l10n.yamlファイルの作成

まず、プロジェクト直下にl10n.yamlを作成し、下記のように記載してください。

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

上記は、どこに翻訳ファイル(app_en.arb)があるか、生成されたdartファイル名(app_localization.dart)を記載しています。

次に、l10nフォルダを指定した場所に作成します。

作成後のフォルダ・ファイルは下図のような階層にあるはずです。

言語ファイルの作成

先ほど作成したl10nのフォルダ内に、言語ファイルを作成していきます。日本語のファイルはapp_en.arb、英語のファイルはapp_ja.arbです。

それぞれの書き方は以下の通りです。日本語の場合は、”en”の場所を”ja”に、各行の右側の””内を日本語に書き換えます。左がわの文字は必ず日本語ファイル英語ファイル共に同じものが必要です。ない場合は片方のものを両方に適用します。

{
"@@locale": "en",
"test": "Test",
"hello": "Heeey"
}
{
"@@locale": "ja",
"test": "テスト",
"hello": "こんちゃ"
}

*左の””内は、空白をつけてはいけません。また、小文字から始める必要があります。
* “}”の前には”, “を入れません。

arbファイルの使い方はこちらを参考にしてください。

Localizely - Localization Platfo...
Flutter ARB file (.arb) - Localizely Flutter ARB file (.arb)

③ファイル作成

次に、flutter pub getをします。

main.dartで、import 'package:flutter_gen/gen_l10n/app_localizations.dart';が使えるか確認してください。

普通のパッケージでは、左側に出てくる赤い電球マークから該当パッケージをインストールできるのですが、なぜかこれは手動で打ち込まないといけないです。

import文が反応しない場合は、Android studioを再起動すると治る場合があります。
私の場合はflutter pub getをする度にエラーが出る(ビルドはできる)ので、その度に再起動してました。ただ、一回pub getをしてしまえば、arbファイルを書き換えると自動的に反映されるようになります。

④アプリファイル内で多言語対応の設定

MaterialApp内で、下記のように記載します。(flutter_localizations.dartをimportしてください)

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

⑤使ってみる。

使う際には、Widget build(Buildcontext context){}内で、下記のように宣言して使います。

AppLocalizations.of(context)!.test //英語設定なら"Test"、日本語設定なら"テスト"が表示される

testの部分は、app_en.arbファイルとapp_jp.arbファイルで設定した単語を選べます。

発生したエラー一覧

Null check

下記のように表示される場合は、MaterialAppを2回宣言していないか、④で説明したdelegate文を全て含めているか、を確認してください。

Flutter returns null for AppLocalization.of(context)

関連記事

本HPでは、flutterの記事を準備編、開発編、申請編に分けて解説しています。

あわせて読みたい
【Flutter】記事まとめ こんにちは!本記事ではFlutterに関する記事を体形立ててまとめています。目次としてお使いください。 【全体図】 全ての記事を図でまとめています。(2022年2月22日現在...

flutterの開発に関する記事まとめはこちら

参考記事

Qiita
Flutterの多言語対応は意外に簡単だった - Qiita Flutterの記事を整理し本にしました 本稿の記事を含む様々な記事を体系的に整理し本にまとめました 今後はこちらを最新化するため、最新情報はこちらをご確認く...
Qiita
FlutterでLocalizationする - Qiita 公式のInternationalizing Flutter appsの通りにやると多言語対応できます。 また、ほぼ同じ内容でよりわかりやすい記事がありましたのでこちらを読むのが早いかなと思い...
よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる