多言語対応・文字列リソースの定義と利用方法
①Flutterアプリ内では、文字列リソースは直打ちせず共通のファイルに定義した上で利用する
②多言語対応も可能になる
1. 多言語用のライブラリのインストール
// pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations: # 多言語ライブラリの本体
sdk: flutter
intl: "^0.17.0" # 多言語やフォーマッタなどの関連ライブラリ
flutter:
generate: true #自動生成フラグの有効化
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": "ホーム詳細"
}
4. 自動ファイル生成
flutter pub getを実行
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(),
);
}
}
7. 参考記事
この記事が気に入ったらサポートをしてみませんか?