Setting Up Localization

What you'll learn

• Generating a localization package using Slang
• Managing translations with shared locale state
• Scoping translations per feature for modularity
• Adding new languages and translation keys

Prerequisites

• An existing Archipelago monorepo (see Monorepo Scaffolding)

Step 1: Generate the Localization Package

archipelago generate flutter_l10n

You will be prompted for:

• appName — MyApp (your application name)
• prefix — App (prefix for component naming)
• isForMonorepo — true
• includeGenerated — false (whether generated files go into git)

Or use a config file:

{
  "appName": "MyApp",
  "prefix": "App",
  "isForMonorepo": true,
  "includeGenerated": false
}

archipelago generate flutter_l10n --config l10n_config.json

Step 2: Understand the Generated Structure

The brick generates a localization package with Slang for type-safe translations:

packages/
└── my_app_l10n/
    ├── lib/
    │   ├── my_app_l10n.dart              # Barrel exports
    │   └── src/
    │       ├── locale_state.dart          # Shared locale state manager
    │       ├── l10n_provider.dart         # InheritedWidget for locale
    │       └── generated/                 # Slang-generated translations
    │           ├── strings.g.dart
    │           └── strings_id.g.dart
    ├── i18n/
    │   ├── strings.i18n.json             # English (default)
    │   └── strings_id.i18n.json          # Indonesian
    └── slang.yaml                        # Slang configuration

Step 3: Add Translation Keys

Define translations in the i18n JSON files:

// i18n/strings.i18n.json (English)
{
  "common": {
    "ok": "OK",
    "cancel": "Cancel",
    "error": "Something went wrong"
  },
  "auth": {
    "login": "Log In",
    "register": "Create Account",
    "welcome": "Welcome, {name}!"
  }
}

// i18n/strings_id.i18n.json (Indonesian)
{
  "common": {
    "ok": "OK",
    "cancel": "Batal",
    "error": "Terjadi kesalahan"
  },
  "auth": {
    "login": "Masuk",
    "register": "Buat Akun",
    "welcome": "Selamat datang, {name}!"
  }
}

Then regenerate:

dart run slang

Step 4: Use Translations in Features

Access translations with type-safe generated accessors:

import 'package:my_app_l10n/my_app_l10n.dart';

// Type-safe access
Text(t.common.ok);
Text(t.auth.welcome(name: user.name));

// Change locale
LocaleState.setLocale(AppLocale.id);

Step 5: Scoped Feature Translations

Each feature can define its own translation namespace, keeping strings modular:

// Feature-scoped keys
{
  "payment": {
    "checkout": "Proceed to Checkout",
    "total": "Total: {amount}"
  }
}

Key Customization Points

Customization	Where to Change
Add a new language	Create strings_<code>.i18n.json, run dart run slang
Add interpolation variables	Use {variable} syntax in JSON values
Add pluralization	Use Slang's plural syntax in JSON files
Change default locale	slang.yaml — update base_locale
Feature-scoped translations	Add nested namespace per feature in JSON

Next Steps

• Generate a UI Kit with localized component labels
• Scaffold a new app that wires up the locale provider