# ChatMCP Localization: How the Flutter App Handles Multi-Language Support

> Discover how ChatMCP implements multi-language support using Flutter gen-l10n for English, German, Turkish, and Chinese. Learn about ARB files and AppLocalizations.

- Repository: [刀刀/chatmcp](https://github.com/daodao97/chatmcp)
- Tags: how-to-guide
- Published: 2026-02-28

---

**ChatMCP uses Flutter’s `intl`-based `flutter gen-l10n` workflow to provide compile-time-safe translations for four languages—English, German, Turkish, and Chinese—storing strings in ARB files under `lib/l10n/` and accessing them via the generated `AppLocalizations` class.**

The open-source ChatMCP project (daodao97/chatmcp) implements a robust **ChatMCP localization** system using Flutter’s official internationalization tools. This approach ensures type-safe access to translated strings while maintaining a clean separation between UI code and localization resources.

## How ChatMCP Implements Localization

### ARB Resource Files in lib/l10n/

The foundation of ChatMCP’s localization lies in Application Resource Bundle (ARB) files stored in `lib/l10n/`. Each supported language maintains its own `.arb` file containing identical key structures with locale-specific values:

- `app_en.arb` for English
- `app_de.arb` for German  
- `app_tr.arb` for Turkish
- `app_zh.arb` for Chinese

Each file declares its locale via the `@@locale` field and defines keys such as `settings`, `language`, and `theme` with translated values for that region.

### Code Generation Workflow

Rather than parsing translations at runtime, ChatMCP uses the `flutter gen-l10n` command configured via [`l10n.yaml`](https://github.com/daodao97/chatmcp/blob/main/l10n.yaml) to generate Dart code from the ARB files. This produces `lib/generated/app_localizations.dart`, which contains:

- An abstract **`AppLocalizations`** class defining getters for every translation key
- Concrete implementations (`AppLocalizationsEn`, `AppLocalizationsDe`, `AppLocalizationsTr`, `AppLocalizationsZh`) returning locale-specific strings
- A **`LocalizationsDelegate`** (`_AppLocalizationsDelegate`) that wires the system into Flutter’s widget tree

The generated file automatically exposes supported locales through the static constant:

```dart
static const List<Locale> supportedLocales = <Locale>[
  Locale('de'), Locale('en'), Locale('tr'), Locale('zh')
];

```

The delegate’s `isSupported` method (lines 56-58 of the generated file) validates user locales against this list at runtime.

### Runtime Access Pattern

Widgets access localized strings through the **`AppLocalizations.of(context)`** method. For example, in `lib/widgets/upload_menu.dart` at line 17, the code retrieves the current localization instance:

```dart
final t = AppLocalizations.of(context)!;

```

The resulting `t` object provides type-safe access to all defined strings (e.g., `t.settings`, `t.theme`), ensuring compile-time validation of translation keys. Here is a complete widget implementation demonstrating this pattern:

```dart
import 'package:flutter/material.dart';
import 'generated/app_localizations.dart';

class ThemeToggle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final t = AppLocalizations.of(context)!; // locale-aware accessor
    return ListTile(
      title: Text(t.theme),                     // "Theme" → localized
      trailing: Switch(
        value: Theme.of(context).brightness == Brightness.dark,
        onChanged: (_) => /* toggle theme */,
      ),
    );
  }
}

```

## Supported Languages in ChatMCP

ChatMCP currently supports **four languages** through the ARB file system:

- **English** (`en`) – defined in `lib/l10n/app_en.arb`
- **German** (`de`) – defined in `lib/l10n/app_de.arb`  
- **Turkish** (`tr`) – defined in `lib/l10n/app_tr.arb`
- **Chinese** (`zh`) – defined in `lib/l10n/app_zh.arb`

The `AppLocalizations.supportedLocales` list enumerates these exactly as `Locale('de')`, `Locale('en')`, `Locale('tr')`, and `Locale('zh')`.

## Switching Locales at Runtime

The application handles language switching through the settings interface implemented in `lib/page/setting/general_setting.dart`. When a user selects a different language, the app updates the `MaterialApp` widget’s `locale` property, triggering a rebuild with the new `AppLocalizations` instance. The settings UI uses `AppLocalizations.supportedLocales` to populate the available options dynamically, ensuring the dropdown only presents valid, implemented languages.

## Adding a New Language to ChatMCP

Extending ChatMCP to support additional languages requires three steps:

1. **Create the ARB file** following the naming convention `app_[language_code].arb`:

```bash
cp lib/l10n/app_en.arb lib/l10n/app_es.arb

```

2. **Translate the values** in the new file while preserving all existing keys.

3. **Regenerate the Dart classes**:

```bash
flutter gen-l10n

```

After regeneration, `AppLocalizations.supportedLocales` automatically includes the new locale (e.g., `Locale('es')`), and the type-safe accessors become available throughout the codebase without manual delegate updates.

## Summary

- ChatMCP uses **ARB files** stored in `lib/l10n/` as the single source of truth for translations.
- The **`flutter gen-l10n`** workflow creates type-safe Dart classes in `lib/generated/app_localizations.dart`.
- **Four languages** are currently supported: English, German, Turkish, and Chinese.
- Widgets access strings via **`AppLocalizations.of(context)`**, providing compile-time safety for translation keys.
- New languages are added by creating ARB files and regenerating the localization classes.

## Frequently Asked Questions

### What localization framework does ChatMCP use?

ChatMCP uses Flutter’s official `intl` package with the `flutter gen-l10n` code-generation workflow. This approach compiles ARB (Application Resource Bundle) files into type-safe Dart classes at build time, rather than parsing JSON or XML at runtime, ensuring compile-time validation of all translation keys.

### How many languages does ChatMCP currently support?

ChatMCP supports **four languages**: English (`en`), German (`de`), Turkish (`tr`), and Chinese (`zh`). These are defined in the ARB files under `lib/l10n/` and enumerated in the generated `AppLocalizations.supportedLocales` list, which the delegate checks via its `isSupported` method.

### Where are the translation files stored in ChatMCP?

All translation sources reside in the `lib/l10n/` directory as `.arb` files (e.g., `app_en.arb`, `app_de.arb`). The generated Dart code that Flutter uses at runtime lives in `lib/generated/app_localizations.dart`. The [`l10n.yaml`](https://github.com/daodao97/chatmcp/blob/main/l10n.yaml) configuration file in the project root defines the input and output paths for the generator.

### How do I add a new language to ChatMCP?

To add a new language, create an ARB file named `app_[code].arb` in `lib/l10n/` with the same keys as existing files, translate the string values, and run `flutter gen-l10n`. The generator automatically updates `AppLocalizations.supportedLocales` and creates the necessary delegate logic to recognize the new locale immediately.