flutter-localizing-apps by flutter/skills
npx skills add https://github.com/flutter/skills --skill flutter-localizing-apps配置项目以支持本地化的代码生成。
pubspec.yaml 中:dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: true # l10n 代码生成所必需
2. 在项目根目录创建 l10n.yaml 文件以配置 gen-l10n 工具:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
# 可选:设置为 false 可将生成的文件放入 lib/ 目录,而非合成包中
# synthetic-package: false
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
将本地化字符串存储在配置的 arb-dir 目录下的应用程序资源包(.arb)文件中。
创建模板文件(例如 lib/l10n/app_en.arb):
{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "The conventional newborn programmer greeting"
}
}
创建翻译文件(例如 lib/l10n/app_es.arb):
{
"helloWorld": "¡Hola Mundo!"
}
通过配置根 MaterialApp 或 CupertinoApp 来初始化 Localizations 组件。
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // 如果 synthetic-package 为 false,请调整导入路径
return MaterialApp(
title: 'Localized App',
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'), // 英语
Locale('es'), // 西班牙语
],
home: const MyHomePage(),
);
在组件树中使用生成的 AppLocalizations 类访问本地化值:
Text(AppLocalizations.of(context)!.helloWorld)
注意:如果使用 WidgetsApp 而非 MaterialApp,请省略 GlobalMaterialLocalizations.delegate。
使用占位符、复数和选择器来处理动态内容。在 @key 元数据中定义参数。
"hello": "Hello {userName}",
"@hello": {
"description": "A message with a single parameter",
"placeholders": {
"userName": {
"type": "String",
"example": "Bob"
}
}
}
"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
"@nWombats": {
"placeholders": {
"count": {
"type": "num",
"format": "compact"
}
}
}
"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"placeholders": {
"gender": {
"type": "String"
}
}
}
使用 format 和 optionalParameters 来利用 intl 格式化功能。
"dateMessage": "Date: {date}",
"@dateMessage": {
"placeholders": {
"date": {
"type": "DateTime",
"format": "yMd"
}
}
}
复制此清单,以便在引入新区域设置时跟踪进度。
arb-dir 目录中创建新的 .arb 文件(例如 app_fr.arb)。.arb 文件中存在的所有键。Locale 添加到 MaterialApp 中的 supportedLocales 列表。flutter gen-l10n 以验证 ARB 语法并重新生成 AppLocalizations。Flutter 处理运行时本地化,但 iOS 需要为 App Store 和系统设置进行应用包级别的配置。
ios/Runner.xcodeproj。Runner 项目。Info 选项卡。+ 按钮。project.pbxproj 已正确更新。TextField 和 CupertinoTabBar 等组件需要具有特定委托(MaterialLocalizations 或 CupertinoLocalizations)的 Localizations 祖先。
错误: No MaterialLocalizations found. 或 CupertinoTabBar requires a Localizations parent...
修复: 确保该组件是 MaterialApp/CupertinoApp 的后代。如果构建独立的组件树(例如在测试或自定义的 WidgetsApp 中),请将该组件包装在 Localizations 组件中:
Localizations(
locale: const Locale('en', 'US'),
delegates: const [
DefaultWidgetsLocalizations.delegate,
DefaultMaterialLocalizations.delegate, // TextField 所必需
DefaultCupertinoLocalizations.delegate, // CupertinoTabBar 所必需
],
child: child,
)
如果支持具有多种书写变体的语言(例如中文),请使用 Locale.fromSubtags 显式定义 scriptCode 和 countryCode,以防止 Flutter 解析到意外的变体。
supportedLocales: const [
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
]
每周安装量
1.8K
代码仓库
GitHub 星标数
792
首次出现
12 天前
安全审计
安装于
codex1.8K
gemini-cli1.8K
opencode1.8K
github-copilot1.8K
cursor1.8K
kimi-cli1.8K
Configure the project to support code generation for localizations.
pubspec.yaml:dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: true # Required for l10n code generation
2. Create an l10n.yaml file in the project root to configure the gen-l10n tool:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
# Optional: Set to false to generate files into lib/ instead of the synthetic package
# synthetic-package: false
Store localized strings in Application Resource Bundle (.arb) files within the configured arb-dir.
Create the template file (e.g., lib/l10n/app_en.arb):
{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "The conventional newborn programmer greeting"
}
}
Create translation files (e.g., lib/l10n/app_es.arb):
{
"helloWorld": "¡Hola Mundo!"
}
Initialize the Localizations widget by configuring the root MaterialApp or CupertinoApp.
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust import if synthetic-package is false
return MaterialApp(
title: 'Localized App',
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'), // English
Locale('es'), // Spanish
],
home: const MyHomePage(),
);
Access localized values in the widget tree using the generated AppLocalizations class:
Text(AppLocalizations.of(context)!.helloWorld)
Note: If usingWidgetsApp instead of MaterialApp, omit GlobalMaterialLocalizations.delegate.
Use placeholders, plurals, and selects for dynamic content. Define parameters in the @key metadata.
"hello": "Hello {userName}",
"@hello": {
"description": "A message with a single parameter",
"placeholders": {
"userName": {
"type": "String",
"example": "Bob"
}
}
}
"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
"@nWombats": {
"placeholders": {
"count": {
"type": "num",
"format": "compact"
}
}
}
"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"placeholders": {
"gender": {
"type": "String"
}
}
}
Use format and optionalParameters to leverage intl formatting.
"dateMessage": "Date: {date}",
"@dateMessage": {
"placeholders": {
"date": {
"type": "DateTime",
"format": "yMd"
}
}
}
Copy this checklist to track progress when introducing a new locale.
.arb file in the arb-dir (e.g., app_fr.arb)..arb file.Locale to the supportedLocales list in MaterialApp.flutter gen-l10n to verify ARB syntax and regenerate AppLocalizations.Flutter handles runtime localization, but iOS requires bundle-level configuration for the App Store and system settings.
ios/Runner.xcodeproj in Xcode.Runner project in the Project Navigator.Info tab.+ button.project.pbxproj is correctly updated.Widgets like TextField and CupertinoTabBar require a Localizations ancestor with specific delegates (MaterialLocalizations or CupertinoLocalizations).
Error: No MaterialLocalizations found. or CupertinoTabBar requires a Localizations parent... Fix: Ensure the widget is a descendant of MaterialApp/CupertinoApp. If building a standalone widget tree (e.g., in tests or a custom WidgetsApp), wrap the widget in a Localizations widget:
Localizations(
locale: const Locale('en', 'US'),
delegates: const [
DefaultWidgetsLocalizations.delegate,
DefaultMaterialLocalizations.delegate, // Required for TextField
DefaultCupertinoLocalizations.delegate, // Required for CupertinoTabBar
],
child: child,
)
If supporting languages with multiple scripts (e.g., Chinese), use Locale.fromSubtags to explicitly define the scriptCode and countryCode to prevent Flutter from resolving to an unexpected variant.
supportedLocales: const [
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
]
Weekly Installs
1.8K
Repository
GitHub Stars
792
First Seen
12 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex1.8K
gemini-cli1.8K
opencode1.8K
github-copilot1.8K
cursor1.8K
kimi-cli1.8K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI代码审查工具 - 自动化安全漏洞检测与代码质量分析 | 支持多领域检查清单
1,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装