Localize - CometChat Docs

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:

Dart

flutter_localizations:
  sdk: flutter

Update MaterialApp Localizations Delegates:

Dart

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,
    );
  }
}

You can also translate specific strings:

Dart

String translatedString = Translations.of(context).users;
Text(translatedString);

Customizing UI Kit Translations for a Specific Language

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

Dart

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;
}

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:

Dart

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;
}

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.

​Overview

​Usage

​Integration

​Customizing UI Kit Translations for a Specific Language

​Adding New Language Support

​DateTimeFormatter