Flutter i18n
Flutter i18n：1つのコードベースで、あらゆる言語、あらゆるプラットフォームに対応
Flutter は、ARB（Application Resource Bundle）ファイルとintlパッケージを使用して、単一のコードベースからiOS、Android、ウェブ、デスクトップのローカライゼーションを実現します。gen-l10nツールはARBテンプレートから型安全なDartコードを生成し、すべての翻訳キーに対してコンパイル時の安全性とIDEのオートコンプリートを提供します。
Get started in 4 steps
1
Enable generation
Add the generate flag to your pubspec.yaml to enable localization code generation.
pubspec.yaml
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: true2
Configure l10n.yaml
Create l10n.yaml in your project root to configure the localization generator.
l10n.yaml
# l10n.yaml arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart
3
Create ARB template
Add your source language ARB file with translation keys and metadata.
lib/l10n/app_en.arb
{
"@@locale": "en",
"welcome": "Welcome to {appName}",
"@welcome": {
"placeholders": {
"appName": { "type": "String" }
}
},
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": { "type": "int" }
}
}
}4
Use in your app
Wrap your app with localization delegates and use AppLocalizations.of(context) in widgets.
lib/main.dart
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,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Text(l10n.welcome('Flutter'));
}
}Flutter ローカライゼーションの機能
メタデータサポートを備えたICU MessageFormat構文のARBファイル形式
型安全な翻訳のためのgen-l10nによる自動Dartコード生成
コンパイル時バリデーション付きのICU複数形とselectルール
iOS、Android、ウェブ、デスクトップ向けの単一コードベースローカライゼーション
開発中に翻訳を即時プレビューできるホットリロードのサポート
日付、テキスト方向、アクセシビリティに対応したMaterialおよびCupertinoウィジェットのローカライゼーション
自動テキストおよびウィジェット整列による右から左（RTL）レイアウトのサポート
intlパッケージによるロケール対応の日付、数値、通貨フォーマット
AppLocalizations.of(context) を使ったBuildContextベースのロケールアクセス
Flutter ローカライゼーションの実践
AppLocalizations.of(context) を使用してウィジェット内で生成された翻訳メソッドにアクセスできます。複数形や日付フォーマットも完全にサポートしています。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class ProductPage extends StatelessWidget {
final int itemCount;
const ProductPage({required this.itemCount});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
children: [
Text(l10n.welcome('My Store')),
Text(l10n.itemCount(itemCount)),
// Date formatting respects locale
Text(DateFormat.yMMMd(
Localizations.localeOf(context).toString()
).format(DateTime.now())),
],
);
}
}