flutter-internationalization by madteacher/mad-agents-skills
npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-internationalization为 Flutter 应用程序添加国际化 (i18n) 的全面指南。涵盖设置、配置、消息管理、数字/日期格式化以及高级主题,如区域设置覆盖和自定义语言支持。
根据应用需求选择方法:
gen-l10n (推荐) - 现代、自动化、代码生成
intl 包 - 手动控制,基于代码
Intl.message() 代码,手动翻译文件手动/自定义 - 最大灵活性
更新 pubspec.yaml:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
运行:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:any
添加到 pubspec.yaml:
flutter:
generate: true
在项目根目录创建 l10n.yaml:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
有关高级选项,请参阅 l10n-config.md。
创建目录 lib/l10n/。
模板文件 lib/l10n/app_en.arb:
{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "Greeting message"
}
}
翻译文件 lib/l10n/app_es.arb:
{
"helloWorld": "¡Hola Mundo!"
}
关于完整的 ARB 格式,请参阅 arb-format.md。
运行:
flutter gen-l10n
或者运行应用以触发自动生成:
flutter run
导入并设置:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';
MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
Locale('en'),
Locale('es'),
],
home: MyHomePage(),
)
在组件中访问:
Text(AppLocalizations.of(context)!.helloWorld)
无参数:
{
"welcome": "Welcome to our app",
"@welcome": {
"description": "Welcome message"
}
}
带参数:
{
"greeting": "Hello {userName}!",
"@greeting": {
"description": "Personalized greeting",
"placeholders": {
"userName": {
"type": "String",
"example": "Alice"
}
}
}
}
在代码中使用:
Text(AppLocalizations.of(context)!.greeting('Alice'))
基于数量:
{
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": {
"type": "int"
}
}
}
}
在代码中使用:
Text(AppLocalizations.of(context)!.itemCount(5))
基于字符串值:
{
"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"placeholders": {
"gender": {
"type": "String"
}
}
}
}
在代码中使用:
Text(AppLocalizations.of(context)!.pronoun('male'))
自动格式化数字:
{
"price": "Price: {value}",
"@price": {
"placeholders": {
"value": {
"type": "int",
"format": "simpleCurrency"
}
}
}
}
格式选项:compact、currency、simpleCurrency、decimalPattern 等。
自动格式化日期:
{
"eventDate": "Event on {date}",
"@eventDate": {
"placeholders": {
"date": {
"type": "DateTime",
"format": "yMMMd"
}
}
}
}
格式选项:yMd、yMMMd、yMMMMd、Hm 等。
关于完整的格式化选项,请参阅 number-date-formats.md。
为特定组件覆盖区域设置:
Localizations.override(
context: context,
locale: const Locale('es'),
child: CalendarDatePicker(...),
)
对于复杂的区域设置(中文、法语区域):
supportedLocales: [
Locale.fromSubtags(languageCode: 'zh'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
]
控制区域设置回退:
MaterialApp(
localeResolutionCallback: (locale, supportedLocales) {
// 始终接受用户的区域设置
return locale;
},
)
获取当前应用区域设置:
Locale myLocale = Localizations.localeOf(context);
class DemoLocalizations {
DemoLocalizations(this.localeName);
static Future<DemoLocalizations> load(Locale locale) {
final String name = Intl.canonicalizedLocale(locale.toString());
return initializeMessages(name).then((_) => DemoLocalizations(name));
}
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
String get title {
return Intl.message(
'Hello World',
name: 'title',
desc: 'Title',
locale: localeName,
);
}
}
3. 创建委托:
class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
const DemoLocalizationsDelegate();
@override
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
@override
Future<DemoLocalizations> load(Locale locale) => DemoLocalizations.load(locale);
@override
bool shouldReload(DemoLocalizationsDelegate old) => false;
}
4. 生成 ARB 文件:
dart run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
dart run intl_translation:generate_from_arb --output-dir=lib/l10n lib/main.dart lib/l10n/intl_*.arb
为了最大程度的简单性:
class DemoLocalizations {
DemoLocalizations(this.locale);
final Locale locale;
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
static const _localizedValues = <String, Map<String, String>>{
'en': {'title': 'Hello World'},
'es': {'title': 'Hola Mundo'},
};
String get title {
return _localizedValues[locale.languageCode]!['title']!;
}
}
l10n-config.md - l10n.yaml 配置选项的完整参考,包括输出目录、代码生成设置和区域设置处理。
arb-format.md - ARB 文件格式的综合指南,涵盖简单消息、占位符、复数、选择和元数据。
number-date-formats.md - 数字和日期格式化参考,包含格式类型、模式和特定区域设置的示例。
可以在此处添加常见国际化模式的示例模板和样板代码。
在以下情况下使用此技能:
每周安装次数
292
代码仓库
GitHub 星标数
87
首次出现
2026年1月22日
安全审计
安装于
opencode228
codex222
gemini-cli221
github-copilot207
kimi-cli190
amp189
Comprehensive guide for adding internationalization (i18n) to Flutter applications. Covers setup, configuration, message management, number/date formatting, and advanced topics like locale override and custom language support.
Choose approach based on app needs:
gen-l10n (Recommended) - Modern, automated, code generation
intl package - Manual control, code-based
Intl.message() code, manual translation filesManual/Custom - Maximum flexibility
Update pubspec.yaml:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
Run:
flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:any
Add to pubspec.yaml:
flutter:
generate: true
Create l10n.yaml in project root:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
For advanced options, see l10n-config.md.
Create directory lib/l10n/.
Template file lib/l10n/app_en.arb:
{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "Greeting message"
}
}
Translation file lib/l10n/app_es.arb:
{
"helloWorld": "¡Hola Mundo!"
}
For complete ARB format, see arb-format.md.
Run:
flutter gen-l10n
Or run app to trigger auto-generation:
flutter run
Import and setup:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';
MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
Locale('en'),
Locale('es'),
],
home: MyHomePage(),
)
Access in widgets:
Text(AppLocalizations.of(context)!.helloWorld)
No parameters:
{
"welcome": "Welcome to our app",
"@welcome": {
"description": "Welcome message"
}
}
With parameters:
{
"greeting": "Hello {userName}!",
"@greeting": {
"description": "Personalized greeting",
"placeholders": {
"userName": {
"type": "String",
"example": "Alice"
}
}
}
}
Use in code:
Text(AppLocalizations.of(context)!.greeting('Alice'))
Based on count:
{
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": {
"type": "int"
}
}
}
}
Use in code:
Text(AppLocalizations.of(context)!.itemCount(5))
Based on string value:
{
"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"placeholders": {
"gender": {
"type": "String"
}
}
}
}
Use in code:
Text(AppLocalizations.of(context)!.pronoun('male'))
Format numbers automatically:
{
"price": "Price: {value}",
"@price": {
"placeholders": {
"value": {
"type": "int",
"format": "simpleCurrency"
}
}
}
}
Format options: compact, currency, simpleCurrency, decimalPattern, etc.
Format dates automatically:
{
"eventDate": "Event on {date}",
"@eventDate": {
"placeholders": {
"date": {
"type": "DateTime",
"format": "yMMMd"
}
}
}
}
Format options: yMd, yMMMd, yMMMMd, Hm, etc.
For complete formatting options, see number-date-formats.md.
Override locale for specific widgets:
Localizations.override(
context: context,
locale: const Locale('es'),
child: CalendarDatePicker(...),
)
For complex locales (Chinese, French regions):
supportedLocales: [
Locale.fromSubtags(languageCode: 'zh'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
]
Control locale fallback:
MaterialApp(
localeResolutionCallback: (locale, supportedLocales) {
// Always accept user's locale
return locale;
},
)
Get current app locale:
Locale myLocale = Localizations.localeOf(context);
class DemoLocalizations {
DemoLocalizations(this.localeName);
static Future<DemoLocalizations> load(Locale locale) {
final String name = Intl.canonicalizedLocale(locale.toString());
return initializeMessages(name).then((_) => DemoLocalizations(name));
}
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
String get title {
return Intl.message(
'Hello World',
name: 'title',
desc: 'Title',
locale: localeName,
);
}
}
3. Create delegate:
class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
const DemoLocalizationsDelegate();
@override
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
@override
Future<DemoLocalizations> load(Locale locale) => DemoLocalizations.load(locale);
@override
bool shouldReload(DemoLocalizationsDelegate old) => false;
}
4. Generate ARB files:
dart run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
dart run intl_translation:generate_from_arb --output-dir=lib/l10n lib/main.dart lib/l10n/intl_*.arb
For maximum simplicity:
class DemoLocalizations {
DemoLocalizations(this.locale);
final Locale locale;
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
static const _localizedValues = <String, Map<String, String>>{
'en': {'title': 'Hello World'},
'es': {'title': 'Hola Mundo'},
};
String get title {
return _localizedValues[locale.languageCode]!['title']!;
}
}
l10n-config.md - Complete reference for l10n.yaml configuration options, including output directories, code generation settings, and locale handling.
arb-format.md - Comprehensive guide to ARB file format, covering simple messages, placeholders, plurals, selects, and metadata.
number-date-formats.md - Number and date formatting reference with format types, patterns, and locale-specific examples.
Example templates and boilerplate code can be added here for common internationalization patterns.
Use this skill when:
Weekly Installs
292
Repository
GitHub Stars
87
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode228
codex222
gemini-cli221
github-copilot207
kimi-cli190
amp189
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装