PricingLoginStart free
Flutter Mobile Development · Lección

Archivos ARB y flujo de localización con gen_l10n

Configure la canalización de flutter_localizations y gen_l10n para generar traducciones tipadas.

Lección 1 de 413 pasos

Archivos ARB y flujo de localización con gen_l10n es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Step 1: Why gen_l10n + dependencies

Hard-coding strings like Text('Welcome') makes an app impossible to translate. Flutter's official solution is gen_l10n: you write translations in ARB (Application Resource Bundle, a JSON format) files, and the build tool generates a typed Dart class so typos become compile-time errors.

Two pieces are required in pubspec.yaml. The flutter_localizations SDK package supplies Material/Cupertino/Widgets translations, and the generate: true flag turns on the gen_l10n build step.

  • intl is pulled in because generated code uses it for plurals and dates.
  • After editing, run flutter pub get.
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true

Step 2: l10n.yaml config

Create an l10n.yaml file at the project root. It tells gen_l10n where your ARB files live and what to name the generated class.

  • arb-dir — folder holding the .arb files.
  • template-arb-file — the source-of-truth locale that defines keys and metadata.
  • output-localization-file — name of the generated Dart file.
  • output-class — the class name you import in code.
# l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
output-class: AppLocalizations

Step 3: The template ARB file

The template locale (here app_en.arb) defines every key. Each key maps to a translated value. Keys starting with @ are metadata: they describe the entry but produce no string.

  • @@locale declares which locale this file is.
  • @welcome can carry a description to help translators.

The filename pattern is app_<localeCode>.arb.

{
  "@@locale": "en",
  "welcome": "Welcome",
  "@welcome": {
    "description": "Greeting shown on the home screen"
  },
  "settings": "Settings"
}

Step 4: A translated ARB file

For each additional language, add a sibling file with the same keys but translated values. Metadata (the @ keys) is only required in the template; translations may omit it.

  • Here app_tr.arb provides Turkish strings.
  • Missing keys fall back to the template locale, so keep the template complete.
{
  "@@locale": "tr",
  "welcome": "Hoş geldiniz",
  "settings": "Ayarlar"
}

Step 5: Generate the code

Code generation runs automatically during flutter run or flutter build when generate: true is set. You can also force it with flutter gen-l10n.

  • Output lands in .dart_tool/flutter_gen/gen_l10n/ by default.
  • The generated AppLocalizations class exposes one getter per key.
  • Add the generated path to your IDE's import suggestions; do not commit generated files.

Step 6: Wire into MaterialApp

Register the generated delegates and supported locales on MaterialApp. AppLocalizations.localizationsDelegates bundles your delegate plus the Material/Widgets/Cupertino ones, and supportedLocales lists what you ship.

  • Flutter picks the best match between the device locale and supportedLocales.
  • If none match, the first entry in supportedLocales is used.
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_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(),
    );
  }
}

Step 7: Read a string

Inside a widget you fetch the localized instance with AppLocalizations.of(context) and read a getter. The call is null only if the delegates are missing, so the common idiom uses !.

  • Each key from the ARB becomes a strongly-typed getter.
  • Rename a key in the ARB and every wrong usage fails to compile.
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Scaffold(
      appBar: AppBar(title: Text(l10n.settings)),
      body: Center(child: Text(l10n.welcome)),
    );
  }
}

Step 8: Placeholders

To inject values, declare placeholders in the template metadata. The value uses {name} syntax, and gen_l10n turns the getter into a method.

  • Each placeholder needs a type (e.g. String, int, DateTime).
  • The generated method signature follows the placeholder order.
{
  "@@locale": "en",
  "greeting": "Hello, {name}!",
  "@greeting": {
    "description": "Personalized greeting",
    "placeholders": {
      "name": { "type": "String" }
    }
  }
}

Step 9: Call a placeholder method

Because greeting takes an argument, the generated member is a method, not a getter. You pass the value at the call site.

  • l10n.greeting('Ada') returns "Hello, Ada!".
  • Types are enforced: passing an int where a String is expected fails to compile.
Widget buildGreeting(BuildContext context, String userName) {
  final l10n = AppLocalizations.of(context)!;
  return Text(l10n.greeting(userName));
}

Step 10: Plurals with ICU

ARB supports ICU message syntax for plurals. A {count, plural, ...} block selects the right wording per language. Declare the placeholder as num (or int).

  • =0, one, and other are common categories.
  • # is replaced by the formatted number.
  • Different locales have different plural rules — ICU handles them automatically.
{
  "itemCount": "{count, plural, =0{No items} one{1 item} other{{count} items}}",
  "@itemCount": {
    "placeholders": {
      "count": { "type": "int" }
    }
  }
}

Step 11: A plain-Dart formatter

The selection logic ICU performs is just rules over a number. Here is a tiny standalone Dart program that mimics English plural selection — useful for understanding what gen_l10n generates under the hood.

  • Real apps use the generated method; this is only for intuition.
String itemCount(int count) {
  if (count == 0) return 'No items';
  if (count == 1) return '1 item';
  return '$count items';
}

void main() {
  for (final n in [0, 1, 5]) {
    print(itemCount(n));
  }
}

Quick Check

You added a new key logout only to app_en.arb but forgot it in app_tr.arb. A Turkish-locale user opens the screen. What happens?

Responde en la lección interactiva

Recap

You built the full Flutter localization pipeline:

  • Added flutter_localizations + intl and set generate: true.
  • Configured l10n.yaml (arb-dir, template, output class).
  • Wrote a template ARB plus per-locale translations.
  • Let gen_l10n create the typed AppLocalizations class.
  • Registered localizationsDelegates and supportedLocales, then read strings via AppLocalizations.of(context)!.
  • Used placeholders for dynamic values and ICU plurals for count-aware text.

The payoff: translations are type-checked, missing template keys are caught early, and translators work in a clean JSON format.

Gratis para empezar

Aprende Dart con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
22
Lecciones
88
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Archivos ARB y flujo de localización con gen_l10n» es gratis?

Sí — el texto completo de «Archivos ARB y flujo de localización con gen_l10n» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.

¿Qué aprenderé en «Archivos ARB y flujo de localización con gen_l10n»?

Configure la canalización de flutter_localizations y gen_l10n para generar traducciones tipadas. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Flutter Mobile Development?

No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Archivos ARB y flujo de localización con gen_l10n»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?

Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Archivos ARB y flujo de localización con gen_l10n
  2. Pluralización, género y formato de mensajes ICU
  3. Diseños RTL y gestión de la direccionalidad
  4. Semántica, lectores de pantalla y widgets accesibles
← Volver a Flutter Mobile Development