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

# Localize

> Localize CometChat Flutter UI Kit with supported languages, device language detection, translation files, and MaterialApp setup.

## Overview

CometChat V6 UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly.

The UI Kit supports 19 languages:

* Arabic (ar), German (de), English (en, 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, zh-TW)

## Usage

### Integration

Add the following dependency in `pubspec.yaml`:

<Tabs>
  <Tab title="Dart">
    ```yaml theme={null}
    flutter_localizations:
      sdk: flutter
    ```
  </Tab>
</Tabs>

***

Update MaterialApp Localizations Delegates:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
    import 'package:flutter/material.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';

    class MyApp extends StatelessWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          supportedLocales: const [
            Locale('en'), Locale('en', 'GB'), Locale('ar'), Locale('de'),
            Locale('es'), Locale('fr'), Locale('hi'), Locale('hu'),
            Locale('ja'), Locale('ko'), Locale('lt'), Locale('ms'),
            Locale('nl'), Locale('pt'), Locale('ru'), Locale('sv'),
            Locale('tr'), Locale('zh'), Locale('zh', 'TW'),
          ],
          localizationsDelegates: const [
            cc.Translations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          theme: ThemeData(
            appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
          ),
          title: 'CometChat Flutter App',
          home: YourHomeScreen(),
          debugShowCheckedModeBanner: false,
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

You can also translate specific strings:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    String translatedString = Translations.of(context).users;
    Text(translatedString);
    ```
  </Tab>
</Tabs>

### Customizing UI Kit Translations for a Specific Language

Override a specific language's default translations by creating a custom localization class:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'dart:async';
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';

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

      @override
      String get chats => "Overridden Chat";

      @override
      String get calls => "Overridden Call";
    }

    class _CustomCometChatLocalizationsDelegate
        extends LocalizationsDelegate<cc.Translations> {
      const _CustomCometChatLocalizationsDelegate();

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

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

      @override
      bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
    }
    ```
  </Tab>
</Tabs>

Then add `CustomEN.delegate` to your `localizationsDelegates` list before `cc.Translations.delegate`.

### Adding New Language Support

Extend the UI Kit with a new language by creating a custom translation class:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    class TeluguLocalization extends cc.Translations {
      TeluguLocalization([super.locale = "te"]);
      static const delegate = _TeluguLocalizationsDelegate();

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

      @override
      String get calls => "ఫోన్ కాల్స్";
      // Override all relevant strings for full localization
    }

    class _TeluguLocalizationsDelegate
        extends LocalizationsDelegate<cc.Translations> {
      const _TeluguLocalizationsDelegate();

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

      @override
      Future<cc.Translations> load(Locale locale) =>
          SynchronousFuture(TeluguLocalization());

      @override
      bool shouldReload(_TeluguLocalizationsDelegate old) => false;
    }
    ```
  </Tab>
</Tabs>

### DateTimeFormatter

By providing a custom `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components. For details, refer to the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter).