Flutter i18n: Ein einziger Code, alle Sprachen, alle Plattformen
Flutter nutzt ARB-Dateien (Application Resource Bundle) und das intl-Paket, um die Lokalisierung für iOS, Android, das Web und den Desktop aus einer einzigen Codebasis heraus zu verwalten. Das Tool „gen-l10n“ generiert typsicheren Dart-Code aus Ihren ARB-Vorlagen und bietet Ihnen so Sicherheit bei der Kompilierung sowie eine IDE-Autovervollständigung für jeden Übersetzungsschlüssel.
Get started in 4 steps
Enable generation
Add the generate flag to your pubspec.yaml to enable localization code generation.
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: trueConfigure l10n.yaml
Create l10n.yaml in your project root to configure the localization generator.
# l10n.yaml arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart
Create ARB template
Add your source language ARB file with translation keys and metadata.
{
"@@locale": "en",
"welcome": "Welcome to {appName}",
"@welcome": {
"placeholders": {
"appName": { "type": "String" }
}
},
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": { "type": "int" }
}
}
}Use in your app
Wrap your app with localization delegates and use AppLocalizations.of(context) in widgets.
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Text(l10n.welcome('Flutter'));
}
}Lokalisierungsfunktionen von Flutter
Flutter-Lokalisierung in der Praxis
Verwenden Sie `AppLocalizations.of(context)`, um in Ihren Widgets auf generierte Übersetzungsmethoden zuzugreifen, wobei Pluralisierung und Datumsformatierung vollständig unterstützt werden.
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class ProductPage extends StatelessWidget {
final int itemCount;
const ProductPage({required this.itemCount});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
children: [
Text(l10n.welcome('My Store')),
Text(l10n.itemCount(itemCount)),
// Date formatting respects locale
Text(DateFormat.yMMMd(
Localizations.localeOf(context).toString()
).format(DateTime.now())),
],
);
}
}Verwandte Anleitungen
Android Localization
Vergleichen Sie die Lokalisierung in Flutter mit den nativen „strings.xml“-Dateien und den Mustern für Ressourcenqualifizierer bei Android.
iOS Localization
Erfahren Sie, wie iOS die Lokalisierung mithilfe von String-Katalogen und SwiftUI handhabt, um einen plattformspezifischen Vergleich anzustellen.
TMS-Vergleiche
Vergleichen Sie Übersetzungsmanagement-Plattformen, um die für Ihr Flutter-Projekt am besten geeignete Lösung zu finden.
Entdecken Sie weitere Leitfäden zu Frameworks
Vereinfachen Sie noch heute die Lokalisierung von Flutter
Verwalten Sie Ihre ARB-Übersetzungen mit KI-gestützten Workflows, einer CLI-Synchronisierung mit Ihrem Flutter-Projekt und einer CDN-Bereitstellung mit einer Latenz von unter 50 ms.