
Der vollständige Leitfaden zur Flutter-Lokalisierung
Von ARB-Dateien bis zur RTL-Unterstützung: Lokalisieren Sie Ihre Flutter-App mit easy_localization, verarbeiten Sie Pluralformen jeder Sprache und automatisieren Sie Übersetzungen mit KI.
easy_localization installieren
Fügen Sie das Paket easy_localization zu Ihrer pubspec.yaml hinzu. Es ist das beliebteste Flutter-i18n-Paket und unterstützt ARB-/JSON-Dateien, Pluralformen und Kontext-Erweiterungen. Fügen Sie außerdem flutter_localizations aus dem SDK hinzu, um Datumswerte, Zahlen und Textrichtung Locale-gerecht zu formatieren.
dependencies:
easy_localization: ^3.0.7
flutter_localizations:
sdk: flutterARB-Übersetzungsdateien erstellen
Application-Resource-Bundle-Dateien (ARB) sind das Standardformat für die Flutter-Lokalisierung. Jede Datei enthält Schlüssel-Wert-Paare und optionale Metadaten zu Platzhaltern, Pluralregeln und Kontext. Erstellen Sie in Ihrem Verzeichnis assets/translations eine Datei pro Locale.
{
"@@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"
}
}
}
}App konfigurieren
Umschließen Sie Ihre App mit dem Widget EasyLocalization. Es verwaltet den Locale-Zustand, lädt Übersetzungen aus Ihren Asset-Dateien und stellt die von MaterialApp benötigten Locale-Delegates bereit. Die drei erforderlichen Delegate-Eigenschaften localizationsDelegates, supportedLocales und locale sind sämtlich über Kontext-Erweiterungen verfügbar.
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(),
);
}
}Widgets übersetzen
Verwenden Sie die Erweiterungsmethode .tr() auf Zeichenfolgenschlüsseln, um in jedem Widget übersetzten Text zu erhalten. Nutzen Sie für Pluralformen .plural() mit dem Anzahlwert. easy_localization bietet sowohl die Zeichenfolgenerweiterung ('key'.tr()) als auch die Kontextmethode (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)),
],
),
);
}
}Pluralformen und Variablen verarbeiten
Flutter verwendet ICU MessageFormat für Pluralformen – denselben Standard wie iOS, Android und das Web. Definieren Sie Pluralformen in Ihren ARB-Dateien mit der Syntax {count, plural, ...}. Jede Sprache benötigt nach den CLDR-Pluralregeln eigene Formen. Arabisch hat sechs Formen, Russisch vier und Japanisch eine.
// 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-Sprachen unterstützen
Flutter spiegelt das gesamte Layout automatisch, wenn die Locale eine von rechts nach links geschriebene Sprache ist, etwa Arabisch, Hebräisch, Persisch oder Urdu. Damit die Spiegelung richtig funktioniert, muss Ihr Code richtungsbewusste Widgets und Eigenschaften verwenden. Ersetzen Sie fest codiertes left/right durch 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 localeIntelligente Locale-Fallback-Ketten
Fehlt eine pt-BR-Übersetzung, wechselt Flutter standardmäßig direkt zu Englisch und überspringt vollständig geeignete pt-PT-Übersetzungen. Das Paket locale_chain behebt dies mit konfigurierbaren Fallback-Ketten. Eine Zeile zur Einrichtung, keine Migration – Ihre bestehenden .tr()-Aufrufe funktionieren unverändert.
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
);Übersetzungen automatisieren
Wenn Ihre Lokalisierung eingerichtet ist, übersetzen Sie Ihre ARB-Dateien mit KI. Bitten Sie Ihren KI-Assistenten in Ihrer IDE, Ihre ARB-Ausgangsdatei zu übersetzen, oder verwenden Sie die CLI von i18n Agent in Ihrer CI/CD-Pipeline. ARB-Metadaten wie Platzhalter und Beschreibungen liefern Kontext, der die Übersetzungsqualität verbessert.
# 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Übersetzungsqualität automatisieren
Häufige Fallstricke
Übersetzungsdateien zur Laufzeit nicht gefunden
Ungültige ARB-Dateisyntax
Übersetzungsänderungen erscheinen beim Hot Reload nicht
Fest codiertes left/right beschädigt RTL
Empfohlene Dateistruktur
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.yamli18n Agent jetzt testen
Legen Sie Ihre Übersetzungsdatei hier ab
JSON, YAML, PO, XML, CSV, Markdown, Properties
oder zum Auswählen klicken
Zielsprachen
Locale-Fallback mit locale_chain
Fehlt ein Übersetzungsschlüssel in einer regionalen Locale wie pt-BR, wechselt Flutter direkt zur Vorlagensprache, statt zuerst die übergeordnete Locale pt zu prüfen.
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());In unserem Leitfaden zu Locale-Fallbacks finden Sie die vollständige Liste unterstützter Frameworks und 75 integrierter Ketten. Learn more →