Cómo localizar una aplicación en Flutter

La localización de su aplicación es un requisito importante si desea que su aplicación se utilice en todo el mundo. Flutter proporciona una forma sencilla de localizar su aplicación mediante el uso de archivos arb Este artículo explicará cómo localizar su aplicación en Flutter . Tenga en cuenta que este artículo se basa en Flutter 2.0.1, por lo que si está utilizando versiones anteriores, es posible que la forma explicada en este artículo no funcione.

1. Agrega dependencias a pubspec.yaml

Agrega dependencias a pubspec.yaml

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

Estos paquetes son necesarios para la localización.

2. Agregue la marca de generate

1flutter:
2  generate: true

Esta bandera permite a Flutter generar la AppLocalizations partir de arb que es necesaria para la localización.

3. Cree l10n.yaml

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

Este archivo proporciona configuraciones al generar automáticamente la clase AppLocalizations arb-dir especifica el directorio para los archivos arb template-arb-file especifica el arb usado como plantilla. output-localization-file especifica el nombre del archivo de clase AppLocalizations

4. Cree un archivo arb

Cree el arb en el directorio especificado en l10n.yaml. arb archivo arb tiene formato json y puede proporcionar traducciones para cada clave. El kay se llama resource id y el valor se llama resource value . Por ejemplo, el siguiente ejemplo proporciona una traducción al inglés para el resource id helloWorld .

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

Puede proporcionar una explicación detallada del resource id del recurso agregando el prefijo @ resource id . En el ejemplo anterior, @helloWorld describe la información detallada de la resource id helloWorld . Luego, puede crear otros arb acuerdo con el idioma que admita su aplicación. Por ejemplo, si admite el idioma japonés, puede agregar el app_ja.arb como se muestra a continuación.

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

arb archivo arb proporciona varias expresiones útiles y aquí presentaré una de ellas, placeholder . Placeholder permite pasar parámetros al resource value .

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

Puede pasar cualquier parámetro en el resource value como {price} . Luego, escriba la descripción del parámetro en los placeholders de posición debajo de @resource id . Una vez que crea un placeholder y genera AppLocalizations clase AppLocalizations, puede llamarlo desde su aplicación como se muestra a continuación.

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

5. Cree automáticamente AppLocalizations archivo de clase AppLocalizations

Si llamas a flutter pub get AppLocalizations tu aplicación, el archivo de clase AppLocalizations se generará automáticamente. El nombre del archivo se especifica en l10n.yaml. En este caso, el archivo sería .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . El directorio lo determina el sistema.

Por cierto, no necesitas enviar este archivo a git. Este archivo siempre se genera cuando crea su aplicación y refleja el contenido arb

6. Material de llamada / Widget / CupertinoApp

Establezca los parámetros localizationsDelegates y supportedLocales No olvide importar la clase 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. Llamar al texto traducido

Puede utilizar texto localizado como el siguiente ejemplo. La sintaxis es como AppLocalizations.of(context).<resource id>.

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

Localizaciones para la fecha

También puede mostrar la fecha localizada como se muestra a continuación.

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

Referencias

• Flutter.dev
• Especificación ARB