> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Localization

> Configure multi-language localization and custom translations in CometChat Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field        | Value                                                                                        |
  | ------------ | -------------------------------------------------------------------------------------------- |
  | Package      | `cometchat_uikit_shared`                                                                     |
  | Import       | `import 'package:cometchat_uikit_shared/l10n/translations.dart';`                            |
  | Set language | Add `Locale('fr')` to `supportedLocales`                                                     |
  | Delegates    | `Translations.delegate`, `GlobalMaterialLocalizations.delegate`, etc.                        |
  | Supported    | 18 languages: ar, de, en, en-GB, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh      |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/l10n) |
</Accordion>

`Translations` manages multi-language localization for the UI Kit.

***

## Supported Languages

| Language     | Code    |
| ------------ | ------- |
| Arabic       | `ar`    |
| German       | `de`    |
| English      | `en`    |
| English (UK) | `en-GB` |
| Spanish      | `es`    |
| French       | `fr`    |
| Hindi        | `hi`    |
| Hungarian    | `hu`    |
| Japanese     | `ja`    |
| Korean       | `ko`    |
| Lithuanian   | `lt`    |
| Malay        | `ms`    |
| Dutch        | `nl`    |
| Portuguese   | `pt`    |
| Russian      | `ru`    |
| Swedish      | `sv`    |
| Turkish      | `tr`    |
| Chinese      | `zh`    |

***

## Setup

Add the dependency in `pubspec.yaml`:

```yaml theme={null}
flutter_localizations:
  sdk: flutter
```

Configure `MaterialApp`:

```dart theme={null}
import 'package:cometchat_uikit_shared/l10n/translations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  supportedLocales: const [
    Locale('en'),
    Locale('fr'),
    Locale('es'),
    Locale('de'),
    // Add more as needed
  ],
  localizationsDelegates: Translations.localizationsDelegates,
  home: MyApp(),
)
```

***

## Get Translated Strings

```dart theme={null}
String translatedString = Translations.of(context).users;
Text(translatedString);
```

***

## Custom Translations

Override default translations by extending the language class:

```dart theme={null}
import 'package:cometchat_uikit_shared/l10n/translations.dart';
import 'package:flutter/foundation.dart';

class CustomEN extends TranslationsEn {
  static const delegate = _CustomLocalizationsDelegate();

  @override
  String get chats => "My Chats";

  @override
  String get calls => "My Calls";
}

class _CustomLocalizationsDelegate extends LocalizationsDelegate<Translations> {
  const _CustomLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  @override
  Future<Translations> load(Locale locale) => SynchronousFuture(CustomEN());

  @override
  bool shouldReload(_CustomLocalizationsDelegate old) => false;
}
```

Then add to `MaterialApp`:

```dart theme={null}
localizationsDelegates: const [
  CustomEN.delegate,  // Custom override first
  ...Translations.localizationsDelegates,
],
```

***

## Add New Language

Create a custom translation class for unsupported languages:

```dart theme={null}
import 'package:cometchat_uikit_shared/l10n/translations.dart';
import 'package:flutter/foundation.dart';

class TeluguTranslations extends Translations {
  TeluguTranslations([super.locale = "te"]);
  static const delegate = _TeluguDelegate();

  @override
  String get chats => "సందేశాలు";

  @override
  String get calls => "ఫోన్ కాల్స్";

  // Override all required getters from Translations...
}

class _TeluguDelegate extends LocalizationsDelegate<Translations> {
  const _TeluguDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'te';

  @override
  Future<Translations> load(Locale locale) => SynchronousFuture(TeluguTranslations());

  @override
  bool shouldReload(_TeluguDelegate old) => false;
}
```

Then add to `MaterialApp`:

```dart theme={null}
localizationsDelegates: const [
  TeluguTranslations.delegate,  // Custom language first
  ...Translations.localizationsDelegates,
],
supportedLocales: const [
  Locale('te'),  // Telugu
  Locale('en'),
  // Other locales...
],
```

***

## Date/Time Formatting

Customize date/time display globally via `DateTimeFormatterCallback`. See [CometChatUIKit Methods](/ui-kit/flutter/v5/methods#dateformatter) for details.