Zum Hauptinhalt springen
Alle ArtikelBlog

So übersetzt du eine Flutter-App: eine Schritt-für-Schritt-Anleitung

· 8 Min. Lesezeit

Eine Flutter-App zu übersetzen wirkt schwieriger, als es ist. Flutter bringt alles mit, was du brauchst. Deine Texte liegen in ARB-Dateien, eine pro Sprache, und Flutter macht daraus eine Dart-Klasse, die du in deinen Widgets aufrufst. Diese Anleitung bringt dich von einer rein englischen App zu einer, die ihre Sprache mit den Einstellungen des Telefons wechselt. Sie behandelt auch, was oft schiefgeht: Platzhalter, Pluralformen und Sprachen, die von rechts nach links geschrieben werden.

1. Pakete hinzufügen

Füge in pubspec.yaml das Lokalisierungspaket von Flutter und intl hinzu und schalte die Codegenerierung ein:

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true

Mit intl: any wählt Flutter die intl-Version, die zu deiner Flutter-Version passt, und es gibt keine Versionskonflikte.

2. Sag Flutter, wo deine Texte liegen

Lege l10n.yaml im Stammverzeichnis des Projekts an:

l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: false

Die Vorlagendatei ist deine Ausgangssprache. Alle anderen Sprachen folgen ihren Schlüsseln. Die letzte Zeile, nullable-getter: false, erspart dir das ! bei jedem Textaufruf.

3. Schreib deine erste ARB-Datei

Lege lib/l10n/app_en.arb an:

lib/l10n/app_en.arb
{
  "@@locale": "en",
  "homeTitle": "Welcome back",
  "@homeTitle": {
    "description": "Title on the home screen"
  },
  "cartItems": "{count, plural, =0{Your cart is empty} =1{1 item in your cart} other{{count} items in your cart}}",
  "@cartItems": {
    "placeholders": {
      "count": { "type": "num" }
    }
  },
  "greeting": "Hello, {name}!",
  "@greeting": {
    "placeholders": {
      "name": { "type": "String" }
    }
  }
}

Ein paar Gewohnheiten zahlen sich später aus:

  • Gib jedem Schlüssel eine Beschreibung. Übersetzer und KI-Übersetzungstools sehen nur den Text. "Title on the home screen" sagt ihnen, dass es eine kurze Überschrift ist und kein Satz.
  • Setz Sätze nie aus Teilstrings zusammen. "Hello, " + name lässt sich nicht übersetzen, weil viele Sprachen den Namen woanders hinstellen. Nimm einen Platzhalter.
  • Nutze Pluralformen statt if-Abfragen. Englisch hat zwei Formen, Arabisch sechs und Polnisch vier. Das Pluralformat oben (ein Standard namens ICU) deckt alle ab. Nutze beim Übersetzen eines Plurals die Formen, die die andere Sprache braucht (zero, one, two, few, many, other), nicht nur =0 und =1 aus dem Englischen.

Füge jetzt eine zweite Sprache hinzu. Lege lib/l10n/app_es.arb mit denselben Schlüsseln an:

lib/l10n/app_es.arb
{
  "@@locale": "es",
  "homeTitle": "¡Hola de nuevo!",
  "cartItems": "{count, plural, =0{Tu carrito está vacío} =1{1 artículo en tu carrito} other{{count} artículos en tu carrito}}",
  "greeting": "¡Hola, {name}!"
}

Die Beschreibungen (die @-Einträge) brauchst du nur in der Vorlagendatei.

4. Code generieren und mit der App verbinden

Führe flutter pub get aus oder starte die App, dann erzeugt Flutter den Code für dich. Du kannst auch selbst flutter gen-l10n ausführen. Aktuelle Flutter-Versionen schreiben app_localizations.dart neben deine ARB-Dateien. Ältere legten sie in einem versteckten Paket ab, also aktualisiere Flutter, falls der Import unten nicht klappt.

Verbinde ihn dann in MaterialApp:

lib/main.dart
import 'package:flutter/material.dart';
import 'l10n/app_localizations.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: const HomeScreen(),
    );
  }
}

localizationsDelegates enthält auch Flutters eigene Übersetzungen für die eingebauten Widgets, etwa den Datumsauswähler und die Beschriftung der Schaltfläche "Zurück".

5. Texte in deinen Widgets verwenden

lib/home_screen.dart
// Inside a widget's build method:
final l10n = AppLocalizations.of(context);

Text(l10n.homeTitle);
Text(l10n.greeting('Sara'));
Text(l10n.cartItems(3)); // "3 items in your cart"

Jeder Schlüssel wird zu einer Dart-Eigenschaft oder -Methode. Ein Tippfehler im Schlüsselnamen stoppt also den Build, statt deinen Nutzern eine leere Beschriftung zu zeigen.

Die App folgt jetzt der Sprache des Telefons. Zum Testen änderst du die Sprache im Simulator oder Emulator oder erzwingst kurz eine mit locale: const Locale('es') in MaterialApp.

6. Vergiss iOS nicht

Unter iOS zeigt der App Store nur die Sprachen an, die dein Xcode-Projekt angibt. Öffne ios/Runner.xcodeproj in Xcode, wähle das Projekt Runner (unter Projects, nicht unter Targets), öffne den Tab Info und füge jede Sprache unter Localizations hinzu. Xcode legt dann ein paar kleine Dateien an, aus denen der App Store abliest, welche Sprachen deine App unterstützt.

7. Rechts-nach-links-Sprachen funktionieren fast von selbst

Bei Arabisch, Hebräisch oder Persisch dreht MaterialApp die Layoutrichtung für dich um. Was es nicht reparieren kann, ist Code, der von links und rechts ausgeht:

  • Nimm EdgeInsetsDirectional.only(start: 16) statt EdgeInsets.only(left: 16).
  • Nimm AlignmentDirectional.centerStart statt Alignment.centerLeft.
  • Spiegle Pfeilsymbole, die "vorwärts" zeigen. Die üblichen Zurück- und Weiter-Pfeile wie Icons.arrow_back drehen sich schon von selbst, prüfe also jeden anderen Pfeil, den du nutzt. Symbole wie ein Telefon oder eine Kamera müssen nicht gespiegelt werden.

Teste früh mit einer echten Rechts-nach-links-Sprache. Außerdem ist deutscher Text oft viel länger als englischer, und Arabisch braucht mehr Zeilenhöhe, also prüfe, dass Schaltflächen nicht überlaufen.

8. Halte Übersetzungen synchron, während die App wächst

Die Schritte oben sind der leichte Teil. Schwierig wird es mit dem nächsten Release, wenn du zwölf Schlüssel hinzufügst, drei änderst und alle vor der Veröffentlichung in jeder Sprache brauchst. Übliche Wege:

  • Die ARB-Dateien von Hand bearbeiten. Das reicht für ein oder zwei Sprachen und eine kleine App. Es geht schief, sobald jemand anderes übersetzt oder du vergisst, welche Schlüssel sich geändert haben.
  • Die Dateien an einen Übersetzer schicken. Du exportierst app_en.arb, bekommst die Übersetzungen zurück und fügst sie ein. Das klappt, dauert aber, und du musst selbst festhalten, was sich seit dem letzten Mal geändert hat.
  • Ein Übersetzungsmanagement-Tool nutzen. Du lädst deine englische Datei hoch, übersetzt neue Schlüssel (von Hand, mit KI oder beides) und lädst dann die anderen Sprachen herunter.

litei18n ist so ein Tool, gemacht für kleine Teams. Du kannst ARB-Dateien importieren und exportieren (in den kostenpflichtigen Tarifen, ab 9 $ im Monat; der kostenlose Tarif arbeitet mit JSON), fehlende Schlüssel mit KI übersetzen und die Änderungen prüfen, bevor sie veröffentlicht werden. litei18n liest die Beschreibung jedes neuen Schlüssels aus deiner ARB-Datei und schreibt die Beschreibungen beim Herunterladen zurück, sodass Übersetzer und die KI sie sehen. Downloads heißen so, wie Flutter es erwartet, etwa app_es.arb. Willst du eine Beschreibung später ändern, bearbeite sie in litei18n, denn erneutes Hochladen der Datei aktualisiert sie nicht. Die Einstellungen der Platzhalter übernimmt es noch nicht, also behalte deine eigene app_en.arb als Quelle und lade nur die anderen Sprachen herunter. Wenn du mit einem KI-Programmierassistenten wie Claude oder Cursor arbeitest, kann er über die MCP-Verbindung von litei18n auch Schlüssel für dich anlegen und übersetzen. Über diese Verbindung arbeiten KI-Tools direkt in litei18n.

9. Texte ohne neues App-Release aktualisieren

Flutter kompiliert die ARB-Dateien in deine App. Einen Tippfehler im Deutschen zu korrigieren oder eine Sprache hinzuzufügen, braucht deshalb normalerweise einen neuen Build und eine Prüfung im App Store und bei Google Play.

Wenn das für dich ein Problem ist, kannst du die Übersetzungen stattdessen zur Laufzeit laden. Behalte eine mitgelieferte Kopie für die Offline-Nutzung und den ersten Start und hol beim App-Start die neueste Version von einem Server. Unsere Anleitung für Over-the-Air-Updates in Flutter zeigt den vollständigen Code. Es sind etwa 30 Zeilen, und er nutzt statt AppLocalizations eine eigene kleine Klasse. Dieser einfachere Weg kann nur reinen Text: Platzhalter und Pluralformen brauchen zusätzlichen Code, er passt also zu Apps mit überwiegend einfachen Texten. Bei litei18n gibt es Over-the-Air-Updates in den kostenpflichtigen Tarifen.

Kurze Checkliste

  • flutter_localizations und intl hinzugefügt, mit generate: true
  • l10n.yaml zeigt auf deinen ARB-Ordner und die Vorlage
  • Jeder Schlüssel hat eine Beschreibung
  • Platzhalter und Pluralformen statt zusammengesetzter Strings
  • Jede Sprache in Xcode unter Localizations eingetragen
  • Richtungsabhängige Abstände und Ausrichtung für Rechts-nach-links-Sprachen
  • Ein Plan, wie neue Schlüssel übersetzt werden

Mehr braucht es nicht, damit eine Flutter-App mehr als eine Sprache spricht. Fang mit einer zusätzlichen Sprache an. Sobald die Einrichtung läuft, ist die nächste nur eine weitere ARB-Datei.

Du willst deine ARB-Dateien an einem Ort verwalten und neue Schlüssel mit KI übersetzen? Starte kostenlos mit litei18n.

Starte in 5 Minuten mit globalem Versand

Schließe dich Entwicklern an, die ihre Apps in jeder Sprache mit litei18n ausliefern.

Kostenloser Plan verfügbar · Keine Kreditkarte · Einrichtung in unter 5 Minuten