localize.dev

Dokumentation / Flutter

Flutter-Lokalisierung mit ARB-Dateien, automatisiert

Lokalisieren Sie eine Flutter-App: Text() und hintText-Strings werden zu AppLocalizations-Lookups mit ARB-Dateien, ICU-Plurals und Platzhalter-Metadaten, und gen-l10n ist eingerichtet.

Funktionsweise

Text('…') und Argumente wie hintText:, labelText: und tooltip: werden zu AppLocalizations.of(context)!.key, mit Methodenargumenten für Platzhalter.

const wird nur bei Widgets entfernt, die jetzt eine Lookup enthalten; Strings ohne BuildContext im Geltungsbereich werden gemeldet, nicht geändert.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

lib/screens/cart_screen.dart · vorher
import 'package:flutter/material.dart';

class CartScreen extends StatelessWidget {
  const CartScreen({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      const Text('Your cart'),
      Text('Welcome back, $name!'),
    ]);
  }
}
lib/screens/cart_screen.dart · nachher
import 'package:flutter/material.dart';

class CartScreen extends StatelessWidget {
  const CartScreen({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(AppLocalizations.of(context)!.cartScreenYourCart),
      Text(AppLocalizations.of(context)!.cartScreenWelcomeBack(name)),
    ]);
  }
}
lib/l10n/app_en.arb
{
  "cartScreenYourCart": "Your cart",
  "cartScreenWelcomeBack": "Welcome back, {name}!"
}

Was das Setup hinzufügt

Der erste Durchlauf richtet flutter_localizations und gen-l10n ein, falls das Projekt es noch nicht hat:

  • flutter_localizations, intl und generate: true in pubspec.yaml
  • l10n.yaml und lib/l10n/app_<locale>.arb
  • MaterialApp-Delegates und unterstützte Lokale sowie die iOS-Sprachliste

Ausführen

Die CLI benötigt Node.js 22 oder neuer, sonst nichts: npx führt es aus, ohne ein package.json zum Projekt. Kein Node auf Ihrem Rechner? Die GitHub Action unten führt es für Sie aus.

npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.