Flutterで多言語対応を実装する方法！i18nの基本と例を初心者向けに解説
生徒
「Flutterでアプリを多言語対応にしたいんですが、どうやってやればいいですか？」
先生
「Flutterでは、国際化対応（i18n）を簡単に実装できる仕組みがあります。公式のflutter_localizationsパッケージを使うのが一般的ですよ。」
生徒
「日本語と英語の切り替えとかもできますか？」
先生
「もちろん可能です！それではFlutterでの多言語対応のやり方を、基本から実装例まで詳しく見ていきましょう！」
1. Flutterのi18nとは？
Flutterにおけるi18n（Internationalization）とは、アプリを複数の言語に対応させる仕組みのことです。英語・日本語・中国語など、ユーザーの端末言語に応じて自動的に表示を切り替えることができます。
Flutter公式が提供するflutter_localizationsライブラリと、コード生成に便利なintlパッケージを使えば、iOS・Android両方に対応した多言語化が実現できます。
2. Flutterの多言語対応に必要な準備
まず、Flutterで多言語対応を行うための依存関係をpubspec.yamlに追加しましょう。
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.18.0
次に、サポートしたい言語を設定します。FlutterのMaterialAppウィジェットにローカライズ設定を追加しましょう。
import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'), // 英語
Locale('ja'), // 日本語
],
home: MyHomePage(),
);
この設定で、Flutterは英語と日本語の翻訳ファイルを使って、自動的に表示を切り替えるようになります。
3. 翻訳ファイル（.arbファイル）の作成と配置
Flutterでは、lib/l10nディレクトリに.arb形式の翻訳ファイルを用意します。たとえば、英語と日本語に対応するには次のようなファイルを作成します。
lib/l10n/intl_en.arb
{
"@@locale": "en",
"hello": "Hello!",
"welcome": "Welcome to Flutter!"
}
lib/l10n/intl_ja.arb
{
"@@locale": "ja",
"hello": "こんにちは！",
"welcome": "Flutterへようこそ！"
}
このように、各言語ごとに対応する翻訳をkey-value形式で記述します。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. Flutterでコード生成とローカライズ設定
l10n.yamlをプロジェクトルートに追加し、ローカライズ設定を行います。
arb-dir: lib/l10n
template-arb-file: intl_en.arb
output-localization-file: app_localizations.dart
その後、以下のコマンドで翻訳コードを生成します。
flutter gen-l10n
これでAppLocalizationsクラスが自動生成され、アプリ内で翻訳テキストを呼び出すことができます。
5. 翻訳テキストの使い方とUIへの反映
実際にFlutterのUIで翻訳文を表示するには、次のように記述します。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
Text(AppLocalizations.of(context)!.hello),
AppLocalizations.of(context)!.helloのように書くことで、ユーザーの設定言語に応じた翻訳テキストが自動で表示されます。
6. Flutterで言語を手動で切り替える方法
ユーザーに言語選択をさせたい場合は、Localeを明示的に設定します。
MaterialApp(
locale: Locale('ja'), // 日本語を強制的に表示
supportedLocales: const [
Locale('en'),
Locale('ja'),
],
...
);
設定画面でsetStateなどを使ってlocaleを動的に変更することも可能です。国際的なアプリでは言語切替ボタンを用意するのが一般的です。
7. Flutterでの多言語対応の注意点とベストプラクティス
- 翻訳キーはシンプルかつ意味のある名前にしましょう（例：
loginButton）。 flutter gen-l10nを実行した後は、必ずビルドが通るか確認しましょう。- 翻訳ファイルの文字エンコーディングはUTF-8を使うようにしましょう。
- 言語が増えるほど管理が複雑になるので、共通翻訳やコメントを活用しましょう。
Flutterの多言語対応（i18n）は、アプリの国際展開やユーザビリティ向上に欠かせない要素です。日本語だけでなく英語や他の言語への切り替えを実現することで、より多くのユーザーに使いやすいアプリになります。
この記事を読んだ人からの質問
