Flutter i18n
Flutter 国际化:单一代码库,支持所有语言和所有平台
Flutter 使用 ARB(应用资源包)文件和 intl 包,从单一代码库处理 iOS、Android、Web 和桌面端的本地化。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 本地化功能
ARB 文件格式,支持 ICU MessageFormat 语法和元数据
通过 gen-l10n 自动生成 Dart 代码,实现类型安全的翻译
ICU 的复数形式生成与选择规则(支持编译时验证)
针对 iOS、Android、网页和桌面端的单一代码库本地化
支持热重载,在开发过程中即时预览翻译效果
Material 和 Cupertino Widget 的本地化支持,涵盖日期、文字方向和无障碍功能
支持从右到左(RTL)布局,并具备文本和小部件自动对齐功能
通过 intl 包实现感知语言环境的日期、数字和货币格式化
基于 BuildContext 的语言环境访问,使用 AppLocalizations.of(context)
Flutter 本地化实践
在 Widget 中使用 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())),
],
);
}
}