Internacionalización y localización en Flutter

Cada vez que las aplicaciones van creciendo o se empiezan a expandir a otros países y pueden ser idiomas diferentes. Es allí donde empieza a tener relevancia adoptar una estrategía de internacionalización y localización que nos ayude a resolver esta problemática de la mejor manera.

¿Qué es internacionalización?

Podemos entender por internacionalización la forma en que un producto (en este caso nuestra App) pueda ser usada en diferentes países sin importar el idioma que tengan cada uno. En otras palabras, podría decirse que nuestra app cuenta con traducción para diferentes países. También se conoce con las siglas (l18n).

La internacionalización se apoya en la localización (l10n) para poder identificar en qué país se encuentra y qué configuración debe aplicar.

Para este caso en particular nos centraremos en las opciones que nos da Flutter para resolver el tema de internacionalización. Tenemos varias opciones pero esta vez trabajaremos utilizando flutter_localizations e intl.

Prerrequisitos

• Tener instalado y funcionado Flutter (guía).
• Tener instalado VSCode (documentación oficial).

Crear proyecto en Github

Crear App Flutter

Podemos revisar este ejemplo para la creación de una app Flutter.

Debemos ejecutar los siguientes comandos desde la terminal:

flutter create flutter_internationazation
cd flutter_internationazation

En caso de tener varios usuarios de github en la misma máquina, puede ejecutar los siguientes comandos para no tener problemas.

git config user.name “usuario”
git config user.email “correo”
git config --local credential.helper ""

git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/jaimetellezb/flutter-internationalization.git
git push -u origin master

Al intentar hacer push nos va a salir una ventana para ingresar usuario y clave, aquí podemos ingresar con un token que tengamos configurado en github.

Para crear un “Personal access token” simplemente es ingresar a github e ir a https://github.com/settings/tokens , allí crear uno nuevo, copiarlo y ese será la clave para hacer push.

Configuración en Flutter

Luego de tener nuestra app Flutter creada y versionada en github, seguimos con la configuración para poder implementar la internacionalización.

1. Asegurarnos que los paquetes necesarios estén instalados correctamente en el archivo pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

flutter:
  generate: true

2. Creamos el archivo l10n.yaml en la raíz del proyecto con la siguiente información:

– arb-dir especifica el directorio donde se van a guardar los archivos de configuración para las traducciones.

– template-arb-file es el template que define todos los mensajes que va manejar la aplicación.

– output-localization-file define la clase dart que se genera para las traducciones el cual al compilar se crea en .dart_tool/flutter_gen/gen_l10n.

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

3. Creamos el archivo ARB app_en.arb, en el directorio lib/l10n en caso de no existir crearlo y quedar así lib/l10n/app_en.arb.

4. Colocamos dentro del archivo app_en.arb una estructura como la siguiente:

{
    "appTitle": "Internationalizations Sample App",
    "pushContentText": "You have pushed the button this many times:"
}

5. Podemos agregar más archivos ARB para traducción a otro idioma, por ejemplo español lib/l10n/app_es.arb.

{
    "appTitle": "Ejemplo de Internacionalización App",
    "pushContentText": "Has pulsado el botón esta cantidad de veces:"
}

6. Ahora, ejecutemos flutter gen-l10n en la terminal para que se generen los archivos transpilados a DART. Los archivos generados quedan en el directorio .dart_tool/flutter_gen/gen_l10n.

NOTA: Cada que se agregue un nuevo mensaje es necesario volver a ejecutar el comando flutter gen-l10n.

7. Aún falta realizar la última configuración en el archivo main.dart, podemos realizar la configuración de cualquiera de las siguientes maneras:

• Agregar AppLocalizations.delegate dentro de la propiedad localizationsDelegates de MaterialApp.

return const MaterialApp(
    title: 'Flutter App',
    localizationsDelegates: [
      AppLocalizations.delegate, // Agregar esta línea
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    supportedLocales: [
      Locale('en', ''), 
      Locale('es', ''), 
    ],
    home: MyHomePage(),
  );

• También puede usar los localizationsDelegates y supportedLocales generados en l10n, así evita colocarlos manualmente, como en el paso anterior.

return MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: const MyHomePage(),
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  locale: const Locale('en', ''),// cambiar a Locale('es', '') para prueba Español
);

8. Para utilizar los mensajes creados, se puede hacer de la siguiente manera:

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

9. Si trabajan con Visual studio code, recomendable instalar el plugin.

Flutter Intl – Visual Studio Marketplace
VS Code extension to create a binding between your translations from .arb files and your Flutter app. It generates…marketplace.visualstudio.com

Demostración

Con esto ya podemos configurar nuestras apps Flutter para diferentes idiomas.

Aquí les dejo el código fuente en Github.

Conclusión

Como pudimos ver, no es un proceso muy difícil de realizar pero aporta mucho a nuestras aplicaciones Flutter.
¡Muchas gracias!, espero les sea de utilidad.

Fuentes

Internationalizing Flutter apps
What you’ll learn How to track the device’s locale (the user’s preferred language). How to manage locale-specific app…docs.flutter.dev