Flutter internationalisation

De nos jours, les applications mobiles sont utilisées par des clients de différents
pays et, par conséquent, les applications doivent afficher le contenu dans
différentes langues. Permettre à une application de fonctionner dans plusieurs
langues s'appelle internationaliser l'application.
Pour qu'une application fonctionne dans différentes langues, elle doit d'abord
trouver les paramètres régionaux actuels du système dans lequel l'application
s'exécute, puis afficher son contenu dans ces paramètres régionaux particuliers.
Ce processus s'appelle Localisation.

Le framework Flutter fournit trois classes de base pour la localisation et des

classes utilitaires étendues dérivées des classes de base pour localiser une
application.
Les classes de base sont les suivantes -
Locale - Locale est une classe utilisée pour identifier la langue de l'utilisateur.
Par exemple, en-us identifie l'anglais américain et peut être créé en tant que.
Locale en_locale = Locale('en', 'US')

Ici, le premier argument est le code de la langue et le second le code du pays.

Un autre exemple de création de paramètres régionaux en Français canadien (fr-
CA) est le suivant :

Locale fr_locale = Locale('fr', 'CA')

Localisations - Localisations est un widget générique utilisé pour définir les

paramètres régionaux et les ressources localisées de son enfant.
class CustomLocalizations {
CustomLocalizations(this.locale);
final Locale locale;
static CustomLocalizations? of(BuildContext context) {
return Localizations.of<CustomLocalizations>(context,
CustomLocalizations);
}
static Map<String, Map<String, String>> _resources = {
'en': {
'title': 'Demo',
 'message': 'Hello World'
},
'fr': {
'title': 'Démo',
'message': 'Bonjour le monde',
},
};
String get title {
return _resources[locale.languageCode]?['title'] ?? "";
}
String get message {
return _resources[locale.languageCode]?['message'] ?? "";
}
}}

==> Ici, CustomLocalizations est une nouvelle classe personnalisée créée

spécifiquement pour obtenir certains contenus localisés (titre et message) pour
le widget. La methode “of” utilise la classe Localizations pour renvoyer la
nouvelle classe CustomLocalizations.
LocalizationsDelegate<T> - LocalizationsDelegate<T> est une classe de fabrique
à travers laquelle le widget Localisations est chargé. Il a trois méthodes
surmontables -
isSupported - Accepte un paramètre régional et indique si le paramètre
régional spécifié est pris en charge ou non.
@override
bool isSupported(Locale locale) =>
['en','fr'].contains(locale.languageCode);

Ici, le délégué fonctionne uniquement pour les paramètres régionaux en et fr.

load - Accepte une locale et commence à charger les ressources pour la locale
spécifiée.
@override
Future<CustomLocalizations> load(Locale locale) {
return
SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}
 Ici, la méthode load renvoie CustomLocalizations. Les
CustomLocalizations retournés peuvent être utilisés pour obtenir des
valeurs de titre et de message en anglais et en francais
• shouldReload - Spécifie si le rechargement de CustomLocalizations
est nécessaire lorsque son widget Localizations est reconstruit.
@override
bool shouldReload(CustomLocalizationsDelegate old) => false;

• Le code complet de CustomLocalizationDelegate est le suivant :

class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
const CustomLocalizationsDelegate();

@override
bool isSupported(Locale locale) => ['en',
'fr'].contains(locale.languageCode);

@override
Future<CustomLocalizations> load(Locale locale) {
return
SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}
@override bool shouldReload(CustomLocalizationsDelegate old) => false;
}

En général, les applications Flutter sont basées sur deux widgets de niveau
racine, MaterialApp ou WidgetsApp. Flutter fournit une localisation prête à
l'emploi pour les deux widgets et ce sont MaterialLocalizations et
WidgetsLocaliations. De plus, Flutter fournit également des délégués pour
charger MaterialLocalizations et WidgetsLocaliations et ils sont respectivement
GlobalMaterialLocalizations.delegate et GlobalWidgetsLocalizations.delegate.

Créons une application simple compatible avec l'internationalisation pour tester

et comprendre le concept.
Créez une nouvelle application flutter, flutter_localization_app.
Flutter prend en charge l'internationalisation à l'aide du package flutter exclusif,
flutter_localizations. L'idée est de séparer le contenu localisé du SDK principal.
Ouvrez le pubspec.yaml et ajoutez le code ci-dessous pour activer le package
d'internationalisation -

dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter

Cliquez sur l'option Obtenir les dépendances. Le studio Android obtiendra le

package sur Internet et le configurera correctement pour l'application.
Importez le package flutter_localizations dans le main.dart comme suit :

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

Ici, le but de SynchronousFuture est de charger les localisations personnalisées de

manière synchrone.

Créez une localisation personnalisée et son délégué correspondant comme spécifié

ci-dessous dans le fichier main.dart
class CustomLocalizations {
CustomLocalizations(this.locale);
final Locale locale;
static CustomLocalizations? of(BuildContext context) {
return Localizations.of<CustomLocalizations>(context,
CustomLocalizations);
}
static Map<String, Map<String, String>> _resources = {
'en': {
'title': 'Demo',
'message': 'Hello World'
},
'fr': {
 'title': 'Démo',
'message': 'Bonjour le monde',
},
};
String get title {
return _resources[locale.languageCode]?['title'] ?? "";
}
String get message {
return _resources[locale.languageCode]?['message'] ?? "";
}
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
const CustomLocalizationsDelegate();

@override
bool isSupported(Locale locale) => ['en',
'fr'].contains(locale.languageCode);

@override
Future<CustomLocalizations> load(Locale locale) {
return
SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}
@override bool shouldReload(CustomLocalizationsDelegate old) => false;
}

Ici, CustomLocalizations est créé pour prendre en charge la localisation du titre

et du message dans l'application et CustomLocalizationsDelegate est utilisé
pour charger CustomLocalizations.
Ajoutez des délégués pour MaterialApp, WidgetsApp et CustomLocalization à
l'aide des propriétés MaterialApp, localizationsDelegates et supportedLocales
comme spécifié ci-dessous
class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
const CustomLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('fr', ''),
],
 title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

Utilisez la méthode CustomLocalizations pour obtenir la valeur localisée du titre

et du message et utilisez-la à l'endroit approprié, comme indiqué ci-dessous
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(CustomLocalizations .of(context)
.title), ),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text( CustomLocalizations .of(context) .message, ),
],
),
),
);
}
}

• Ici, nous avons modifié la classe MyHomePage de StatefulWidget à

StatelessWidget pour des raisons de simplicité et utilisé les
CustomLocalizations pour obtenir le titre et le message.
• Compilez et exécutez l'application. L'application affichera son contenu en
anglais.
• Fermez l'application. Accédez à Paramètres → Système → Langues et saisie
→ Langues* .
• Cliquez sur Ajouter une option de langue et sélectionnez Français. Cela
installera la langue française, puis la listera comme l'une des options.
• Sélectionnez le français et déplacez-le au-dessus de l'anglais. Cela définira le
Français comme première langue et tout sera changé en texte Français.
• Relancez maintenant l'application d'internationalisation et vous verrez le titre
et le message en francais.
• Nous pouvons rétablir la langue en anglais en déplaçant l'option anglaise au-
dessus de l'option Français dans le paramètre.
• Le résultat de l'application (en français) est affiché dans la capture d'écran ci-
dessous :