0Pricing
Flutter Mobile Development · Lesson

ARB Files and gen_l10n Localization Workflow

Set up the flutter_localizations and gen_l10n pipeline to generate typed translations.

ARB Files and gen_l10n Localization Workflow is a free Flutter Mobile Development lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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.

Frequently asked questions

Is the “ARB Files and gen_l10n Localization Workflow” lesson free?

Yes — the full text of “ARB Files and gen_l10n Localization Workflow” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.

What will I learn in “ARB Files and gen_l10n Localization Workflow”?

Set up the flutter_localizations and gen_l10n pipeline to generate typed translations. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Flutter Mobile Development?

No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “ARB Files and gen_l10n Localization Workflow” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Flutter Mobile Development lesson?

Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. ARB Files and gen_l10n Localization Workflow
  2. Pluralization, Gender, and ICU Message Formatting
  3. RTL Layouts and Directionality Handling
  4. Semantics, Screen Readers, and Accessible Widgets
← Back to Flutter Mobile Development