Flutter i18n: één codebasis, alle talen, alle platforms
Flutter gebruikt ARB-bestanden (Application Resource Bundle) en het intl-pakket voor localisatie op iOS, Android, web en desktop vanuit één codebase. De gen-l10n-tool genereert type-veilige Dart-code vanuit uw ARB-templates, wat u compilatietijdveiligheid en IDE-automatisch aanvullen biedt voor elke vertaalsleutel.
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'));
}
}Flutter-localisatiefuncties
Flutter-localisatie in de praktijk
Gebruik AppLocalizations.of(context) om gegenereerde vertaalmethoden in uw widgets te benaderen, met volledige ondersteuning voor meervoudsvormen en datumopmaak.
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())),
],
);
}
}Gerelateerde handleidingen
Android Localization
Vergelijk Flutter-localisatie met native Android strings.xml en resource qualifier-patronen.
iOS Localization
Bekijk hoe iOS lokalisatie aanpakt met String Catalogs en SwiftUI voor een vergelijking tussen de verschillende platforms.
TMS-vergelijkingen
Vergelijk vertaalbeheersplatformen om de beste keuze voor uw Flutter-project te vinden.
Vereenvoudig Flutter-localisatie vandaag nog
Beheer uw ARB-vertalingen met AI-gestuurde workflows, CLI-synchronisatie naar uw Flutter-project en CDN-levering onder 50 ms.