Contenido del curso
Widgets en Flutter
Manejo de Recursos y Formularios
Navegación y APIs
Gestión de Estados
- 15

ListView.builder con FutureBuilder en Flutter
08:49 min - 16

Estados de carga y errores en Flutter
07:03 min - 17

Creación de modelos de datos en Flutter con Dart
09:43 min - 18

Uso de Provider para Gestión de Estado en Flutter
14:06 min - 19

"Gestión de Favoritos en Aplicaciones con Stateful Widgets"
30:46 min - 20

Detalles de Recetas en Flutter: Implementación y Visualización
05:08 min
Experiencia de Usuario
Publicación de Apps
Internacionalización y accesibilidad en Flutter
Resumen
La internacionalización en Flutter te permite traducir tu aplicación a varios idiomas y ampliar su alcance a usuarios en distintos países. Aquí aprenderás a configurar flutter_localizations e intl, generar archivos de traducción y sumar accesibilidad con el widget Semantics, ideal si construyes apps móviles que buscan crecer globalmente.
¿Qué paquetes necesitas para traducir una app Flutter?
La traducción en Flutter se apoya en dos dependencias que trabajan juntas. Una conecta tu app con el sistema de localización del framework y la otra maneja el formato del idioma.
- flutter_localizations: se agrega desde el SDK de Flutter, sin versión específica, porque depende del propio framework [01:00].
- intl: requiere una versión declarada, en este caso
0.19.0, no la 9.0 como podría confundirse al leer rápido [01:20]. - generate: true: se activa dentro del
pubspec.yamlpara que Flutter pueda crear los archivos de traducción automáticamente [01:45].
Después de declarar las dependencias, corres flutter pub get para descargarlas. Si ves un error de paquete no encontrado, revisa que escribiste flutter_localizations en plural; es uno de los descuidos más comunes [02:10].
¿Para qué sirve el paquete intl en Flutter? Es la librería oficial para manejar internacionalización: formatea fechas, números y mensajes según el idioma seleccionado por el usuario.
¿Cómo configurar el archivo l10n.yaml y los archivos .arb?
El archivo l10n.yaml vive en la raíz del proyecto y le dice a Flutter dónde están las traducciones, cuál es el idioma base y qué clase generar. Sin este archivo, la generación automática no sabe a qué apuntar.
Dentro de l10n.yaml defines tres claves principales:
arb-dir: la carpeta donde guardas tus traducciones, normalmentel10n[03:10].template-arb-file: el archivo base, en este casoen.arb, que actúa como referencia [03:40].output-localization-file: el archivo Dart que se generará, por convenciónapp_localizations.dart[04:00].
Luego creas la carpeta l10n y dentro dos archivos: en.arb para inglés y es.arb para español. Cada uno debe declarar su idioma con la clave @@locale apuntando a "en" o "es" respectivamente. Sin esa línea, Flutter no sabe a qué locale corresponde cada archivo [04:30].
Los archivos .arb usan formato JSON, así que son sensibles a comas de más, llaves mal cerradas o indentación rota. Si el editor lo muestra como texto plano, cámbialo manualmente al modo JSON para detectar errores de sintaxis [05:50].
¿Cómo generar las clases de localización?
Una vez configurado todo, ejecutas flutter gen-l10n en la terminal. Este comando lee tu l10n.yaml, recorre los archivos .arb y crea tres archivos dentro de .dart_tool/flutter_gen:
app_localizations_en.dartcon las traducciones en inglés.app_localizations_es.dartcon las traducciones en español.app_localizations.dartque centraliza la lógica de todos los idiomas disponibles.
Cada vez que agregues, edites o renombres una clave en cualquier .arb, debes volver a correr flutter gen-l10n para que las clases se actualicen [06:30].
¿Cómo usar AppLocalizations en widgets de Flutter?
Para que las traducciones funcionen en toda la app, debes registrar los delegates en el MaterialApp dentro del archivo main.dart. Sin esto, Flutter no sabe que tu aplicación tiene soporte multiidioma.
En la propiedad localizationsDelegates agregas una lista con cuatro elementos: AppLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate y GlobalCupertinoLocalizations.delegate. La clase AppLocalizations no se importa sola porque vive en flutter_gen, así que escribes el import manualmente apuntando al paquete generado [08:00].
Ya configurado, en cualquier widget reemplazas los textos quemados por una llamada al contexto:
dart Text(AppLocalizations.of(context)!.noRecipes)
El operador ! valida que el valor no sea nulo, lo cual ocurriría si la clave no existe en ninguno de los archivos .arb. Por eso conviene agregar la traducción en todos los idiomas a la vez antes de regenerar [09:30].
¿Qué pasa si una clave de traducción no existe en un idioma? Flutter retornará null en ese idioma específico, lo que puede romper la UI. Siempre replica cada clave nueva en todos los archivos .arb antes de regenerar.
¿Cómo hacer una app Flutter más accesible con Semantics?
La accesibilidad complementa a la internacionalización porque permite que personas con dispositivos configurados para lectura de pantalla puedan navegar tu app sin problema. En Flutter, esto se logra con el widget Semantics, que envuelve componentes y les añade información descriptiva.
El widget Semantics acepta varias propiedades clave:
label: describe qué es el elemento, por ejemplo"Tarjeta de recetas".hint: indica qué acción puede tomar el usuario, como"Toca para ver detalle de receta".value: aporta datos dinámicos, comorecipe.name, para que el lector de pantalla diga el nombre real [11:20].
Al envolver tarjetas, botones y elementos interactivos con Semantics, el sistema operativo del dispositivo puede leer en voz alta lo que está en pantalla. En web este widget aporta puntos extra de accesibilidad y mejora la experiencia para usuarios con discapacidad visual.
¿Cuándo debo usar el widget Semantics en Flutter? Úsalo en cualquier widget interactivo o informativo importante: tarjetas, botones personalizados, íconos sin texto y listas. Así garantizas que tu app sea navegable mediante TalkBack o VoiceOver.
Con estas dos capas, traducción y accesibilidad, tu app deja de ser un producto local para convertirse en una experiencia que funciona en cualquier idioma y para cualquier persona. ¿En qué idiomas vas a traducir tu próxima app? Cuéntame en los comentarios.