PricingLoginStart free
Flutter Mobile Development · Aula

Arquivos ARB e Fluxo de Localização com gen_l10n

Configure o flutter_localizations e o pipeline gen_l10n para gerar traduções tipadas.

Aula 1 de 413 etapas

Arquivos ARB e Fluxo de Localização com gen_l10n é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em 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?

Responda na aula interativa

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.

Grátis para começar

Aprenda Dart com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
22
Aulas
88
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Arquivos ARB e Fluxo de Localização com gen_l10n” é grátis?

Sim — o texto completo de “Arquivos ARB e Fluxo de Localização com gen_l10n” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “Arquivos ARB e Fluxo de Localização com gen_l10n”?

Configure o flutter_localizations e o pipeline gen_l10n para gerar traduções tipadas. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Arquivos ARB e Fluxo de Localização com gen_l10n”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Arquivos ARB e Fluxo de Localização com gen_l10n
  2. Pluralização, Gênero e Formatação de Mensagens ICU
  3. Layouts RTL e Tratamento de Direcionalidade
  4. Semântica, Leitores de Tela e Widgets Acessíveis
← Voltar para Flutter Mobile Development