---
title: "Schnellstart mit Flutter"
description: "Übersetze die ARB-Locale-Dateien deiner Flutter-App mit verbatra, von der Installation bis zum ersten deutschen Text auf dem Bildschirm."
type: "tutorial"
---
# Schnellstart mit Flutter

Übersetze die ARB-Locale-Dateien deiner Flutter-App mit verbatra, von der Installation bis zum ersten deutschen Text auf dem Bildschirm.

Am Ende dieser Seite zeigt deine Flutter-App einen deutschen Text, den verbatra aus `lib/l10n/app_en.arb` übersetzt hat, und eine Lock-Datei sorgt dafür, dass jeder spätere Lauf nur noch übersetzt, was sich geändert hat. Du brauchst Node.js `^22.18.0 || >=24`, ein Flutter-Projekt und etwa zehn Minuten. Die ersten vier Schritte brauchen weder ein Konto noch einen API-Schlüssel.

Du hast schon Locale-Dateien und einen Coding-Agenten? Gib ihm stattdessen den Prompt von [verbatra mit einem KI-Agenten einrichten](https://verbatra.kreitz-webdev.de/de/docs/start-with-ai.md): Er richtet verbatra um die Dateien ein, die dein Projekt schon hat, und hält an, bevor er etwas ausgibt.

## Schritte [#schritte]

<Steps>
<Step>

### Installiere die CLI [#installiere-die-cli]

```bash
npm install --save-dev @verbatra/cli
```

verbatra ist ein Entwicklungswerkzeug und landet nie in deiner App. Die Befehle unten nutzen `npx`; mit pnpm, yarn oder bun nimmst du stattdessen `pnpm verbatra`, `yarn verbatra` oder `bun run verbatra`.

<Callout title="Eine Flutter-App hat keine package.json">
Dein Paketmanager legt bei der ersten Installation eine an. Trag `node_modules/` in deine `.gitignore` ein.
</Callout>

</Step>
<Step>

### Lege eine Quell-Locale-Datei an [#lege-eine-quell-locale-datei-an]

Gibt es `lib/l10n/app_en.arb` schon, überspringst du diesen Schritt. Sonst legst du die Datei mit zwei Texten an, einer davon mit Platzhalter:

```json title="lib/l10n/app_en.arb"
{
  "@@locale": "en",
  "greeting": "Hello, {name}!",
  "@greeting": {
    "placeholders": { "name": { "type": "String" } }
  },
  "cartEmpty": "Your cart is empty."
}
```

</Step>
<Step>

### Erzeuge eine Konfiguration [#erzeuge-eine-konfiguration]

```bash
npx @verbatra/cli init --format arb --provider gemini --yes
```

`--format` `arb` ist das Dateiformat von `flutter_localizations`. `init` findet deine Locale-Dateien oder schreibt das Muster `lib/l10n/app_{locale}.arb`, wenn es noch keine gibt. `--yes` übernimmt, was `init` erkannt hat, statt nachzufragen. Die neue `verbatra.config.ts` übersetzt von `en` nach `de`; für weitere Sprachen ergänzt du Codes in `targetLocales`.

</Step>
<Step>

### Sieh dir den Lauf ohne Schlüssel an [#sieh-dir-den-lauf-ohne-schlüssel-an]

```bash
npx @verbatra/cli translate --dry-run
```

```text output
verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)
```

Ein Probelauf baut keinen Provider, braucht also keinen Schlüssel, kostet nichts und schreibt nichts.

</Step>
<Step>

### Übersetze [#übersetze]

```bash
cp .env.example .env
```

Öffne `.env` und füge deinen Schlüssel hinter `GEMINI_API_KEY=` ein. Noch kein Schlüssel? Gemini hat eine kostenlose Stufe: Erstelle einen im [Google AI Studio](https://aistudio.google.com/apikey). Alle anderen Provider und ihre Variablen stehen unter [Provider](https://verbatra.kreitz-webdev.de/de/docs/providers.md).

```bash
npx @verbatra/cli translate
```

verbatra schickt die zwei Texte an Gemini, prüft, dass jeder Platzhalter erhalten bleibt, und schreibt `lib/l10n/app_de.arb`. Der Wortlaut hängt vom Modell ab, zum Beispiel:

```json title="lib/l10n/app_de.arb"
{
  "@@locale": "de",
  "greeting": "Hallo, {name}!",
  "cartEmpty": "Dein Warenkorb ist leer."
}
```

</Step>
<Step>

### Prüfe, ob jede Locale synchron ist [#prüfe-ob-jede-locale-synchron-ist]

```bash
npx @verbatra/cli check
```

```text output
[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync
```

`check` ruft keinen Provider auf und endet mit `1`, sobald eine Locale nicht mehr synchron ist, und kann so einen Pull Request absichern.

</Step>
<Step>

### Lade die Locales in deiner App [#lade-die-locales-in-deiner-app]

Füge `flutter_localizations` hinzu:

```bash
flutter pub add flutter_localizations:"{sdk: flutter}" intl:any
```

Dann lädst du beide Dateien und zeigst die Begrüßung an:

```yaml title="pubspec.yaml"
flutter:
  generate: true
```

```yaml title="l10n.yaml"
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
```

```dart title="lib/main.dart"
import 'package:flutter/material.dart';
import 'l10n/app_localizations.dart';

void main() => runApp(
  MaterialApp(
    locale: const Locale('de'),
    localizationsDelegates: AppLocalizations.localizationsDelegates,
    supportedLocales: AppLocalizations.supportedLocales,
    home: Builder(
      builder: (context) => Text(AppLocalizations.of(context)!.greeting('Ada')),
    ),
  ),
);
```

Starte deine App: Die Begrüßung lautet `Hallo, Ada!`.

</Step>
</Steps>

## Was gerade passiert ist [#was-gerade-passiert-ist]

- `verbatra.lock.json` speichert einen Hash jedes Quelltexts, damit der nächste Lauf nur neue und geänderte Texte schickt. Siehe [Die Lock-Datei](https://verbatra.kreitz-webdev.de/de/docs/the-lock-file.md).
- Ein Ergebnis, das einen Platzhalter verliert, wird zurückgehalten und nie geschrieben. Siehe [Übersetzungssicherheit](https://verbatra.kreitz-webdev.de/de/docs/translation-safety.md).

Committe die Locale-Dateien, `verbatra.lock.json` und `verbatra.provenance.json` zusammen.

## Optional: Verbinde deinen Coding-Agenten [#optional-verbinde-deinen-coding-agenten]

<AvailableFrom version="0.12.0" />

```bash
npx @verbatra/cli init --agent
```

Mit vorhandener Konfiguration behält `init --agent` sie und ergänzt nur die Agent-Dateien: die verbatra-Regeln in `AGENTS.md` (oder `CLAUDE.md`, wenn das deine einzige Anweisungsdatei ist) und den verbatra-MCP-Server ohne die Tools, die Geld kosten, in der Projektkonfiguration jedes Coding-Agenten, den es erkennt. Welche Dateien es für welchen Agenten schreibt und wie du mit `--client` die Agenten selbst nennst, steht unter [Coding-Agenten einrichten](https://verbatra.kreitz-webdev.de/de/docs/cli/init.md#coding-agenten-einrichten). `--dry-run` zeigt die Dateien, ohne sie zu schreiben.

Oder füg ohne die CLI nur den MCP-Server zu deinem VS-Code-Benutzerprofil hinzu; nutze einen Weg, nie beide:

[Zu VS Code hinzufügen](vscode:mcp/install?%7B%22name%22%3A%22verbatra%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40verbatra%2Fmcp%22%5D%7D)

## Nächste Schritte [#nächste-schritte]

<Cards>
  <Card title="Eine Sprache hinzufügen" href="https://verbatra.kreitz-webdev.de/de/docs/add-a-language.md" description="Ergänze eine Ziel-Locale und lass einen Lauf sie füllen." />
  <Card title="verbatra in der CI ausführen" href="https://verbatra.kreitz-webdev.de/de/docs/ci-and-exit-codes.md" description="Lass einen Pull Request fehlschlagen, wenn eine Locale abweicht." />
  <Card title="Wähle deinen Stack" href="https://verbatra.kreitz-webdev.de/de/docs/pick-your-stack.md" description="Die Format-ID und die Dateistruktur für jedes andere Framework." />
</Cards>