0Pricing
Flutter Mobile Development · Pelajaran

File ARB dan Alur Kerja Lokalisasi gen_l10n

Siapkan pipeline flutter_localizations dan gen_l10n untuk menghasilkan terjemahan bertipe.

File ARB dan Alur Kerja Lokalisasi gen_l10n adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “File ARB dan Alur Kerja Lokalisasi gen_l10n” gratis?

Ya — teks lengkap “File ARB dan Alur Kerja Lokalisasi gen_l10n” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “File ARB dan Alur Kerja Lokalisasi gen_l10n”?

Siapkan pipeline flutter_localizations dan gen_l10n untuk menghasilkan terjemahan bertipe. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “File ARB dan Alur Kerja Lokalisasi gen_l10n” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. File ARB dan Alur Kerja Lokalisasi gen_l10n
  2. Pluralisasi, Gender, dan Pemformatan Pesan ICU
  3. Layout RTL dan Penanganan Directionality
  4. Semantik, Pembaca Layar, dan Widget Aksesibel
← Kembali ke Flutter Mobile Development