Flutterのローカライズに関する記事の第2弾です。前回の紹介記事では、ローカライズの内容が1ファイルにまとまっているため、少し規模が大きくなると、管理が煩雑になり、使い勝手が悪くなります。そのため、今回は言語ごとにファイルを分けて、管理しやすくなる方法を紹介します。
前回紹介したローカライズ方法の記事はこちらです。必要に応じてご覧ください。
pubspec.yamlファイルの設定
まず、pubspec.yamlファイルを開き、以下の依存関係を追加します。
dependencies:
flutter_localizations:
sdk: flutter
intl: '^0.17.0'
flutter:
generate: true #自動生成フラグの有効化設定ファイルの作成
ローカライゼーションの設定ファイルを作成します。プロジェクトルートの直下に、下記の内容で「l10n.yaml」ファイルを作成します。
arb-dir: lib/l10n
template-arb-file: app_ja.arb
output-localization-file: app_localizations.dartarbファイルの作成
lib/l10nフォルダの直下にローカライズしたい言語ファイルを作成します。
今回は前回の記事同様、日本語・英語の２言語対応するため、日本語用(app_ja.arb)・英語用(app_en.arb)のそれぞれファイルを作成します。
{
"@@locale":"ja",
"title": "こんにちは、世界",
"message": "私のアプリへようこそ！"
}{
"@@locale":"en",
"title": "Hello World",
"message": "Welcome to my app!"
}app_localizations.dart の作成
以下のコマンドを実行することにより、app_localizations.dart を作成することができます。
flutter pub getまた、VSCodeを利用している場合、「pubspec.yaml」を保存することでも、上記コマンドが自動実行されます。
コマンドが正常終了すると「.dart_tool/flutter_gen/gen_l10n/」に以下のファイルが自動的に生成されます。
- app_localizations.dart : 下記を利用するための管理ファイル
- app_localizations_en.dart : 英語用ファイル
- app_localizations_ja.dart : 日本語用ファイル
app_localizations.dartを読み込む
自動生成した app_localizations.dart を利用して、選択中の言語に合わせた画面表示されるようにソースコードを変更します。以下、前回の記事で利用したサンプルコードを今回用にカスタマイズします。(結果として表示される内容は前回の記事と同じものが表示されます。)
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('ja', ''),
],
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context)!.title),
),
body: Center(
child: Text(AppLocalizations.of(context)!.message),
),
);
}
}上記ソースコードを実行した結果、iOSシミュレータ・Androidエミュレータではそれぞれ以下のように表示されます。
MaterialAppのtitleプロパティのローカライズ
MaterialApp の title プロパティをローカライズするためには、AppLocalizations を使用する前に MaterialApp の初期化が完了する必要があります。そのため、MaterialApp の初期化を遅延させる方法があります。
ここまでのサンプルコードに以下を加えることで、MaterialApp の初期化を遅延させることができます。
- services.dartのimportを行い、main関数を非同期化します
import 'package:flutter/services.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(MyApp());
}- MaterialAppのtitleプロパティの代わりにonGenerateTitleを利用する
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateTitle: (BuildContext context) => AppLocalizations.of(context)!.title,
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('ja', ''),
],
home: MyHomePage(),
);
}
}これにより、MaterialApp の初期化が遅延され、AppLocalizations を使用して title プロパティをローカライズすることができます。onGenerateTitle プロパティを使用して、AppLocalizations の title を生成するための関数を指定します。
以上のように、Flutterでは言語ごとに別ファイルで表示文言を管理することが可能です。アプリの多言語化には、多少手間がかかる部分もありますが、Flutterのローカライズ機能をうまく使えば、スムーズに多言語化することができます。