
Flutter 在地化完整指南
從 ARB 檔案到 RTL 支援:使用 easy_localization 在地化 Flutter 應用程式、處理每種語言的複數,並透過 AI 自動翻譯。
安裝 easy_localization
將 easy_localization 套件新增到 pubspec.yaml。這是最受歡迎的 Flutter i18n 套件,支援 ARB/JSON 檔案、複數和上下文擴充套件。還應從 SDK 新增 flutter_localizations,以根據語系格式化日期、數字和文字方向。
dependencies:
easy_localization: ^3.0.7
flutter_localizations:
sdk: flutter建立 ARB 翻譯檔案
Application Resource Bundle(ARB)檔案是 Flutter 的標準在地化格式。每個檔案都包含鍵值對,以及用於描述預留位置、複數規則和譯者上下文的可選元資料。在 assets/translations 目錄中為每個語系建立一個檔案。
{
"@@locale": "en",
"appTitle": "My App",
"@appTitle": {
"description": "The title of the application"
},
"greeting": "Hello, {name}!",
"@greeting": {
"description": "Greeting with user name",
"placeholders": {
"name": {
"type": "String",
"example": "Alice"
}
}
},
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"description": "Number of items in the cart",
"placeholders": {
"count": {
"type": "num",
"format": "compact"
}
}
}
}設定應用程式
使用 EasyLocalization widget 包裝應用程式。它管理語系狀態、從資源檔案載入翻譯,並提供 MaterialApp 所需的語系委託。三個必需的委託屬性是 localizationsDelegates、supportedLocales 和 locale,均可透過上下文擴充套件獲得。
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(
EasyLocalization(
supportedLocales: [
Locale('en'),
Locale('ar'),
Locale('ja'),
Locale('de'),
],
path: 'assets/translations', // Path to your ARB/JSON files
fallbackLocale: Locale('en'),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
home: HomePage(),
);
}
}翻譯 widget
對字串鍵使用 .tr() 擴充方法,即可在任意 widget 中取得翻譯文字。對於複數,請將數量值傳給 .plural()。easy_localization 同時提供字串擴充語法('key'.tr())和上下文方法語法(context.tr('key'))。
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('appTitle'.tr()), // Simple key
),
body: Column(
children: [
// String with variable interpolation
Text('greeting'.tr(args: ['Alice'])),
// Named arguments
Text('greeting'.tr(namedArgs: {'name': 'Alice'})),
// Plural form
Text('itemCount'.plural(3)),
],
),
);
}
}處理複數和變數
Flutter 使用 ICU MessageFormat 處理複數,這與 iOS、Android 和 Web 使用的標準相同。在 ARB 檔案中使用 {count, plural, ...} 語法定義複數形式。每種語言都需要根據 CLDR 複數規則定義自己的形式。阿拉伯語有 6 種形式,俄語有 4 種,日語有 1 種。
// English: 3 useful forms (=0, =1, other)
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}"
// Arabic: 6 forms (=0, =1, =2, few, many, other)
"itemCount": "{count, plural, =0{لا عناصر} =1{عنصر واحد} =2{عنصران} few{{count} عناصر} many{{count} عنصرًا} other{{count} عنصر}}"
// Japanese: 1 form (other)
"itemCount": "{count, plural, other{{count}個のアイテム}}"
// German: 2 forms (=1, other)
"itemCount": "{count, plural, =1{1 Artikel} other{{count} Artikel}}"
// Russian: 3 forms (one, few, many)
"itemCount": "{count, plural, =0{Нет товаров} one{{count} товар} few{{count} товара} many{{count} товаров} other{{count} товаров}}"// Simple variable
"welcome": "Welcome, {name}!"
// Multiple variables
"orderStatus": "Order #{orderId} — {status}"
// Variable in plural context
"unreadMessages": "{count, plural, =0{No unread messages} =1{1 unread message from {sender}} other{{count} unread messages}}"
// In widgets:
Text('welcome'.tr(namedArgs: {'name': userName}));
Text('orderStatus'.tr(namedArgs: {'orderId': '1234', 'status': 'Shipped'}));
Text('unreadMessages'.plural(count, namedArgs: {'sender': senderName}));支援 RTL 語言
當語系為從右到左書寫的語言(阿拉伯語、希伯來語、波斯語、烏爾都語)時,Flutter 會自動鏡像整個版面配置。但程式碼必須使用可識別方向的 widget 和屬性,才能正確完成鏡像。請將硬編碼的 left/right 替換為對應的 start/end。
import 'package:flutter/material.dart';
class AdaptiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isRtl = Directionality.of(context) == TextDirection.rtl;
return Scaffold(
body: Row(
children: [
// Use start/end instead of left/right
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: 16.0, // Leading edge (left in LTR, right in RTL)
end: 8.0, // Trailing edge
),
child: Text('content'.tr()),
),
),
// Flip icons for RTL
Icon(
isRtl ? Icons.arrow_back : Icons.arrow_forward,
),
],
),
);
}
}// Use Directional widgets for RTL-aware layouts
EdgeInsetsDirectional.only(start: 16, end: 8) // Not EdgeInsets.only(left: 16, right: 8)
AlignmentDirectional.centerStart // Not Alignment.centerLeft
BorderRadiusDirectional.only(topStart: Radius.circular(8))
// Automatically mirrors when locale changes to Arabic, Hebrew, etc.
// No conditional logic needed — Flutter handles text direction from locale智能語系回退鏈
預設情況下,當 pt-BR 翻譯缺失時,Flutter 會直接回退到英語,並跳過完全可用的 pt-PT 翻譯。locale_chain 套件透過可設定回退鏈解決此問題。只需一行設定,無需遷移,現有 .tr() 呼叫即可正常工作。
import 'package:locale_chain/locale_chain.dart';
import 'package:locale_chain/easy_localization.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
LocaleChain.configure(); // Enable smart fallback chains
runApp(
EasyLocalization(
supportedLocales: [
Locale('en'),
Locale('pt', 'BR'),
Locale('pt', 'PT'),
Locale('es'),
Locale('es', 'MX'),
],
path: 'assets/translations',
assetLoader: LocaleChainAssetLoader( // Swap in the chain loader
baseLoader: RootBundleAssetLoader(),
),
fallbackLocale: Locale('en'),
child: MyApp(),
),
);
}
// Result: pt-BR user sees pt-PT translations when pt-BR keys are missing,
// instead of falling back directly to English.// Override specific chains while keeping built-in defaults
LocaleChain.configure(
fallbacks: {
'pt-BR': ['pt-PT', 'pt'], // pt-BR → pt-PT → pt → en
'es-MX': ['es-419', 'es'], // es-MX → es-419 → es → en
'fr-CA': ['fr'], // fr-CA → fr → en
},
);
// Or replace all defaults with your own chains
LocaleChain.configure(
fallbacks: {
'zh-Hant-HK': ['zh-Hant-TW', 'zh-Hans'],
'pt-BR': ['pt-PT', 'pt'],
},
mergeDefaults: false, // Only your chains, no built-in defaults
);自動翻譯
完成在地化設定後,使用 AI 翻譯 ARB 檔案。在 IDE 中讓 AI 助手翻譯源 ARB 檔案,或在 CI/CD 管線中使用 i18n Agent CLI。ARB 元資料(預留位置、說明)可提供上下文,從而提升翻譯品質。
# In your IDE, ask your AI assistant:
> Translate assets/translations/en.arb to Arabic, Japanese, and German
✓ ar.arb created (1.4s)
✓ ja.arb created (1.2s)
✓ de.arb created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate assets/translations/en.arb --lang ar,ja,de自動保證翻譯品質
常見問題
執行階段找不到翻譯檔案
ARB 檔案語法無效
熱重載後未顯示翻譯更改
硬編碼左/右方向導致 RTL 版面配置異常
推薦的檔案結構
my_flutter_app/
├── assets/
│ └── translations/
│ ├── en.arb # Source language (English)
│ ├── ar.arb # Arabic (with 6 plural forms)
│ ├── de.arb # German
│ ├── ja.arb # Japanese
│ ├── pt-BR.arb # Brazilian Portuguese
│ └── pt-PT.arb # European Portuguese
├── lib/
│ ├── main.dart # App entry with EasyLocalization
│ ├── app.dart # MaterialApp with locale delegates
│ └── widgets/
│ └── language_switcher.dart
├── pubspec.yaml # Dependencies
└── analysis_options.yaml立即試用 i18n Agent
將翻譯檔案拖放到此處
JSON, YAML, PO, XML, CSV, Markdown, Properties
或點擊選擇檔案
目標語言
使用 locale_chain 實現語系回退
當 pt-BR 等地區語系缺少翻譯鍵時,Flutter 會直接跳到範本語言,而不會先檢查父級語系 pt。
flutter pub add locale_chainimport 'package:locale_chain/locale_chain.dart';
LocaleChain.configure(fallbacks: {
'pt-BR': ['pt', 'en'],
'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
});
LocaleChainAssetLoader(baseLoader: RootBundleAssetLoader());查看語言回退指南,瞭解受支援框架的完整列表和 75 條內建回退鏈。 Learn more →