![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/05\/Screenshot_1.jpg\")
<\/h1>\n<\/h1>\nFlutter<\/strong>, por defecto, s\u00f3lo proporciona localizaciones para ingl\u00e9s de Estados Unidos. Por lo tanto, si queremos que nuestra aplicaci\u00f3n est\u00e9 localizada en castellano, vamos a tener que indic\u00e1rselo. Veamos c\u00f3mo.<\/p>\n <\/p>\n Lo primero que debemos hacer es a\u00f1adir en nuestro fichero pubspec.yaml<\/em> el paquete flutter_localizations<\/strong>. Lo correcto es que est\u00e9 justo debajo del sdk:flutter<\/em> o tambi\u00e9n podemos instalarlo desde la consola con la siguiente l\u00ednea de comando: Nuestro fichero pubspec.yaml<\/em> deber\u00eda quedar as\u00ed:<\/p><\/blockquote>\n Esto nos dar\u00e1 acceso a todo lo necesario para continuar internacionalizando nuestra aplicaci\u00f3n. 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\u00ed c\u00f3mo las traducciones de otros widgets gen\u00e9ricos de Flutter<\/strong>.<\/p>\n Estos delegados respectivamente son:<\/p><\/blockquote>\n Para usarlos en nuestra aplicaci\u00f3n, deberemos a\u00f1adirlos en el constructor de nuestra MaterialApp<\/em> como localizationsDelegates<\/em><\/p>\n Mas adelante veremos c\u00f3mo crear nuestro propio delegado para traducir\u00a0 cadenas de textos, pero por ahora, sigamos configurando la aplicaci\u00f3n.<\/p>\n Lo siguiente que debemos hacer es indicarle qu\u00e9 idiomas vamos a soportar. Para ello debemos seguir modificando el constructor de nuestra MaterialApp<\/em>. En el ejemplo, vamos a soportar el espa\u00f1ol de Espa\u00f1a e ingl\u00e9s gen\u00e9rico, sin c\u00f3digo de pa\u00eds.<\/p>\n Una vez a\u00f1adidos los idiomas que vamos a soportar, ya podr\u00edamos arrancar nuestra aplicaci\u00f3n y, por ejemplo, si colocamos un Ahora veamos c\u00f3mo 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 \u00abcrear el delegado\u00bb se va encargar el generador de c\u00f3digo de Flutter<\/em>. Nosotros s\u00f3lo tenemos que crear un fichero de configuraci\u00f3n con formato .yaml<\/em>, los ficheros de recursos con formato .arb<\/em> y habilitar el generador de c\u00f3digo de Flutter<\/em><\/p>\n Comencemos por el fichero de configuraci\u00f3n. Este fichero lo colocamos en la ra\u00edz del proyecto y, como estamos hablando de localizar nuestra aplicaci\u00f3n, lo podemos llamar l10n.yaml<\/em>. l10n.yaml<\/p>\n Este ser\u00eda el contenido b\u00e1sico del fichero de configuraci\u00f3n para la generaci\u00f3n de nuestro delegado. Hay muchas mas opciones que puedes consultar aqu\u00ed.<\/a><\/p>\n Nuestro siguiente paso es generar los ficheros con las traducciones, como ya hemos visto. Estos ficheros deber\u00e1n estar en la carpeta lib\/l10n<\/em><\/strong>. Recordemos que tendremos tantos ficheros como idiomas queramos soportar.<\/p>\n En el fichero de configuraci\u00f3n hemos decidido que los ficheros se van a llamar strings<c\u00f3digo de idiona><\/strong>.arb, por lo que en nuestro ejemplo, deber\u00edamos terminar con dos ficheros: En su forma mas sencilla, el contenido de los ficheros ser\u00e1 el siguiente:<\/p>\n strings<\/em>_en<\/strong>.arb<\/em><\/p>\n { Y por lo tanto el contenido del fichero strings<\/em>_en<\/strong>.arb<\/em>\u00a0deber\u00e1 ser:<\/p>\n { Ya por \u00faltimo, s\u00f3lo nos queda habilitar la generaci\u00f3n de c\u00f3digo de Flutter<\/em>. Para ello, volvemos al fichero pubspec.yaml<\/em> y buscamos la parte de Flutter<\/em>, ah\u00ed a\u00f1adimos generate: true<\/em>.<\/p>\n El fichero deber\u00eda quedar de la siguiente manera:<\/p><\/blockquote>\n Ahora, desde el terminal, debemos realizar un Vemos que tenemos los ficheros app_localizations<\/em>_en<\/strong>.dart, app_localizations_**_es**.dart y app_localizations.dart. Este \u00faltimo es el delegado que controlar\u00e1 nuestras traducciones, y si lo abrimos, ya nos explica los siguientes pasos que debemos seguir para a\u00f1adir el delegado en la aplicaci\u00f3n.<\/p>\n Como \u00faltimo paso, debemos a\u00f1adir nuestro delegado en la lista de delegados para la localizaci\u00f3n. Esta lista la a\u00f1adimos en MaterialApp<\/em> casi al principio de este tutorial.<\/p>\n Para poder configurarlo, primero debemos importar el fichero en nuestro main.dart<\/em> o donde estemos inicializando MaterialApp<\/em><\/p><\/blockquote>\n Y luego ya podemos a\u00f1adir el delegado<\/p>\n Ya podemos usar nuestras cadenas de texto<\/strong> y ver c\u00f3mo son traducidas<\/strong>, para ello basta con invocarlas de la siguiente manera:<\/p>\n Podemos hacerlo dentro de cualquier widget, por ejemplo, a\u00f1adamos un widget de texto debajo del calendario<\/p>\n Ahora,\u00a0 si ejecutamos la aplicaci\u00f3n y cambiamos el idioma, veremos c\u00f3mo nuestro widget de texto, con el texto Hola Mundo! ser\u00e1 traducido al idioma seleccionado.<\/p>\n Y voil\u00e0<\/em>, hemos terminado de localizar nuestra aplicaci\u00f3n de Flutter<\/em>, por lo menos en cuanto a las cadenas de texto y los controles por defecto… porque, existe otro paquete que nos ayudar\u00e1 tambi\u00e9n a localizar nuestra aplicaci\u00f3n d\u00e1ndonos herramientas para el formato num\u00e9rico, el formato de las fechas e incluso para trabajar mejor con nuestros ficheros .arb<\/em>. Ese paquete es intl<\/em>,<\/a> pero ese, ser\u00e1 otro post \ud83d\ude09<\/p>\nConfigurando nuestra aplicaci\u00f3n<\/h2>\n
flutter pub add flutter_localizations --sdk=flutter<\/code><\/p>\ndependencies:\r\nflutter:\r\n sdk: flutter\r\nflutter_localizations:\r\n sdk: flutter\r\n<\/pre>\n
GlobalMaterialLocalizations.delegate\r\nGlobalCupertinoLocalizations.delegate\r\nGlobalWidgetsLocalizations.delegate\r\n<\/pre>\n
return const MaterialApp(\r\n localizationsDelegates: [\r\n GlobalMaterialLocalizations.delegate,\r\n GlobalWidgetsLocalizations.delegate,\r\n GlobalCupertinoLocalizations.delegate\r\n \r\n ]);\r\n<\/pre>\n
return const MaterialApp(\r\n localizationsDelegates: [\r\n GlobalMaterialLocalizations.delegate,\r\n GlobalWidgetsLocalizations.delegate,\r\n GlobalCupertinoLocalizations.delegate\r\n \r\n ],\r\n supportedLocales: const [\r\n Locale('es', 'ES'), \/\/Espa\u00f1ol de espa\u00f1a\r\n Locale('en'), \/\/Ingl\u00e9s, cualquier pa\u00eds\r\n ],);\r\n<\/pre>\nCalendarDatePicker<\/code> en nuestra p\u00e1gina principal y cambiamos el idioma de nuestro tel\u00e9fono de Espa\u00f1ol a Ingl\u00e9s, veremos c\u00f3mo el primer d\u00eda de la semana del calendario cambia de lunes a domingo y viceversa.<\/p>\nclass _MyHomePageState extends State<MyHomePage> {\r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(\r\n appBar: AppBar(\r\n title: Text(widget.title),\r\n ),\r\n body: Column(\r\n mainAxisAlignment: MainAxisAlignment.start,\r\n children: <Widget>[\r\n CalendarDatePicker(\r\n initialDate: DateTime.now(),\r\n firstDate: DateTime(1900),\r\n lastDate: DateTime(2100),\r\n onDateChanged: (value) {}),\r\n ],\r\n ),\r\n );\r\n }\r\n}\r\n<\/pre>\n![\"Cambiamos](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/05\/change_language.png\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nConstruyendo nuestro propio delegado<\/h2>\n
\nEl contenido del fichero ser\u00e1 el siguiente:<\/p>\narb-dir: lib\/l10n\r\ntemplate-arb-file: strings_es.arb\r\noutput-localization-file: app_localizations.dart\r\nuntranslated-messages-file: untranslated.txt\r\n<\/pre>\n<\/blockquote>\n
\n
A\u00f1adiendo nuestras traducciones<\/h2>\n
\n<\/a><\/p>\n\n
\n "titleApp": "Traducciones",
\n "@titleApp": {
\n "description": "El t\u00edtulo de la aplicaci\u00f3n"
\n },
\n "helloWorld": "Hola Mundo!",
\n "@helloWorld": {
\n "description": "El saludo convencional del programador novato."
\n }
\n }<\/p>\n<\/blockquote>\n\n
\n "titleApp": "Translations!",
\n "@titleApp": {
\n "description": "The title of the app"
\n },
\n "helloWorld": "Hello World!",
\n "@helloWorld": {
\n "description": "The conventional newborn programmer greeting"
\n }
\n}<\/p>\n<\/blockquote>\n\n
Activando la generaci\u00f3n de c\u00f3digo<\/h2>\n
flutter:\r\n generate: true\r\n<\/pre>\n
flutter clean<\/code> y un flutter pub get<\/code>. Si todo ha ido bien, que s\u00ed, Flutter<\/em> nos habr\u00e1 generado en nuestra carpeta de proyecto la siguiente estructura:<\/p>\n<\/a><\/p><\/blockquote>\nA\u00f1adiendo nuestro delegado<\/h2>\n
import 'package:flutter_gen\/gen_l10n\/app_localizations.dart';<\/pre>\n
return const MaterialApp(\r\n localizationsDelegates: [\r\n AppLocalizations.delegate,\r\n GlobalMaterialLocalizations.delegate,\r\n GlobalWidgetsLocalizations.delegate,\r\n GlobalCupertinoLocalizations.delegate\r\n \r\n ],\r\n supportedLocales: const [\r\n Locale('es', 'ES'), \/\/Espa\u00f1ol de espa\u00f1a\r\n Locale('en'), \/\/Ingl\u00e9s, cualquier pa\u00eds\r\n ],);\r\n<\/pre>\nAppLocalizations.of(context)!.helloWorld<\/pre>\n
class _MyHomePageState extends State<MyHomePage> {\r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(\r\n appBar: AppBar(\r\n title: Text(widget.title),\r\n ),\r\n body: Column(\r\n mainAxisAlignment: MainAxisAlignment.start,\r\n children: <Widget>[\r\n CalendarDatePicker(\r\n initialDate: DateTime.now(),\r\n firstDate: DateTime(1900),\r\n lastDate: DateTime(2100),\r\n onDateChanged: (value) {}),\r\n Text(AppLocalizations.of(context)!.helloWorld),\r\n ],\r\n ),\r\n );\r\n }\r\n}\r\n<\/pre>\n<\/a><\/p>\n<\/a><\/p><\/blockquote>\n