Flutterでアプリを多言語対応させる:非エンジニアでも編集しやすいarbファイルを使う
以前は localizationRiverPod
で自作ローカライズをしていましたが、Flutter公式の方式に移行した際の手順をまとめました。
今回やりたいこと
- Flutterアプリを日本語などの多言語に対応させる
-
.arb
ファイルを使って、翻訳をわかりやすく管理(JSONライクな形式)⭐️誰でも編集しやすい - Flutterウィジェット(Material, Cupertino, Widgets)の標準翻訳も有効化
🧱 セットアップ手順
以下の通りに進める
1. パッケージの追加
flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl
2. MaterialAppにローカライズ設定を追加
return MaterialApp(
title: 'Localizations Sample App',
localizationsDelegates: [
// ⭐️自作ローカライズもここに追加予定
// 追記
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
Locale('ja'), // 対応する言語を追加
],
);
GlobalMaterialLocalizations.delegate
Material Design 系のウィジェット(例:AppBar
, DatePicker
, Dialog
など)に使われている文言を、自動的に翻訳してくれます。
GlobalWidgetsLocalizations.delegate
ウィジェットのテキストの方向(左→右 / 右→左)などの制御をしてくれる翻訳です。
GlobalCupertinoLocalizations.delegate
iOSスタイル(Cupertino系)のウィジェット(例:CupertinoAlertDialog
, CupertinoDatePicker
)に含まれる文言を翻訳してくれます。
3.
1で追加したintlライブラリによる自動生成を有効化する
pubspec.yaml
flutter:
generate: true
4.
ルートディレクトリにl10n.yamlを作成する
# arbファイル(翻訳ファイル)を置くディレクトリ
# デフォルトはlib/l10n
arb-dir: lib/l10n
# 基準となるarbファイル(自動生成するファイルの元になる言語ファイル)
# デフォルトはapp_en.arb
template-arb-file: app_ja.arb
# 自動生成されるDartファイルのファイル名
output-localization-file: app_localizations.dart
# 自動生成されたDartファイルの出力先ディレクトリ
output-dir: lib/localization/generated
# falseにすると 自動生成されたファイルが↑のディレクトリに出力される。
# 中身の確認がスムーズなのでfalseにしておく
synthetic-package: false
5. .arbファイルを作成
app_ja.arb
{
"animal": "動物",
"greet": "こんにちは{name}です",
"@greet": {
"description": "昼間の挨拶を表示します。{name}はユーザーの名前です。",
"placeholders": {
"name": {
"type": "String",
"example": "太郎"
}
}
}
}
⚠️ 末尾に,を書かないとエラーになるので注意
exampleやdescriptionを記入しておけば、このテキストがアプリのどの部分に表示されるかを知らなくてもニュアンスが伝わりやすい。
flutter gen-l10nでコードが自動生成される
flutter pub getでもOKだけど、ローカライズ周りだけを更新するgen-l10nの方が実行が早い
あとは、一行入力するたびにターミナルで実行でOK