> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 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` ```dart theme={null} flutter_localizations: sdk: flutter ``` *** Update MaterialApp Localizations Delegates ```dart theme={null} 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: ```dart theme={null} 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. ```dart theme={null} // 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 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 createState() => _MyAppState(); } class _MyAppState extends State { // 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 { 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 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. ```dart theme={null} // 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 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 createState() => _MyAppState(); } class _MyAppState extends State { // 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 { 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 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 } ``` ### DateTimeFormatter By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application. For more detailed information and the full reference for the DateTimeFormatterCallback methods, refer to the DateTimeFormatterCallback methods section in the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter)