Aprende a configurar múltiples idiomas en una aplicación Flutter

Los desarrolladores de aplicaciones móviles enfrentamos una constante necesidad de llegar a un público global. Una de las maneras más efectivas de hacerlo es mediante la implementación de múltiples idiomas en su aplicación. Al ofrecer la opción de elegir un idioma, se asegura de que los usuarios se sientan cómodos y entiendan la aplicación.

Además, al tener una aplicación con múltiples idiomas, se aumenta la posibilidad de llegar a un público más amplio, lo que puede traducirse en un aumento en la descarga y el uso de la aplicación. Por lo tanto, la implementación de idiomas múltiples en una aplicación móvil es esencial para atraer y retener a usuarios de diferentes partes del mundo.

En este artículo, explicaremos cómo usar uno de los paquetes de Flutter más populares en el proceso de adaptar múltiples idiomas a una aplicación.

¿Cómo configurar idiomas en una aplicación de Flutter con Easy Localization?

Una de las soluciones más utilizadas para poder garantizar múltiples idiomas en las aplicaciones, es el empleo del paquete Easy Localization. Este paquete simplifica el proceso de internacionalización, admitiendo además, traducciones de idiomas, el manejo del género, dirección de texto y pluralización.

Entre las funcionalidades que nos brinda encontramos:

• Fáciles traducciones para muchos idiomas.

• Posibilidad de cargar traducciones desde ficheros JSON, CSV, Yaml, XML usando Easy Localization Loader.

• Mantiene los cambios de idiomas almacenados.

• Admite plural, género, anidamiento, RTL.

• Redirección de claves de traducción a idiomas de reserva.

• Widget de error para traducciones faltantes.

• Métodos de extensión en Text y BuildContext.

• Generación de código para archivos y claves de localización.

• Verificación de valores nulos.

Implementación del paquete Easy Localization

Tradicionalmente este paquete se configura de la siguiente forma:

Creamos una carpeta translations dentro de assets y almacenamos las traducciones como se muestra:

assets
└── translations
    ├── {código de Idioma}.{ext}                  
    └── {código de Idioma}-{código de País}.{ext}  

Para este caso hemos creado dos ficheros es.json y en.json, donde se almacenan las traducciones para los idiomas Español e Inglés.

assets
└── translations
    ├── es.json
    └── en.json

Ejemplo del fichero es.json:

{
 "hello": "Hola",
 "home": "Inicio",
 "english": "Inglés",
 "spanish": "Español"
  ...
}

Seguidamente es necesario declarar la nueva carpeta en el fichero pubspec.yaml para que pueda ser leída.

flutter:
  assets:
    - assets/translations/

Como detalle adicional, para que la traducción funcione en iOS, debe agregar las configuraciones de idiomas admitidas en el fichero ios/Runner/Info.plist como se describe.

<key>CFBundleLocalizations</key>
<array>
	<string>es</string>
	<string>en</string>
</array>

Luego se agrega el widget EasyLocalization en la clase main como se presenta. Donde supportedLocales representa la lista de idiomas, path la ubicación de los ficheros de idiomas, startLocale establece el idioma inicial cuando no existe ninguno establecido, fallbackLocale se emplea para que en caso de que no exista una traducción disponible utilizar la del idioma que se configure, useFallbackTranslations habilitación del idioma de reserva.

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await EasyLocalization.ensureInitialized();

   runApp(
     EasyLocalization(
       supportedLocales: const [
         Locale('es'),
         Locale('en'),
       ],
       path: 'assets/translations',
       startLocale: const Locale('es'),
       fallbackLocale: const Locale('es'),
       useFallbackTranslations: true,
       child: const OctaApp(),
     ),
   );
}

Adicionalmente, debemos agregar los nuevos parámetros localizationsDelegates, supportedLocales, locale, a la clase MaterialApp para un correcto funcionamiento.

class OctaApp extends StatelessWidget {
 const OctaApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: AppConstants.appTitle,
     theme: AppTheme.lightTheme,
     onGenerateRoute: AppRouter.generateRoute,   
     localizationsDelegates: context.localizationDelegates, //<--
     supportedLocales: context.supportedLocales, //<--
     locale: context.locale, //<--
     home: const SplashScreen(),
   );
 }
}

Dentro de la aplicación se puede emplear el método tr() para llamar a las traducciones en base a los idiomas, por ejemplo:

Text(tr("welcome"))

Si queremos cambiar el idioma de la aplicación empleamos la función setLocale:

context.setLocale(Locale('en'));

este nuevo idioma se almacena y se cargan automáticamente todas las traducciones disponibles.

Para más información puede consultar la documentación oficial del paquete en Github.

¡No te pierdas más artículos sobre el desarrollo de aplicaciones Flutter! ¡Síguenos y mantente actualizado con todo lo nuevo que tenemos preparado para ti en nuestro blog! En próximos artículos conoceremos cómo implementar múltiples idiomas en una aplicación Flutter con Remote Config.