はじめに

アプリを作るときに日本限定にするともったいないですよね。アプリを世界市場に出すのも簡単なので、日本語だけでなく英語の対応もしたいって人は多いはず。今回は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
Code language: CSS (css)

pubspec.yaml

pubspec.yamlに以下を追記する

dependencies: flutter: sdk: flutter flutter_localizations: # 追加 sdk: flutter # 追加 ・・・ ・・・ flutter: generate: true # 追加 ・・・ ・・・ flutter_intl: # 追加 enabled: true # 追加
Code language: PHP (php)

Flutter IntlをVSCodeにインストール

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

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

>Flutter intl: initialize

を実行したのち、

>Flutter intl: Add Locale

で、ja_JPを入力する。

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

l10n

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

* l10n = localizationのことです

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

  • intl_en.arb(英語用のファイル)
  • intl_ja_JP.arb(日本語用のファイル)

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

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

# lib/l10n/intl_en.arb { "hello": "hello", } # lib/l10n/intl_ja_JP.arb { "hello": "こんにちは", }
Code language: PHP (php)

使い方

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

S.of(context).hello
Code language: CSS (css)

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

import 'package:neptune_client/generated/l10n.dart';
Code language: JavaScript (javascript)

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

By admin