Traducir una app de Flutter parece más difícil de lo que es. Flutter trae todo lo que necesitas. Guardas tus textos en archivos ARB, uno por idioma, y Flutter los convierte en una clase de Dart que llamas desde tus widgets. Esta guía te lleva de una app solo en inglés a una que cambia de idioma según los ajustes del teléfono. También cubre lo que más se suele hacer mal: marcadores, plurales e idiomas de derecha a izquierda.
1. Añade los paquetes
En pubspec.yaml, añade el paquete de localización de Flutter e intl, y activa la generación de código:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: trueintl: any deja que Flutter elija la versión de intl que encaja con tu versión de Flutter, lo que evita conflictos de versiones.
2. Dile a Flutter dónde están tus textos
Crea l10n.yaml en la raíz del proyecto:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: falseEl archivo de plantilla es tu idioma de origen. Todos los demás idiomas siguen sus claves. La última línea, nullable-getter: false, te ahorra añadir ! cada vez que buscas un texto.
3. Escribe tu primer archivo ARB
Crea lib/l10n/app_en.arb:
{
"@@locale": "en",
"homeTitle": "Welcome back",
"@homeTitle": {
"description": "Title on the home screen"
},
"cartItems": "{count, plural, =0{Your cart is empty} =1{1 item in your cart} other{{count} items in your cart}}",
"@cartItems": {
"placeholders": {
"count": { "type": "num" }
}
},
"greeting": "Hello, {name}!",
"@greeting": {
"placeholders": {
"name": { "type": "String" }
}
}
}Algunos hábitos que compensan más adelante:
- Añade una descripción a cada clave. Los traductores, y las herramientas de traducción con IA, solo ven el texto. "Title on the home screen" les dice que es un título corto y no una frase.
- Nunca formes frases uniendo cadenas.
"Hello, " + nameno se puede traducir, porque muchos idiomas ponen el nombre en otro lugar. Usa un marcador. - Usa plurales, no condicionales. El inglés tiene dos formas. El árabe tiene seis y el polaco cuatro. El formato de plurales de arriba (un estándar llamado ICU) las cubre todas. Al traducir un plural, usa las formas que necesita el otro idioma (
zero,one,two,few,many,other), no solo el=0y el=1del inglés.
Ahora añade un segundo idioma. Crea lib/l10n/app_es.arb con las mismas claves:
{
"@@locale": "es",
"homeTitle": "¡Hola de nuevo!",
"cartItems": "{count, plural, =0{Tu carrito está vacío} =1{1 artículo en tu carrito} other{{count} artículos en tu carrito}}",
"greeting": "¡Hola, {name}!"
}Las descripciones (las entradas con @) solo hacen falta en el archivo de plantilla.
4. Genera el código y conéctalo a tu app
Ejecuta flutter pub get o ejecuta la app, y Flutter genera el código por ti. También puedes ejecutar flutter gen-l10n tú mismo. Las versiones recientes de Flutter escriben app_localizations.dart junto a tus archivos ARB. Las antiguas lo guardaban en un paquete oculto, así que actualiza Flutter si la importación de abajo no funciona.
Después conéctalo en MaterialApp:
import 'package:flutter/material.dart';
import 'l10n/app_localizations.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
home: const HomeScreen(),
);
}
}localizationsDelegates incluye también las traducciones propias de Flutter para los widgets integrados, como el selector de fechas y las etiquetas del botón "Atrás".
5. Usa los textos en tus widgets
// Inside a widget's build method:
final l10n = AppLocalizations.of(context);
Text(l10n.homeTitle);
Text(l10n.greeting('Sara'));
Text(l10n.cartItems(3)); // "3 items in your cart"Cada clave se convierte en una propiedad o un método de Dart, así que una errata en el nombre de una clave detiene la compilación en lugar de mostrar una etiqueta vacía a tus usuarios.
La app ya sigue el idioma del teléfono. Para probarlo, cambia el idioma en el simulador o el emulador, o fuerza uno por un momento con locale: const Locale('es') en MaterialApp.
6. No te olvides de iOS
En iOS, el App Store solo muestra los idiomas que declara tu proyecto de Xcode. Abre ios/Runner.xcodeproj en Xcode, selecciona el proyecto Runner (en Projects, no en Targets), abre la pestaña Info y añade cada idioma en Localizations. Xcode crea entonces unos pequeños archivos que el App Store usa para mostrar qué idiomas admite tu app.
7. Los idiomas de derecha a izquierda funcionan casi gratis
Cuando el idioma es árabe, hebreo o persa, MaterialApp invierte la dirección del diseño por ti. Lo que no puede arreglar es el código que da por hecho la izquierda y la derecha:
- Usa
EdgeInsetsDirectional.only(start: 16)en lugar deEdgeInsets.only(left: 16). - Usa
AlignmentDirectional.centerStarten lugar deAlignment.centerLeft. - Refleja los iconos de flecha que apuntan "hacia delante". Las flechas habituales de atrás y adelante, como
Icons.arrow_back, ya se invierten solas, así que revisa cualquier otra flecha que uses. Iconos como un teléfono o una cámara no necesitan reflejarse.
Prueba pronto con un idioma real de derecha a izquierda. Además, el texto en alemán suele ser mucho más largo que en inglés y el árabe necesita más altura de línea, así que comprueba que los botones no se desborden.
8. Mantén las traducciones sincronizadas a medida que crece la app
Los pasos anteriores son la parte fácil. Lo difícil empieza con la siguiente versión, cuando añades doce claves, cambias tres y las necesitas en todos los idiomas antes de publicar. Formas habituales de resolverlo:
- Editar los archivos ARB a mano. Sirve para uno o dos idiomas y una app pequeña. Deja de funcionar en cuanto traduce otra persona o se te olvida qué claves cambiaron.
- Enviar los archivos a un traductor. Exportas
app_en.arb, recibes las traducciones y las pegas. Funciona, pero es lento, y tienes que llevar la cuenta de lo que cambió desde la última vez. - Usar una herramienta de gestión de traducciones. Subes tu archivo en inglés, traduces las claves nuevas (a mano, con IA o ambas cosas) y descargas los demás idiomas.
litei18n es una de esas herramientas, pensada para equipos pequeños. Puedes importar y exportar archivos ARB (en los planes de pago, desde 9 $ al mes; el plan gratuito funciona con JSON), traducir con IA las claves que faltan y revisar los cambios antes de publicarlos. litei18n lee la descripción de cada clave nueva de tu archivo ARB y vuelve a escribir las descripciones al descargar, así que los traductores y la IA las ven. Las descargas se llaman como espera Flutter, por ejemplo app_es.arb. Para cambiar una descripción más adelante, edítala en litei18n, porque volver a subir el archivo no la actualiza. Todavía no conserva los ajustes de los marcadores, así que mantén tu propio app_en.arb como origen y descarga solo los demás idiomas. Si trabajas con un asistente de programación con IA como Claude o Cursor, también puede añadir y traducir claves por ti mediante la conexión MCP de litei18n, que permite a las herramientas de IA trabajar directamente en litei18n.
9. Actualizar textos sin publicar una nueva versión de la app
Flutter compila los archivos ARB dentro de tu app. Eso significa que corregir una errata en alemán, o añadir un idioma, normalmente requiere una nueva compilación y una revisión en el App Store y Google Play.
Si eso te supone un problema, puedes cargar las traducciones en tiempo de ejecución. Guarda una copia incluida en la app para usarla sin conexión y en el primer arranque, y descarga la versión más reciente de un servidor al abrir la app. Nuestra guía de actualizaciones por aire para Flutter muestra el código completo. Son unas 30 líneas y usa su propia clase pequeña en lugar de AppLocalizations. Ese enfoque más sencillo solo maneja texto simple: los marcadores y plurales necesitan código adicional, así que encaja en apps con textos sobre todo sencillos. Con litei18n, las actualizaciones por aire están en los planes de pago.
Lista de comprobación rápida
flutter_localizationseintlañadidos, congenerate: truel10n.yamlapunta a tu carpeta de ARB y a la plantilla- Cada clave tiene una descripción
- Marcadores y plurales en lugar de cadenas unidas
- Todos los idiomas añadidos en Localizations en Xcode
- Márgenes y alineación direccionales para idiomas de derecha a izquierda
- Un plan para mantener traducidas las claves nuevas
Eso es todo lo que hace falta para que una app de Flutter hable más de un idioma. Empieza con un idioma extra. Cuando la configuración funcione, añadir el siguiente es solo otro archivo ARB.
¿Quieres gestionar tus archivos ARB en un solo lugar y traducir las claves nuevas con IA? Empieza gratis con litei18n.