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

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 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:

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:

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:

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:
cp lib/l10n/app_en.arb lib/l10n/app_es.arb
  1. Translate the values in the new file while preserving all existing keys.

  2. Regenerate the Dart classes:

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 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →