Flutter i18n : une base de code, toutes les langues, toutes les plateformes
Flutter utilise des fichiers ARB (Application Resource Bundle) et le package intl pour gérer la localisation sur iOS, Android, web et ordinateur de bureau à partir d'une base de code unique. L'outil gen-l10n génère du code Dart avec sécurité de types à partir de vos modèles ARB, vous offrant une sécurité à la compilation et l'autocomplétion IDE pour chaque clé de traduction.
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'));
}
}Fonctionnalités de localisation Flutter
La localisation de Flutter en pratique
Utilisez AppLocalizations.of(context) pour accéder aux méthodes de traduction générées dans vos widgets, avec une prise en charge complète de la pluralisation et du formatage des dates.
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())),
],
);
}
}Guides connexes
Android Localization
Comparez la localisation Flutter avec les patterns natifs Android strings.xml et les qualificatifs de ressources.
iOS Localization
Découvrez comment iOS gère la localisation avec les String Catalogs et SwiftUI pour une comparaison spécifique à la plateforme.
Comparatifs TMS
Comparez les plateformes de gestion des traductions pour trouver la solution la mieux adaptée à votre projet Flutter.
Découvrez d'autres guides sur les frameworks
Simplifiez la localisation Flutter dès aujourd'hui
Gérez vos traductions ARB avec des flux de travail propulsés par l'IA, la synchronisation CLI vers votre projet Flutter, et une livraison CDN en moins de 50 ms.