Comment Internationaliser Votre Application Flutter avec les Fichiers ARB : Tutoriel Complet

Créer une application Flutter qui atteint des utilisateurs du monde entier nécessite une internationalisation (i18n) appropriée. Bien que Flutter offre un excellent support i18n dès le départ, comprendre comment utiliser efficacement les fichiers ARB (Application Resource Bundle) peut faire la différence entre un flux de travail de localisation maladroit et un système rationalisé et maintenable. Ce tutoriel complet vous guide à travers tout ce que vous devez savoir sur l'internationalisation de votre application Flutter avec les fichiers ARB, de la configuration de base aux modèles avancés et aux outils modernes avec IntlPull.

Que Sont les Fichiers ARB et Pourquoi les Utiliser ?

ARB (Application Resource Bundle) est un format basé sur JSON conçu spécifiquement pour stocker des ressources localisables. Créé à l'origine par Google, les fichiers ARB sont devenus la norme pour l'internationalisation Flutter car ils offrent plusieurs avantages clés :

Sécurité des Types : Les fichiers ARB fonctionnent avec la génération de code de Flutter pour créer des méthodes de traduction sûres en termes de types, détectant les erreurs au moment de la compilation plutôt qu'à l'exécution.

Métadonnées Enrichies : Contrairement au JSON simple, les fichiers ARB prennent en charge les métadonnées pour chaque traduction, y compris les descriptions, les espaces réservés et les exemples qui aident les traducteurs à comprendre le contexte.

Support du Format de Message ICU : Support intégré pour les règles grammaticales complexes comme les pluriels, les formes de genre et le texte conditionnel.

Intégration d'Outils : Les fichiers ARB s'intègrent parfaitement avec les systèmes de gestion de traduction, facilitant la collaboration en équipe.

Voici à quoi ressemble un fichier ARB de base :

JSONCopy
1{
2  "@@locale": "fr",
3  "helloWorld": "Bonjour le Monde !",
4  "@helloWorld": {
5    "description": "Le salut conventionnel du programmeur débutant"
6  }
7}

La clé @@locale identifie la langue, helloWorld est votre clé de traduction, et @helloWorld contient des métadonnées qui aident les traducteurs à comprendre le contexte.

Configuration de l'Internationalisation Flutter

Construisons une configuration complète d'internationalisation à partir de zéro. Nous allons créer une application simple qui démontre tous les concepts clés.

Étape 1 : Ajouter les Dépendances Requises

Tout d'abord, mettez à jour votre pubspec.yaml pour inclure les packages nécessaires :

YAMLCopy
1dependencies:
2  flutter:
3    sdk: flutter
4  flutter_localizations:
5    sdk: flutter
6  intl: ^0.19.0
7
8flutter:
9  generate: true

Le package flutter_localizations fournit un support de localisation pour les widgets Material et Cupertino, tandis que intl gère le formatage des messages, des dates/heures et des nombres.

Étape 2 : Configurer la Génération de Code

Créez un fichier nommé l10n.yaml à la racine de votre projet :

YAMLCopy
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Cette configuration indique à Flutter où trouver vos fichiers ARB et où générer le code de localisation.

Étape 3 : Créer Votre Premier Fichier ARB

Créez le répertoire lib/l10n et ajoutez votre fichier modèle app_en.arb :

JSONCopy
1{
2  "@@locale": "en",
3  "appTitle": "Mon Application Géniale",
4  "@appTitle": {
5    "description": "Le titre de l'application"
6  },
7  "welcomeMessage": "Bienvenue dans notre application !",
8  "@welcomeMessage": {
9    "description": "Message affiché sur l'écran d'accueil"
10  },
11  "greeting": "Bonjour, {name} !",
12  "@greeting": {
13    "description": "Salutation personnalisée",
14    "placeholders": {
15      "name": {
16        "type": "String",
17        "example": "Alice"
18      }
19    }
20  }
21}

Étape 4 : Ajouter des Langues Supplémentaires

Créez app_fr.arb pour le français :

JSONCopy
1{
2  "@@locale": "fr",
3  "appTitle": "Mon Application Géniale",
4  "welcomeMessage": "Bienvenue dans notre application !",
5  "greeting": "Bonjour, {name} !"
6}

Notez que vous n'avez besoin d'inclure que les traductions, pas les métadonnées. Les métadonnées du fichier modèle sont automatiquement utilisées.

Étape 5 : Générer le Code de Localisation

Exécutez la commande de génération de code :

TerminalCopy
flutter gen-l10n

Cela crée des classes Dart sûres en termes de types dans .dart_tool/flutter_gen/gen_l10n/ que vous utiliserez pour accéder à vos traductions.

Étape 6 : Configurer Votre Application

Mettez à jour votre main.dart pour activer la localisation :

DARTCopy
1import 'package:flutter/material.dart';
2import 'package:flutter_localizations/flutter_localizations.dart';
3import 'package:flutter_gen/gen_l10n/app_localizations.dart';
4
5void main() {
6  runApp(const MyApp());
7}
8
9class MyApp extends StatelessWidget {
10  const MyApp({super.key});
11
12  @override
13  Widget build(BuildContext context) {
14    return MaterialApp(
15      title: 'Démo i18n Flutter',
16      localizationsDelegates: const [
17        AppLocalizations.delegate,
18        GlobalMaterialLocalizations.delegate,
19        GlobalWidgetsLocalizations.delegate,
20        GlobalCupertinoLocalizations.delegate,
21      ],
22      supportedLocales: const [
23        Locale('en'),
24        Locale('fr'),
25      ],
26      home: const HomeScreen(),
27    );
28  }
29}

Étape 7 : Utiliser les Traductions dans Vos Widgets

Maintenant vous pouvez accéder aux traductions dans n'importe quel widget :

DARTCopy
1class HomeScreen extends StatelessWidget {
2  const HomeScreen({super.key});
3
4  @override
5  Widget build(BuildContext context) {
6    final l10n = AppLocalizations.of(context)!;
7
8    return Scaffold(
9      appBar: AppBar(
10        title: Text(l10n.appTitle),
11      ),
12      body: Center(
13        child: Column(
14          mainAxisAlignment: MainAxisAlignment.center,
15          children: [
16            Text(
17              l10n.welcomeMessage,
18              style: Theme.of(context).textTheme.headlineMedium,
19            ),
20            const SizedBox(height: 20),
21            Text(l10n.greeting('Alice')),
22          ],
23        ),
24      ),
25    );
26  }
27}

C'est tout ! Votre application prend désormais en charge plusieurs langues. La locale de l'appareil déterminera automatiquement quelle langue afficher.

Gestion des Pluriels et des Formes de Genre

L'une des fonctionnalités les plus puissantes des fichiers ARB est le support du format de message ICU, qui gère les règles grammaticales complexes qui varient selon les langues.

Formes Plurielles

Différentes langues ont différentes règles de pluriel. L'anglais a deux formes (un/autres), mais le polonais en a trois et l'arabe en a six. Les fichiers ARB gèrent cela automatiquement :

JSONCopy
1{
2  "itemCount": "{count, plural, =0{Aucun article} =1{Un article} other{{count} articles}}",
3  "@itemCount": {
4    "description": "Nombre d'articles dans le panier",
5    "placeholders": {
6      "count": {
7        "type": "int"
8      }
9    }
10  }
11}

Utilisation en Dart :

DARTCopy
Text(l10n.itemCount(0)); // "Aucun article"
Text(l10n.itemCount(1)); // "Un article"
Text(l10n.itemCount(5)); // "5 articles"

Formes de Genre

Certaines langues nécessitent un texte différent selon le genre :

JSONCopy
1{
2  "replyMessage": "{gender, select, male{Il a répondu à votre message} female{Elle a répondu à votre message} other{Ils ont répondu à votre message}}",
3  "@replyMessage": {
4    "description": "Message de notification pour les réponses",
5    "placeholders": {
6      "gender": {
7        "type": "String"
8      }
9    }
10  }
11}

Utilisation :

DARTCopy
Text(l10n.replyMessage('female')); // "Elle a répondu à votre message"

Combinaison de Pluriels et de Genre

Vous pouvez imbriquer ces modèles pour des scénarios complexes :

JSONCopy
1{
2  "friendRequest": "{count, plural, =1{{gender, select, male{Il} female{Elle} other{Ils}} vous a envoyé une demande d'ami} other{{count} personnes vous ont envoyé des demandes d'ami}}",
3  "@friendRequest": {
4    "placeholders": {
5      "count": {"type": "int"},
6      "gender": {"type": "String"}
7    }
8  }
9}

Formatage de Date, Heure et Nombres

Les fichiers ARB prennent en charge le formatage conscient de la locale pour les dates, les heures et les nombres.

Formatage de Date

JSONCopy
1{
2  "lastSeen": "Dernière visite : {date}",
3  "@lastSeen": {
4    "placeholders": {
5      "date": {
6        "type": "DateTime",
7        "format": "yMMMd"
8      }
9    }
10  }
11}

Formats de date courants :

• yMMMd: 12 févr. 2026
• yMMMMd: 12 février 2026
• jm: 17:30
• yMd: 12/02/2026

Utilisation :

DARTCopy
Text(l10n.lastSeen(DateTime.now()));
// Français : "Dernière visite : 12 févr. 2026"

Formatage de Nombres et de Devises

JSONCopy
1{
2  "price": "Prix : {amount}",
3  "@price": {
4    "placeholders": {
5      "amount": {
6        "type": "double",
7        "format": "currency",
8        "optionalParameters": {
9          "symbol": "€",
10          "decimalDigits": 2
11        }
12      }
13    }
14  },
15  "discount": "Économisez {percent}%",
16  "@discount": {
17    "placeholders": {
18      "percent": {
19        "type": "int",
20        "format": "compact"
21      }
22    }
23  }
24}

Utilisation :

DARTCopy
Text(l10n.price(29.99)); // "Prix : 29,99 €"
Text(l10n.discount(15)); // "Économisez 15%"

Organisation de Grands Fichiers de Traduction

À mesure que votre application grandit, la gestion des traductions devient plus complexe. Voici des stratégies pour garder les choses organisées.

Espace de Noms par Fonctionnalité

Au lieu d'un fichier ARB massif, divisez les traductions par fonctionnalité :

lib/l10n/
  ├── app_fr.arb          # Chaînes globales
  ├── auth_fr.arb         # Authentification
  ├── profile_fr.arb      # Profil utilisateur
  ├── settings_fr.arb     # Paramètres
  └── ...

Mettez à jour l10n.yaml :

YAMLCopy
1arb-dir: lib/l10n
2template-arb-file: app_en.arb
3output-localization-file: app_localizations.dart
4synthetic-package: false

Utiliser des Noms de Clés Descriptifs

Mauvais :

JSONCopy
1{
2  "btn1": "Soumettre",
3  "msg2": "Une erreur s'est produite"
4}

Bon :

JSONCopy
1{
2  "submitButton": "Soumettre",
3  "networkErrorMessage": "Une erreur s'est produite"
4}

Ajouter du Contexte avec des Métadonnées

Incluez toujours des descriptions et des exemples :

JSONCopy
1{
2  "tapToEdit": "Appuyez pour modifier",
3  "@tapToEdit": {
4    "description": "Texte d'indication affiché sous les champs modifiables",
5    "context": "Utilisé dans l'écran de profil pour le champ bio"
6  }
7}

Cela aide les traducteurs à comprendre où et comment le texte est utilisé, conduisant à de meilleures traductions.

Rationalisation des Flux de Travail avec IntlPull

La gestion manuelle des fichiers ARB fonctionne pour les petits projets, mais à mesure que votre équipe et le nombre de traductions augmentent, vous avez besoin de meilleurs outils. IntlPull fournit une plateforme complète de gestion de traduction conçue spécifiquement pour les développeurs.

Pourquoi IntlPull pour Flutter ?

Support Natif ARB : IntlPull comprend la structure des fichiers ARB, y compris le format de message ICU, les espaces réservés et les métadonnées.

Éditeur Visuel ICU : Créez des formes plurielles et de genre complexes sans mémoriser la syntaxe ICU.

Intégration CLI : Automatisez la synchronisation des traductions dans votre pipeline CI/CD.

Mises à Jour OTA : Déployez des corrections de traduction instantanément sans soumissions à l'App Store.

Extension Chrome : Modifiez les traductions directement dans votre application en cours d'exécution.

Configuration d'IntlPull CLI

Installez le CLI globalement :

TerminalCopy
npm install -g @intlpullhq/cli

Initialisez dans votre projet Flutter :

TerminalCopy
cd my_flutter_app
intlpull init --framework flutter

Le CLI détecte automatiquement vos fichiers ARB et crée un fichier de configuration :

JSONCopy
1{
2  "projectId": "votre-id-projet",
3  "apiKey": "ip_live_...",
4  "framework": "flutter",
5  "sourcePath": "lib/l10n",
6  "format": "arb",
7  "languages": ["en", "es", "fr", "de"],
8  "defaultLanguage": "en"
9}

Push et Pull des Traductions

Téléchargez vos fichiers ARB existants :

TerminalCopy
intlpull push

Téléchargez les dernières traductions :

TerminalCopy
intlpull pull

Surveillez les changements pendant le développement :

TerminalCopy
intlpull watch

Cette commande synchronise les traductions en temps réel pendant que votre équipe effectue des mises à jour dans le tableau de bord IntlPull.

Édition Visuelle des Traductions

Le tableau de bord IntlPull offre une expérience d'édition enrichie :

• Voir toutes les langues côte à côte
• Éditeur visuel ICU pour les pluriels et les formes de genre
• Contexte de capture d'écran pour chaque traduction
• Fils de commentaires pour les questions des traducteurs
• Suggestions de mémoire de traduction
• Traduction alimentée par IA avec conscience du contexte

Extraction Automatisée de Chaînes

IntlPull peut scanner votre code Dart et extraire les chaînes codées en dur :

TerminalCopy
intlpull scan --auto-wrap

Avant :

DARTCopy
Text('Bienvenue dans notre application')

Après :

DARTCopy
Text(AppLocalizations.of(context)!.welcomeToOurApp)

Le CLI ajoute automatiquement la nouvelle clé à vos fichiers ARB.

Mises à Jour de Traduction OTA

L'une des fonctionnalités les plus puissantes d'IntlPull est les mises à jour Over-The-Air (OTA). Corrigez les fautes de frappe et mettez à jour les traductions sans passer par le processus de révision de l'App Store.

Ajoutez le package OTA :

TerminalCopy
flutter pub add intlpull_ota

Initialisez dans votre application :

DARTCopy
1import 'package:intlpull_ota/intlpull_ota.dart';
2
3void main() async {
4  WidgetsFlutterBinding.ensureInitialized();
5
6  final ota = IntlPullOTA(
7    projectId: 'votre-id-projet',
8    apiKey: 'ip_live_...',
9    environment: 'production',
10  );
11
12  await ota.initialize();
13
14  runApp(MyApp(ota: ota));
15}

Intégrez avec votre localisation :

DARTCopy
1class MyApp extends StatelessWidget {
2  final IntlPullOTA ota;
3  const MyApp({required this.ota, super.key});
4
5  @override
6  Widget build(BuildContext context) {
7    return OTAProvider(
8      ota: ota,
9      child: MaterialApp(
10        localizationsDelegates: [
11          OTALocalizationsDelegate(ota),
12          AppLocalizations.delegate,
13          GlobalMaterialLocalizations.delegate,
14          GlobalWidgetsLocalizations.delegate,
15        ],
16        supportedLocales: const [
17          Locale('en'),
18          Locale('es'),
19          Locale('fr'),
20        ],
21        home: const HomeScreen(),
22      ),
23    );
24  }
25}

Maintenant, lorsque vous publiez des mises à jour depuis le CLI :

TerminalCopy
intlpull publish --version 1.2.0 --message "Correction de la faute de frappe du bouton de paiement"

Tous les utilisateurs reçoivent la mise à jour lors de leur prochain lancement d'application. Pas de soumission à l'App Store, pas d'attente de révision, pas de forcer les utilisateurs à mettre à jour.

Intégration CI/CD

Ajoutez la validation des traductions à votre pipeline CI :

YAMLCopy
1# .github/workflows/ci.yml
2name: CI
3
4on: [push, pull_request]
5
6jobs:
7  validate-translations:
8    runs-on: ubuntu-latest
9    steps:
10      - uses: actions/checkout@v3
11      
12      - name: Configurer Node
13        uses: actions/setup-node@v3
14        with:
15          node-version: '18'
16      
17      - name: Installer IntlPull CLI
18        run: npm install -g @intlpullhq/cli
19      
20      - name: Valider les Traductions
21        env:
22          INTLPULL_API_KEY: ${{ secrets.INTLPULL_API_KEY }}
23        run: |
24          intlpull validate --missing --unused --fail-on-error
25      
26      - name: Télécharger les Dernières Traductions
27        run: intlpull pull
28      
29      - name: Générer les Localisations
30        run: flutter gen-l10n

Cela garantit :

• Aucune traduction manquante dans aucune langue
• Aucune clé inutilisée encombrant vos fichiers ARB
• Les dernières traductions sont toujours incluses dans les builds

Test de Votre Internationalisation

Des tests appropriés garantissent que votre application fonctionne correctement dans toutes les langues prises en charge.

Tests Unitaires pour les Traductions

Testez que les traductions se chargent correctement :

DARTCopy
1import 'package:flutter_test/flutter_test.dart';
2import 'package:flutter_gen/gen_l10n/app_localizations.dart';
3
4void main() {
5  test('Les traductions françaises se chargent', () async {
6    final localizations = await AppLocalizations.delegate.load(
7      const Locale('fr'),
8    );
9    
10    expect(localizations.appTitle, 'Mon Application Géniale');
11    expect(localizations.greeting('Alice'), 'Bonjour, Alice !');
12  });
13
14  test('Les formes plurielles fonctionnent correctement', () async {
15    final localizations = await AppLocalizations.delegate.load(
16      const Locale('fr'),
17    );
18    
19    expect(localizations.itemCount(0), 'Aucun article');
20    expect(localizations.itemCount(1), 'Un article');
21    expect(localizations.itemCount(5), '5 articles');
22  });
23}

Tests de Widget

Testez que votre UI affiche correctement les traductions :

DARTCopy
1testWidgets('L'écran d'accueil affiche le titre traduit', (tester) async {
2  await tester.pumpWidget(
3    MaterialApp(
4      locale: const Locale('fr'),
5      localizationsDelegates: const [
6        AppLocalizations.delegate,
7        GlobalMaterialLocalizations.delegate,
8        GlobalWidgetsLocalizations.delegate,
9      ],
10      supportedLocales: const [Locale('fr')],
11      home: const HomeScreen(),
12    ),
13  );
14
15  expect(find.text('Mon Application Géniale'), findsOneWidget);
16});

Meilleures Pratiques et Erreurs Courantes

À Faire : Utiliser des Clés Descriptives

Les clés doivent décrire le contenu, pas l'emplacement :

Mauvais :

JSONCopy
1{
2  "homeScreen_title": "Bienvenue",
3  "screen2_button1": "Soumettre"
4}

Bon :

JSONCopy
1{
2  "welcomeTitle": "Bienvenue",
3  "submitButton": "Soumettre"
4}

À Faire : Fournir du Contexte

Ajoutez toujours des descriptions et des exemples :

JSONCopy
1{
2  "save": "Enregistrer",
3  "@save": {
4    "description": "Texte du bouton pour enregistrer les modifications du profil utilisateur",
5    "context": "Écran d'édition de profil"
6  }
7}

À Ne Pas Faire : Concaténer les Traductions

Mauvais :

DARTCopy
Text(l10n.hello + ' ' + userName + ' !');

Bon :

JSONCopy
{
  "greeting": "Bonjour, {name} !"
}

DARTCopy
Text(l10n.greeting(userName));

Différentes langues ont des ordres de mots différents, donc la concaténation casse les traductions.

À Ne Pas Faire : Réutiliser les Clés pour Différents Contextes

Mauvais :

JSONCopy
{
  "delete": "Supprimer"
}

Utilisé à la fois pour les boutons "Supprimer le Compte" et "Supprimer le Message".

Bon :

JSONCopy
1{
2  "deleteAccount": "Supprimer le Compte",
3  "deleteMessage": "Supprimer le Message"
4}

Le contexte compte pour une traduction précise.

Liste de Vérification de Production

Avant de lancer votre application internationalisée :

• Tous les fichiers ARB contiennent les mêmes clés
• Les métadonnées incluent des descriptions pour toutes les chaînes
• Formes plurielles testées pour toutes les langues
• Formats de date/heure vérifiés par locale
• Formats de nombre/devise testés
• Dispositions RTL testées (si support arabe/hébreu)
• Mémoire de traduction remplie dans IntlPull
• CI/CD valide les traductions avant fusion
• Mises à jour OTA configurées pour la production
• Équipe formée au flux de travail d'édition de fichiers ARB
• Locale de secours configurée (généralement anglais)

Conclusion

Internationaliser votre application Flutter avec des fichiers ARB fournit une base robuste et sûre en termes de types pour atteindre des audiences mondiales. En suivant les modèles de ce tutoriel, vous éviterez les pièges courants et construirez un système de localisation maintenable qui évolue avec votre application.

Points clés à retenir :

1. Les fichiers ARB fournissent des métadonnées enrichies et un support de format de message ICU
2. La génération de code de Flutter assure la sécurité des types et détecte les erreurs tôt
3. Une organisation et des conventions de nommage appropriées maintiennent les traductions gérables
4. IntlPull rationalise la collaboration en équipe et les flux de travail de déploiement
5. Les mises à jour OTA éliminent le goulot d'étranglement de l'App Store pour les corrections de traduction
6. Des tests complets garantissent la qualité dans toutes les langues prises en charge

Prêt à rationaliser votre flux de travail de localisation Flutter ? Essayez IntlPull gratuitement avec 100 clés et 3 langues, ou explorez notre documentation Flutter pour des modèles d'intégration avancés. Vos utilisateurs mondiaux vous remercieront pour l'attention portée aux détails linguistiques, et votre équipe de développement appréciera le temps gagné.