Skip to main content
Version: v5

Localize

Overview​

CometChat 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 browser or device settings, and set the language accordingly.

CometChatLocalize is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library.

Presently, the UI Kit supports 19 languages for localization, which are:

  • 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

flutter_localizations:
    sdk: flutter

Update MaterialApp Localizations Delegates

import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'guard_screen.dart';


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

  // This widget is the root of your application.
  @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 Sample App',
      navigatorKey: CallNavigationContext.navigatorKey,
      home: GuardScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

You can also translate specific strings. For example:

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

//Use it in a widget
Text(translatedString);

Customizing UI Kit Translations for a Specific Language​

To override a specific language's default translations in the CometChat UI Kit, you can create a custom localization class and delegate. The example below demonstrates how to override the English (en) language by customizing labels such as "chats" and "calls". This allows you to tailor the UI text to better fit your application's tone or branding requirements.

// Import necessary Flutter and package dependencies
import 'dart:async';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart' as cc;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:get/get.dart';
import 'package:master_app/guard_screen.dart';
import 'package:master_app/utils/page_manager.dart';
import 'prefs/shared_preferences.dart';

// Main function - entry point of the Flutter application
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // Ensures bindings are initialized before runApp
  SharedPreferencesClass.init(); // Initialize shared preferences
  Get.put(PageManager()); // Register PageManager with GetX dependency injection

  runApp(const MyApp()); // Launch the app
}

// Root widget of the application
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Builds the MaterialApp with localization, theme, and navigation setup
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // List of all supported locales
      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'),
      ],

      // Localization delegates required to load localized resources
      localizationsDelegates: const [
        CustomEN.delegate, // Custom override for English localization
        cc.Translations.delegate, // CometChat UI Kit translations
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],

      // Application theme configuration
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          scrolledUnderElevation: 0.0, // No shadow when scrolling under the AppBar
        ),
      ),

      title: 'CometChat Flutter Sample App', // App title
      navigatorKey: CallNavigationContext
          .navigatorKey, // Navigator key for CometChat call handling
      home: GuardScreen(), // Initial screen shown to the user
      debugShowCheckedModeBanner: false, // Hides the debug banner
    );
  }
}

// Custom English translation class overriding default CometChat translations
class CustomEN extends TranslationsEn {
  static const delegate = _CustomCometChatLocalizationsDelegate();

  @override
  String get chats => "Overridden Chat"; // Custom string for "chats"

  @override
  String get calls => "Overridden Call"; // Custom string for "calls"
}

// Localization delegate to provide the CustomEN class for English
class _CustomCometChatLocalizationsDelegate
    extends LocalizationsDelegate<cc.Translations> {
  const _CustomCometChatLocalizationsDelegate();

  // Only support English for this custom delegate
  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  // Load the custom English translations synchronously
  @override
  Future<cc.Translations> load(Locale locale) =>
      SynchronousFuture(CustomEN());

  // No need to reload delegate on changes
  @override
  bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
}

Adding New Language Support in CometChat UI Kit​

This implementation demonstrates how to extend the CometChat Flutter UI Kit with custom localization support for the Telugu (te) language. By creating a custom translation class and registering it through a LocalizationsDelegate, developers can override or define translation strings such as "Chats" and "Calls" in Telugu. This approach enables personalized and region-specific user experiences beyond the default set of supported languages in the UI Kit.

// Import Dart and Flutter dependencies
import 'dart:async';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart' as cc;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:get/get.dart';
import 'package:master_app/guard_screen.dart';
import 'package:master_app/utils/page_manager.dart';
import 'prefs/shared_preferences.dart';

// Entry point of the Flutter application
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // Ensures Flutter engine is initialized
  SharedPreferencesClass.init(); // Initialize shared preferences for app storage
  Get.put(PageManager()); // Register PageManager using GetX dependency injection

  runApp(const MyApp()); // Launch the main app widget
}

// Main application widget
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Root of the application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Set the default locale to Telugu
      locale: Locale('te'),

      // List of all supported locales including the new Telugu support
      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'),
        Locale('te'), // Newly added Telugu locale
      ],

      // Localization delegates used to load translations
      localizationsDelegates: const [
        MmCCLocalization.delegate, // Custom Telugu localization delegate
        cc.Translations.delegate, // CometChat UI Kit default translations
        GlobalMaterialLocalizations.delegate, // Flutter built-in material localization
        GlobalWidgetsLocalizations.delegate, // Flutter built-in widget localization
        GlobalCupertinoLocalizations.delegate, // Flutter built-in Cupertino localization
      ],

      // Define app theme (e.g., AppBar style)
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          scrolledUnderElevation: 0.0, // Remove shadow when scrolling under AppBar
        ),
      ),

      title: 'CometChat Flutter Sample App', // App title
      navigatorKey: CallNavigationContext.navigatorKey, // Navigator key for CometChat call handling
      home: GuardScreen(), // Entry screen of the app
      debugShowCheckedModeBanner: false, // Disable debug banner in release mode
    );
  }
}

// Custom localization delegate for Telugu language
class _NnCometChatLocalizationsDelegate
    extends LocalizationsDelegate<cc.Translations> {
  const _NnCometChatLocalizationsDelegate();

  // Checks if the provided locale is supported (only 'te' in this case)
  @override
  bool isSupported(Locale locale) => locale.languageCode == 'te';

  // Load the custom Telugu translation class
  @override
  Future<cc.Translations> load(Locale locale) =>
      SynchronousFuture(MmCCLocalization());

  // Determines whether to reload the delegate (not needed here)
  @override
  bool shouldReload(_NnCometChatLocalizationsDelegate old) => false;
}

// NOTE:
// Only "chats" and "calls" have been overridden in this example.
// To fully localize the UI for the Telugu language, you should override
// all relevant strings provided by the CometChat UI Kit's Translations class.
// This ensures a consistent and complete user experience across the app.

// Custom Telugu translation class for CometChat UI Kit
class MmCCLocalization extends cc.Translations {
  MmCCLocalization([super.locale = "te"]);

  // Register the delegate for use in MaterialApp
  static const delegate = _NnCometChatLocalizationsDelegate();

  // Override specific UI Kit strings in Telugu
  @override
  String get chats => "సందేశాలు"; // Telugu for "Chats"

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

  // Note: Add more overrides here to fully localize the UI
}