Héctor Álvarez
Es probable que nuestra aplicación tenga usuarios de todas partes del globo, por lo que un solo idioma nos quedaría pequeño.
Flutter nos entrega algunos mecanismos para poder implementar infinidad de idiomas en nuestra aplicación.
A esto se le llama internacionalización (i18n) o localización(l10n).
En presentaciones anteriores agregamos nuevas dependencias directamente en nuestro archivo pubspec.yaml, en esta presentación utilizaremos los comandos pub add.
Pub add nos permite agregar una dependencia directamente desde la línea de comandos, los que nos permite tener menos errores al momento de integrarlos en el archivo pubspec.yaml, pero necesitamos saber el nombre del paquete de antemano y contar con un acceso al terminal (cosa que puede ser intimidante para algunos).
Para esta clase necesitaremos los paquetes flutter_localizations e intl, y podremos agregarlos con los siguientes comandos:
A continuación tendremos que agregar cuantas traducciones necesitemos dentro de la carpeta lib/l10n.
Los archivos a crear tendran la siguiente nomenclatura de nombre:
app_{lang}.arb
donde {lang} sería el código de lenguaje, por ejemplo:
app_en.arb
app_es.arb
Por ahora agregaremos esos archivos de idioma y veremos qué contienen.
Podemos ver de la línea 7 al 9 cómo pasar parámetros a travez de las traducciones utilizando las llaves {} y otorgando un nombre de variable, la cual designaremos luego en los placeholders.
Para implementar internacionalización tendremos que contar con un generador de código automático, igual que en HIVE y para habilitarlo, necesitamos agregar la línea N° 70.
Finalmente, necesitamos agregar el archivo l10.yaml en la raíz del proyecto (junto a pubspec.yaml), para que el generador detecte los archivos base desde donde generar el archivo app_localizations.dart
Para generar el archivo de idioma utilizaremos el siguiente comando:
La diferencia entre este generador y el generador de archivos "part", es que el archivo de idiomas se generará en la carpeta .dart_tool/flutter_gen/gen_l10n, fuera de la carpeta lib así que tendremos que tener más ciuidado al importarlo, ya que a veces el editor no lo encuentra.
Es hora de modificar nuestro archivo main y agregar el provider de idioma para detectar cualquier cambio.
Además especificaremos los idiomas soportados por nuestra aplicación.
El provider nos entrega una forma de manejar los estados de nuestra aplicación.
Realizaremos un pequeño cambio en nueestra pantalla de home para implementar el manejo de idioma.
Veremos como gatillar el evento del provider para actualizar la vista.
Utilizaremos una traducción con parámetro para que visualicen cómo funciona.