Flutter : Créer une application mutlilingues

Vous avez besoin que votre application Flutter soit disponible en plusieurs langues mais vous ne savez pas comment vous y prendre ?
Ne vous inquiétez pas, EL TIGRE vous propose une solution simple et efficace !

 

Au préalable

  • Avoir installé Flutter
  • Avoir des notions de base de Dart et Flutter

 

Mettre en place son application pour supporter plusieurs langues

L’application que nous allons faire est très simple. Elle affichera simplement un texte à l’écran et nous allons changer la langue du téléphone. Nous allons alors voir en temps réel l’application se mettre à jour.

Cette solution se basera sur la librairie « flutter_localizations » native à flutter. Il faudra tout de même la spécifier dans notre fichier pubspec.yaml afin de pouvoir l’utiliser.

Pour commencer nous allons créer le fichier app_local.dart. Celui-ci comportera la classe qui regroupe tous les champs textes qui devront être traduits.

AppLocal est une classe abstraite qui déclare un get du type HomeLocal. La classe HomeLocal définie tous les champs nécessaires au widget Home que nous allons créer plus tard.

Maintenant nous pouvons créer un dossier lib/locales qui contiendra deux fichiers : fr.dart et en.dart

lib/locales/fr.dart

 

lib/locales/en.dart

 

Nous pouvons voir que les deux classes FrLocal et EnLocal étendent la classe abstraite AppLocal. Il est donc nécessaire d’implémenter les surcouches de celles-ci.

Ici notre fameuse fonction get « home » qui retourne une instanciation de HomeLocal.

Créez maintenant un fichier lib/app_localizations.dart

 

Nous créons ici :

  • Une classe AppLocalizations où l’on définit _localizedValues comme étant un Map ayant ses clés du type String et ses valeurs du type AppLocal.
  • La fonction get « lang » qui renvoie l’AppLocal en fonction de la clé du paramètre du type Local passé à la construction de la classe AppLocalizations
  • Et une fonction « of » qui permet de récupérer le widget du type AppLocalizations le plus proche du contexte avec lequel la fonction est appelée.

 

Ajoutons-y la classe AppLocalizationsDelegate qui étant LocalizationsDelegate<AppLocalizations>

N’oubliez pas d’importer :

 

Cette classe est nécessaire lors de la création du widget MaterialApp afin de gérer les langues.

 

Créez maintenant le fichier lib/multilingues.dart qui définira le widget père de l’application

Précisez bien les langues supportées avec le paramètre « supportedLocales » et les langues déléguées. Pour plus d’informations, référez-vous à la documentation officielle.

 

Enfin, créez le fichier lib/screens/home.dart

Ici on récupère les données grâce à la fonction static « of » de notre classe AppLocal et nous les affichons.

Lancez l’application et vous devriez voir la question en français si votre téléphone est en français.

 

Comportement

Avec cette solution le comportement est naturel.

  • Si vous n’avez qu’une seule langue définie
    • Si elle est supportée par l’application, celle-ci sera utilisée.
    • Si elle n’est pas supportée, la première langue définie dans le tableau « supportedLocales » sera utilisée.
  • Si vous avez plusieurs langues définies
    • Si qu’une seule langue est supportée par l’application, celles-ci sera utilisée.
    • Si plusieurs langues sont supportées par l’application, elle utilisera la première langue supportée et classée la plus haute dans vos préférences.
    • Si aucunes n’est supportée, la première langue définie dans le tableau « supportedLocales » sera utilisée.

 

Voir le repo Bitbucket