はじめに

アプリを作るときに日本限定にするともったいないですよね。アプリを世界市場に出すのも簡単なので、日本語だけでなく英語の対応もしたいって人は多いはず。今回はFlutterでの多言語対応について書いていきたいと思います。

環境

  • M1, MacOS BigSur 11.4
  • Flutter 2.5.1
  • Dart 2.14.2

前提

  • Flutterのプロジェクトが既にある
  • VSCodeで作業を行う

対応

intlのインストール

以下のコマンドを実行してintlをインストールします。

flutter pub add intl

pubspec.yamlに以下が追加されていればOKです。バージョンはその時々で違う可能性があります。

  intl: ^0.17.0

pubspec.yaml

pubspec.yamlに以下を追記する

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 追加
    sdk: flutter # 追加

・・・
・・・

flutter:

  generate: true # 追加

・・・
・・・

flutter_intl: # 追加
  enabled: true # 追加

Flutter IntlをVSCodeにインストール

Flutter Intlというプラグインをインストールします。これでVS CodeのコマンドパレットでLocale関連のコマンドを打つことができます。

VSCodeのコマンドパレットでコマンド実行

>Flutter intl: initialize

を実行したのち、

>Flutter intl: Add Locale

で、ja_JPを入力する。

これで日本語と英語の多言語対応ができるようになります。

l10n

ここまでで、lib配下にl10nというディレクトリができているはずです。

* l10n = localizationのことです

l10nディレクトリ配下に以下の２つのファイルができているはずです。

  • intl_en.arb（英語用のファイル）
  • intl_ja_JP.arb（日本語用のファイル）

ここにJSON形式で文言を書いていきます。文言を追加すると自動で翻訳ファイルが作成され、それらがUI上で使えるようになります。

それぞれのJSONファイルには以下のように追記していきます。ちゃんと全てのファイルに同じキーがないと動かないので注意です。


# lib/l10n/intl_en.arb
{
  "hello": "hello",
}

# lib/l10n/intl_ja_JP.arb
{
  "hello": "こんにちは",
}

使い方

UIからは以下のように使います。

S.of(context).hello

Sを使うには以下のファイルをインポートしてください。

import 'package:neptune_client/generated/l10n.dart';

これでFlutterでの多言語化を行うことができます。