Flutter Localization: Manejo de lenguajes (idioma)

Localizar una app en Flutter no es solo traducir un par de textos: es adaptar la experiencia completa a distintos idiomas, regiones, formatos y preferencias del usuario. 

En mi caso, trabajar con proyectos reales me llevó a probar varias alternativas, y easy_localization terminó siendo mi favorita por rapidez, simplicidad y porque “simplemente funciona” sin convertir cada cambio en una cirugía a corazón abierto.

En esta guía te muestro cómo implementar localization en Flutter de forma profesional, dónde suelen aparecer los problemas y cómo resolverlos con un stack sencillo: JSON + Easy Localization + buenas prácticas.

Qué es la localización en Flutter y por qué importa

i18n vs l10n explicado fácil

• i18n (internationalization): preparar la app para soportar múltiples idiomas.
• l10n (localization): adaptarla realmente a esos idiomas: textos, formatos, sentido de lectura, assets…

Por ejemplo, cuando cambié una app que estaba solo en inglés a francés, no solo traduje textos: tuve que adaptar fechas, códigos regionales y, en iOS, agregar los locales en Info.plist, algo que muchos olvidan.

Problemas típicos al trabajar con varios idiomas

• Textos duplicados en el código.
• Traducciones faltantes que rompen la UI.
• Fechas y números en el formato incorrecto.
• RTL ignorado y layouts que se rompen.
• Usuarios que cambian de idioma pero la app no persiste su selección.

Todo eso lo he sufrido yo mismo y por eso te enseño cómo evitarlo.

Agregar traducciones a un proyecto en Flutter paso a paso

En este apartado, vamos a ver cada uno de los pasos que tenemos que cubrir para que nuestra aplicación en Flutter, soporte varios idiomas.

Configuración inicial del proyecto

Traducir tu app en múltiples idiomas resulta una buena idea cuando tienes un servicio que pueden aprovechar todos y en donde la barrera del idioma no tenga que ser una limitante.

El proceso en Flutter es sencillo pero son varios pasos que tenemos que cubrir para que tu app pueda soportar varios idiomas

Dependencias necesarias:

En pubspec.yaml:

dependencies:
 easy_localization:

Configuramos las carpetas en donde estarán los archivos de traducciones:

flutter:
 assets:
   - assets/lang/

La estructura de carpetas queda como:

assets/
└── lang/
     ├── en.json
     └── fr.json

Como puedes ver, usa la convensión de BCP-47 (IETF Language Tag); por ejemplo:

• en    Inglés (sin región específica)
• en_US    Inglés de Estados Unidos
• en_GB    Inglés de Reino Unido
• es    Español genérico
• es_MX    Español de México
• fr_FR    Francés de Francia

Tu forma de usarla:

• en.json, fr.json, es.json → solo idioma
• en_US.json, es_MX.json → idioma + región

Configuración requerida en iOS (Info.plist)

En iOS, hay que hacer una configuración adicional:

<key>CFBundleLocalizations</key>
<array>
 <string>en</string>
 <string>fr</string>
</array>

Traducciones de Ejemplo

Aquí van TODOs los textos fijos de tu app; de ejemplo:

en.json

{
  "title": "Title",
  "app_local_demo": "Application localization example!",
  "demo_details": "This is a sample project to change the language."
}

fr.json

{
 "title": "Titre",
 "app_local_demo": "Exemple de localisation d'application!",
 "demo_details": "Ceci est un exemple de projet pour changer la langue."
}

Estos son simplemente JSON en donde el valor del mismo es la traducción y la key la forma en la cual accedemos a esa key.

Envolver la app en EasyLocalization

A continuación, editamos nuestro main.dart como este.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: const [
        Locale('en','US'),
        Locale('fr','FR')
      ],
      path: 'assets/lang',
      fallbackLocale: const Locale('en','US'),
      child: const MyApp(),
    ),
  );
}

Para obtener las palabras, simplemente importa el paquete:

'title'.tr()

Crear un selector de idioma profesional en Flutter

Puede crear cualquier tipo de widget de tipo selección para cambiar el idioma:

class Language {
   Locale locale;
   String langName;
   Language({
      required this.locale,
      required this.langName,
   });
}

Agregamos los idiomas:

List<Language> languageList = [
    Language(
      langName: 'English - UK',
      locale: const Locale('en'),
    ),
    Language(
      langName: 'French - FR',
      locale: const Locale('fr'),
    )
  ];

DropdownButton de ejemplo:

DropdownButton<Language>(
 value: selectedLang,
 onChanged: (newValue) {
   setState(() => selectedLang = newValue!);
   context.setLocale(newValue.locale);
 },
 items: languageList.map((Language value) {
   return DropdownMenuItem(
     value: value,
     child: Text(value.langName),
   );
 }).toList(),
);

Cómo persistir el idioma del usuario

Para guardar la selección del idioma del usuario, puedes emplear por ejemplo Hive o SharedPreferences:

saveLocale(context.locale.toString());

Preguntas frecuentes (FAQ)

• ¿Puedo usar easy_localization junto con intl?
  • Sí, y de hecho es lo que recomiendo para fechas y números.
• ¿JSON o ARB?
  • JSON = simple y rápido.
  • ARB = obligatorio para apps muy grandes o cuando usas generación automática.
• ¿Cómo evito errores de claves faltantes?
  • Activa el errorWidget y revisa logs durante el desarrollo.
• ¿Cómo agregar más idiomas?
  • Solo agrega más archivos JSON en assets/lang y añádelos a supportedLocales

Conclusión

La localización es una de esas tareas que parecen simples, pero si no se hace bien, la app termina mostrando textos mezclados, fechas mal formateadas y usuarios frustrados.

Después de probar múltiples enfoques, easy_localization se convirtió para mí en la forma más rápida y práctica de implementar idiomas en apps reales sin sacrificar calidad.

La clave es combinarlo con:

• Buena estructura de archivos
• Un selector intuitivo
• Persistencia del idioma
• Buenas prácticas de RTL y formatos
• Haz eso y tendrás una app verdaderamente global.