Comment faire une application multilingue avec Flutter ?

Installation du package Flutter Localization

La première chose à faire pour créer une application multilingue avec Flutter est d’ajouter le package flutter_localization à votre projet. Pour le télécharger dans sa dernière version, vous pouvez soit :

Ajouter cette ligne à la main, dans les dépendances de votre fichier pubspec.yaml :

flutter_localization: ^0.2.2

Ou, lancer la commande :

flutter pub add flutter_localization

Une fois cela fait, pensez bien à ajouter la ligne d’importation, en haut de tous les fichiers dart ou vous aurez besoin d’utiliser ce package :

import 'package:flutter_localization/flutter_localization.dart';

Mise en place des fichiers de langue

Une fois le package flutter_localization ajouté à votre projet, la suite va être de créer les fichiers qui vont contenir tous vos textes dans les différentes langues que vous allez implémenter. Pour cela, commencez par créer un dossier l10n/, dans votre dossier lib. Le chemin pour y accéder sera ainsi :

lib/l10n/

Dans celui, ajoutez autant de fichiers .arb que vous avez de langues à gérer et nommez-les, selon ce standard app_xx.arb. Si par exemple vous avez le français, l’anglais et l’espagnol à gérer, vous aurez trois fichiers :

app_en.arb (Anglais)
app_es.arb (Espagnol)
app_fr.arb (Français)

Puis, stockez chacun de vos textes avec la même clé pour chaque fichier. Par exemple, voici ma version anglaise (app_en.arb) :

{
  "textOne": "Hello",
  "textTwo": "Welcome",
  "textThree": "Thank you for using our app!"
}

Et voici mon fichier français (app_fr.arb) :

{
  "textOne": "Bonjour",
  "textTwo": "Bienvenue",
  "textThree": "Merci d'utiliser notre application !"
}

Pour finir, générez les commandes dont vous aurez besoin pour utiliser ces textes dans vos fichiers dart, avec la commande :

flutter gen-l10n

Utiliser les textes et changer la langue de votre application

Vos textes en différentes langues sont prêts, ne reste plus qu’à les utiliser dans votre application et adapter la langue selon ce qui a été choisi par l’utilisateur. Voici comment faire :

Initialisation de la langue

Avant de pouvoir utiliser vos textes, vous allez devoir configurer votre application Flutter pour qu’elle prenne en charge plusieurs langues et permette de changer la langue à la volée.

Voici un exemple, de comment mettre en place cette configuration dans un widget (Normalement, le premier de votre arbre) :

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _currentLocale = Locale('en');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      locale: _currentLocale,
      supportedLocales: [
        Locale('en'), // Anglais
        Locale('fr'), // Français
        Locale('es'), // Espagnol
      ],
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MainPage(),
    );
  }
}

Attention, tous vos widgets subissant des changements de textes, devront être de type Stateful. En effet, leur état doit pouvoir changer à chaque fois que l’utilisateur va modifier la langue.

Utiliser un texte

La version multilingue est bien initialisée dans le widget le plus haut de votre arbre. Vous allez donc maintenant pouvoir placer vos textes là où vous en avez besoin dans votre application, simple en plaçant cette ligne dans un widget Text, sans guillemets :

final localizations = AppLocalizations.of(context); // Ligne pour créer une instance de AppLocalizations

Text(localizations.textTwo) //Ce texte prendra la valeur de textTwo, dans la langue actuellement selectionnée.

Changer le langue de l’application

Enfin, ne reste plus qu’à implémenter une fonction pour changer la langue de votre application en un clic. Une simple fonction void, prenant comme argument la nouvelle langue choisie et reconstruisant l’application avec un setState, devrait suffire :

void _changeLanguage(String languageCode) {
    setState(() {
      _currentLocale = Locale(languageCode);
    });
  }

Code complet

Voici à quoi ressemble le code complet :

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _currentLocale = Locale('en');

  void _changeLanguage(String languageCode) {
    setState(() {
      _currentLocale = Locale(languageCode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      locale: _currentLocale,
      supportedLocales: [
        Locale('en'), // Anglais
        Locale('fr'), // Français
        Locale('es'), // Espagnol
      ],
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MainPage(changeLanguage: _changeLanguage),
    );
  }
}

class MainPage extends StatelessWidget {
  final Function(String) changeLanguage;

  MainPage({required this.changeLanguage});

  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context);
    return Scaffold(
      appBar: AppBar(title: Text(localizations.textTwo)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(localizations.textThree),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => changeLanguage('fr'),
              child: Text("Français"),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage('en'),
              child: Text("English"),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage('es'),
              child: Text("Español"),
            ),
          ],
        ),
      ),
    );
  }
}

Résoudre l’erreur « Target of URI doesn’t exist: ‘package:flutter_gen/gen_l10n/app_localizations.dart’. »

Si après avoir mis Visual Studio ou votre package à jour, vous avez une erreur Error setting-up flutter_localizations package "Target of URI doesn't exist: 'package:flutter_gen/gen_l10n/app_localizations.dart'." , vous pouvez la résoudre simplement en relançant flutter gen-l10n dans le terminal.