Comment localiser l'application dans Flutter

La localisation de votre application est une exigence importante si vous souhaitez que votre application soit utilisée dans le monde entier. Flutter fournit un moyen simple de localiser votre application à l'aide de fichiers arb Cet article explique comment localiser votre application dans Flutter . Veuillez noter que cet article est basé sur Flutter 2.0.1 donc si vous utilisez des versions plus anciennes, la manière expliquée dans cet article peut ne pas fonctionner.

1. Ajoutez des dépendances à pubspec.yaml

Ajouter des dépendances à pubspec.yaml

1dependencies:
2  flutter:
3    sdk: flutter
4  flutter_localizations:
5    sdk: flutter
6  intl: ^0.16.1

Ces packages sont nécessaires pour la localisation.

2. Ajoutez generate indicateur de génération à pubspec.yaml

1flutter:
2  generate: true

Cet indicateur permet à Flutter de générer la AppLocalizations partir de arb , ce qui est nécessaire pour la localisation.

3. Créez l10n.yaml

1arb-dir: lib/l10n
2template-arb-file: app_en.arb
3output-localization-file: app_localizations.dart

Ce fichier fournit des configurations lors de la génération automatique de la classe AppLocalizations arb-dir spécifie le répertoire des fichiers arb template-arb-file spécifie le arb utilisé comme modèle. output-localization-file spécifie le nom du fichier de classe AppLocalizations

4. Créez un fichier arb

Créez le arb dans le répertoire spécifié dans l10n.yaml. arb fichier arb est au format json et vous pouvez fournir des traductions pour chaque clé. Le kay est appelé resource id et la valeur est appelée resource value . Par exemple, l'exemple ci-dessous fournit une traduction en anglais pour l' resource id helloWorld .

1{
2  "helloWorld": "Hello World!",
3  "@helloWorld": {
4    "description": "The conventional newborn programmer greeting"
5  }
6}

Vous pouvez fournir l'explication détaillée de l' resource id en ajoutant le @ à l' resource id . Dans l'exemple ci-dessus, @helloWorld décrit les informations détaillées de l' resource id helloWorld . Ensuite, vous pouvez créer d'autres arb en fonction de la langue prise en charge par votre application. Par exemple, si vous prenez en charge la langue japonaise, vous pouvez ajouter le app_ja.arb comme ci-dessous.

1{
2  "helloWorld": "こんにちは世界!"
3}

arb fichier arb fournit diverses expressions utiles et ici je vais en présenter une, placeholder . Placeholder réservé vous permet de transmettre des paramètres à resource value .

1"pricePerMonth": "{price} per month",
2"@pricePerMonth": {
3  "placeholders": {
4    "price": {
5      "example": "123.45",
6      "description": "price"
7    }
8  }
9}

Vous pouvez transmettre n'importe quel paramètre dans resource value comme {price} . Ensuite, écrivez la description du paramètre dans les placeholders sous @resource id . Une fois que vous avez créé un placeholder et généré AppLocalizations classe AppLocalizations, vous pouvez l'appeler à partir de votre application comme ci-dessous.

1AppLocalizations.of(context).pricePerMonth(100.0);

5. Créer automatiquement le fichier de classe AppLocalizations

Si vous appelez flutter pub get AppLocalizations votre application, le fichier de classe AppLocalizations sera automatiquement généré. Le nom du fichier est spécifié dans le fichier l10n.yaml. Dans ce cas, le fichier serait .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . Le répertoire est déterminé par le système.

Au fait, vous n'avez pas besoin de valider ce fichier dans git. Ce fichier est toujours généré lorsque vous créez votre application et reflète le dernier contenu du fichier arb

6. Matériel d'appel / Widget / CupertinoApp

Définissez les paramètres localizationsDelegates et supportedLocales N'oubliez pas d'importer la classe AppLocalizations

1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2 
3@override
4Widget build(BuildContext context) {
5  return MaterialApp(
6    localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
7    supportedLocales: AppLocalizations.supportedLocales, // Add this line
8    home: // ...
9  );
10}

7. Appeler le texte traduit

Vous pouvez utiliser du texte localisé comme dans l'exemple ci-dessous. La syntaxe est similaire à AppLocalizations.of(context).<resource id>.

1Text(AppLocalizations.of(context).helloWorld);

Localisations pour la date

Vous pouvez également afficher la date localisée comme ci-dessous.

1Locale locale = Localizations.localeOf(context);
2DateFormat.yMd(locale.toString()).format(DateTime.now());

Références

• Flutter.dev
• Spécification ARB