多言語対応・文字列リソースの定義と利用方法
①Flutterアプリ内では、文字列リソースは直打ちせず共通のファイルに定義した上で利用する
②多言語対応も可能になる
1. 多言語用のライブラリのインストール
// pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations: # 多言語ライブラリの本体
sdk: flutter
intl: "^0.17.0" # 多言語やフォーマッタなどの関連ライブラリ
flutter:
generate: true #自動生成フラグの有効化
flutter pub getを実行
2. 多言語対応設定ファイルの作成
// {プロジェクトのルート}/l10n.yaml
arb-dir: lib/views/l10n
template-arb-file: app_ja.arb
output-localization-file: app_localizations.dart
3. 言語ファイル作成
// lib/views/l10n/app_ja.arb
{
"@@locale": "ja",
"home": "ホーム",
"homeDetail": "ホーム詳細"
}
多言語対応をする場合は、言語ごとのファイルを作成する
英語の場合:app_en.arb
4. 自動ファイル生成
flutter pub getを実行
.dart_tool/flutter_gen/gen_l10n配下に下記ファイルが自動生成される
・app_localizations.dart
・app_localizations_ja.dart
5. アプリでの設定
+ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
+ localizationsDelegates: AppLocalizations.localizationsDelegates,
+ supportedLocales: AppLocalizations.supportedLocales,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
6. アプリでの利用
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: MyAppBar(
// lib/views/l10n/app_ja.arbにて定義した文字列リソースの利用
title: AppLocalizations.of(context)!.home,
),
body: const _Body(),
);
}
}
文字列リソースを利用する際はファイル先頭にimportを忘れずに!
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
7. 参考記事
この記事が気に入ったらサポートをしてみませんか?