Flutter, por defecto, sólo proporciona localizaciones para inglés de Estados Unidos. Por lo tanto, si queremos que nuestra aplicación esté localizada en castellano, vamos a tener que indicárselo. Veamos cómo.
Lo primero que debemos hacer es añadir en nuestro fichero pubspec.yaml el paquete flutter_localizations. Lo correcto es que esté justo debajo del sdk:flutter o también podemos instalarlo desde la consola con la siguiente línea de comando: flutter pub add flutter_localizations --sdk=flutter
Nuestro fichero pubspec.yaml debería quedar así:
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter
Esto nos dará acceso a todo lo necesario para continuar internacionalizando nuestra aplicación. Entre estas cosas, el paquete nos da acceso a los delegados que controlan las traducciones necesarias para los widgets de Android o de iOS que utilicemos, así cómo las traducciones de otros widgets genéricos de Flutter.
Estos delegados respectivamente son:
GlobalMaterialLocalizations.delegate GlobalCupertinoLocalizations.delegate GlobalWidgetsLocalizations.delegate
Para usarlos en nuestra aplicación, deberemos añadirlos en el constructor de nuestra MaterialApp como localizationsDelegates
return const MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate ]);
Mas adelante veremos cómo crear nuestro propio delegado para traducir cadenas de textos, pero por ahora, sigamos configurando la aplicación.
Lo siguiente que debemos hacer es indicarle qué idiomas vamos a soportar. Para ello debemos seguir modificando el constructor de nuestra MaterialApp. En el ejemplo, vamos a soportar el español de España e inglés genérico, sin código de país.
return const MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate ], supportedLocales: const [ Locale('es', 'ES'), //Español de españa Locale('en'), //Inglés, cualquier país ],);
Una vez añadidos los idiomas que vamos a soportar, ya podríamos arrancar nuestra aplicación y, por ejemplo, si colocamos un CalendarDatePicker
en nuestra página principal y cambiamos el idioma de nuestro teléfono de Español a Inglés, veremos cómo el primer día de la semana del calendario cambia de lunes a domingo y viceversa.
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ CalendarDatePicker( initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime(2100), onDateChanged: (value) {}), ], ), ); } }
Ahora veamos cómo hacer para traducir nuestras propias cadenas de texto. Como ya hemos dicho, vamos a necesitar crear un delegado. Lo bueno es que, de la parte de «crear el delegado» se va encargar el generador de código de Flutter. Nosotros sólo tenemos que crear un fichero de configuración con formato .yaml, los ficheros de recursos con formato .arb y habilitar el generador de código de Flutter
Comencemos por el fichero de configuración. Este fichero lo colocamos en la raíz del proyecto y, como estamos hablando de localizar nuestra aplicación, lo podemos llamar l10n.yaml.
El contenido del fichero será el siguiente:
l10n.yaml
arb-dir: lib/l10n template-arb-file: strings_es.arb output-localization-file: app_localizations.dart untranslated-messages-file: untranslated.txt
Este sería el contenido básico del fichero de configuración para la generación de nuestro delegado. Hay muchas mas opciones que puedes consultar aquí.
Nuestro siguiente paso es generar los ficheros con las traducciones, como ya hemos visto. Estos ficheros deberán estar en la carpeta lib/l10n. Recordemos que tendremos tantos ficheros como idiomas queramos soportar.
En el fichero de configuración hemos decidido que los ficheros se van a llamar strings<código de idiona>.arb, por lo que en nuestro ejemplo, deberíamos terminar con dos ficheros:
En su forma mas sencilla, el contenido de los ficheros será el siguiente:
strings_en.arb
{
"titleApp": "Traducciones",
"@titleApp": {
"description": "El título de la aplicación"
},
"helloWorld": "Hola Mundo!",
"@helloWorld": {
"description": "El saludo convencional del programador novato."
}
}
Y por lo tanto el contenido del fichero strings_en.arb deberá ser:
{
"titleApp": "Translations!",
"@titleApp": {
"description": "The title of the app"
},
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "The conventional newborn programmer greeting"
}
}
Ya por último, sólo nos queda habilitar la generación de código de Flutter. Para ello, volvemos al fichero pubspec.yaml y buscamos la parte de Flutter, ahí añadimos generate: true.
El fichero debería quedar de la siguiente manera:
flutter: generate: true
Ahora, desde el terminal, debemos realizar un flutter clean
y un flutter pub get
. Si todo ha ido bien, que sí, Flutter nos habrá generado en nuestra carpeta de proyecto la siguiente estructura:
Vemos que tenemos los ficheros app_localizations_en.dart, app_localizations_**_es**.dart y app_localizations.dart. Este último es el delegado que controlará nuestras traducciones, y si lo abrimos, ya nos explica los siguientes pasos que debemos seguir para añadir el delegado en la aplicación.
Como último paso, debemos añadir nuestro delegado en la lista de delegados para la localización. Esta lista la añadimos en MaterialApp casi al principio de este tutorial.
Para poder configurarlo, primero debemos importar el fichero en nuestro main.dart o donde estemos inicializando MaterialApp
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
Y luego ya podemos añadir el delegado
return const MaterialApp( localizationsDelegates: [ AppLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate ], supportedLocales: const [ Locale('es', 'ES'), //Español de españa Locale('en'), //Inglés, cualquier país ],);
Ya podemos usar nuestras cadenas de texto y ver cómo son traducidas, para ello basta con invocarlas de la siguiente manera:
AppLocalizations.of(context)!.helloWorld
Podemos hacerlo dentro de cualquier widget, por ejemplo, añadamos un widget de texto debajo del calendario
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ CalendarDatePicker( initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime(2100), onDateChanged: (value) {}), Text(AppLocalizations.of(context)!.helloWorld), ], ), ); } }
Ahora, si ejecutamos la aplicación y cambiamos el idioma, veremos cómo nuestro widget de texto, con el texto Hola Mundo! será traducido al idioma seleccionado.
Y voilà, hemos terminado de localizar nuestra aplicación de Flutter, por lo menos en cuanto a las cadenas de texto y los controles por defecto… porque, existe otro paquete que nos ayudará también a localizar nuestra aplicación dándonos herramientas para el formato numérico, el formato de las fechas e incluso para trabajar mejor con nuestros ficheros .arb. Ese paquete es intl, pero ese, será otro post 😉
Tienes el código de ejemplo en este enlace.
Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando, estás dando tu consentimiento para aceptar las cookies y también nuestra política de cookies (esperemos que no te empaches con tanta cookie 😊)