Skip to main content

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.

1

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.

easy_localization bietet Kontext-Erweiterungen wie context.tr() und 'key'.tr() für knappen Übersetzungszugriff. Es übernimmt das Laden und Speichern der Locale sowie das Hot Reloading von Übersetzungsdateien während der Entwicklung.
pubspec.yaml
dependencies:
  easy_localization: ^3.0.7
  flutter_localizations:
    sdk: flutter
2

ARB-Ü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.

assets/translations/en.arb
{
  "@@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"
      }
    }
  }
}
Mit @ beginnende Schlüssel wie @greeting sind Metadaten – sie beschreiben die darüberliegende Zeichenfolge. Geben Sie Platzhaltertypen und Beispiele an, damit genaue Übersetzungen entstehen. Diese Metadatenschlüssel werden zur Laufzeit entfernt und verursachen keinen Mehraufwand.
3

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.

lib/main.dart
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(),
    );
  }
}
Der Fehler „Easy Localization not initialized“ bedeutet, dass Sie EasyLocalization.ensureInitialized() nicht vor runApp() aufgerufen haben. Der Aufruf muss nach WidgetsFlutterBinding.ensureInitialized() mit await und vor runApp() erfolgen.
4

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')).

lib/widgets/home_page.dart
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)),
        ],
      ),
    );
  }
}
Wenn Übersetzungen unverarbeitete Schlüssel statt übersetztem Text zurückgeben, prüfen Sie: 1) Das Widget EasyLocalization umschließt Ihre MaterialApp und nicht umgekehrt. 2) Ihre Übersetzungsdateien sind in pubspec.yaml unter assets deklariert. 3) Der Dateipfad in EasyLocalization entspricht Ihrer tatsächlichen Verzeichnisstruktur.
5

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.

Plural forms by language
// 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} товаров}}"
Variables and named arguments
// 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}));
Codieren Sie Singular-/Plurallogik niemals mit if (count == 1) fest. Sprachen wie Französisch behandeln 0 als Singular. Russisch, Polnisch und Arabisch besitzen Pluralformen, die im Englischen vollständig fehlen. Verwenden Sie stets ICU-Pluralsyntax und lassen Sie das Framework die richtige Form wählen.
6

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.

lib/widgets/adaptive_layout.dart
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,
          ),
        ],
      ),
    );
  }
}
RTL-aware widget patterns
// 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
Testen Sie RTL, indem Sie die App-Locale vorübergehend auf Arabisch setzen (Locale('ar')). Flutter spiegelt die gesamte Benutzeroberfläche: Navigationsschubladen öffnen sich von rechts, Zurück-Pfeile drehen sich und Text wird rechts ausgerichtet. Verwenden Sie EdgeInsetsDirectional, AlignmentDirectional und BorderRadiusDirectional, damit sich Ihre eigenen Layouts korrekt spiegeln.
7

Intelligente 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.

lib/main.dart with LocaleChain
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.
Custom fallback configuration
// 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
);
locale_chain enthält integrierte Fallback-Ketten für regionale Varianten von Portugiesisch, Spanisch, Französisch, Deutsch, Italienisch, Niederländisch, Norwegisch und Malaiisch. Eine Person mit pt-BR sieht vor Englisch pt-PT-Inhalte. Bei es-MX erscheinen vor der Standard-Locale zunächst es-419 und dann es.
8

Ü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.

Terminal
# 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
Übersetzen Sie schrittweise: Wenn Sie Ihrer ARB-Ausgangsdatei neue Schlüssel hinzufügen, übersetzen Sie nur die Änderungen, statt sämtliche Dateien neu zu erzeugen. So bleiben von Menschen geprüfte Übersetzungen und Ihre ARB-Metadaten intakt.

Übersetzungsqualität automatisieren

Erkennen Sie mit i18n-validate fehlende Schlüssel und beschädigte Platzhalter vor der Veröffentlichung. Testen Sie Ihre Benutzeroberfläche mit i18n-pseudo und Pseudoübersetzungen, bevor echte Übersetzungen vorliegen.

Häufige Fallstricke

Übersetzungsdateien zur Laufzeit nicht gefunden

Ihre ARB-/JSON-Dateien müssen in pubspec.yaml im Abschnitt assets deklariert werden. Fehlt dieser Schritt, findet Flutter die Dateien zur Laufzeit nicht, obwohl sie auf dem Datenträger vorhanden sind. Fügen Sie hinzu: assets: - assets/translations/

Ungültige ARB-Dateisyntax

ARB-Dateien sind striktes JSON – keine nachgestellten Kommas, keine einfachen Anführungszeichen, keine Kommentare. Ein einziger Syntaxfehler verhindert unbemerkt das Laden der gesamten Datei. Validieren Sie Ihre ARB-Dateien mit einem JSON-Linter, bevor Sie Übersetzungsprobleme untersuchen.

Übersetzungsänderungen erscheinen beim Hot Reload nicht

easy_localization speichert Übersetzungen im Arbeitsspeicher zwischen. Neue Schlüssel oder geänderte Übersetzungen können einen vollständigen Hot Restart statt Hot Reload erfordern. Verwenden Sie während der Entwicklung nach dem Bearbeiten von Übersetzungsdateien Hot Restart (Umschalt+R).

Fest codiertes left/right beschädigt RTL

EdgeInsets.only(left: 16) statt EdgeInsetsDirectional.only(start: 16) verhindert, dass Flutter Ihr Layout für RTL-Sprachen spiegelt. Suchen Sie Ihre Codebasis nach EdgeInsets, Alignment und BorderRadius ohne das Suffix Directional ab.

Empfohlene Dateistruktur

Project Structure
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 jetzt testen

Legen Sie Ihre Übersetzungsdatei hier ab

JSON, YAML, PO, XML, CSV, Markdown, Properties

oder zum Auswählen klicken

Zielsprachen

Keine Registrierung erforderlichSofortiges Angebot

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.

Terminal
flutter pub add locale_chain
Configuration
import '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 →

Häufig gestellte Fragen