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
flutter_localizations:
sdk: flutter
Update MaterialApp Localizations Delegates
- Dart
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.
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
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
// 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});
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// Builds the MaterialApp with localization, theme, and navigation setup
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();
String get chats => "Overridden Chat"; // Custom string for "chats"
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
bool isSupported(Locale locale) => locale.languageCode == 'en';
// Load the custom English translations synchronously
Future<cc.Translations> load(Locale locale) =>
SynchronousFuture(CustomEN());
// No need to reload delegate on changes
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
// 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});
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// Root of the application
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)
bool isSupported(Locale locale) => locale.languageCode == 'te';
// Load the custom Telugu translation class
Future<cc.Translations> load(Locale locale) =>
SynchronousFuture(MmCCLocalization());
// Determines whether to reload the delegate (not needed here)
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
String get chats => "సందేశాలు"; // Telugu for "Chats"
String get calls => "ఫోన్ కాల్స్"; // Telugu for "Calls"
// Note: Add more overrides here to fully localize the UI
}