Getting Started With CometChat Flutter UI Kit

​

Prerequisites

• You need to register on the CometChat Dashboard first. Click here to sign up.

• Create a new app
• Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.

Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

• Flutter installed on your system.
• Android Studio or VS Code with configured Flutter/Dart plugins.
• Xcode & Pod (CocoaPods) for iOS
• An iOS device or emulator with iOS 12.0 or above.
• Android device or emulator with Android version 5.0 or above.

​

Getting Started

​

Step 1: Create Flutter application project

​

Step 2: Add Dependency

  cometchat_chat_uikit: ^5.0.3
  cometchat_calls_uikit: ^5.0.3 #Optional: Include if you're using Audio/Video Calling

  name: getting_started
  description: "A new Flutter project."

  publish_to: 'none' # Remove this line if you wish to publish to pub.dev

  version: 1.0.0+1

  environment:
    sdk: ^3.5.3

  dependencies:
    flutter:
      sdk: flutter

    cometchat_chat_uikit: ^5.0.3 
    cometchat_calls_uikit: ^5.0.3 #Optional: Include if you're using Audio/Video Calling
    cupertino_icons: ^1.0.8

  dev_dependencies:
    flutter_test:
      sdk: flutter

    flutter_lints: ^4.0.0

  flutter:
    uses-material-design: true

android {
    defaultConfig {
        minSdk = 24
        // Other configurations...
    }
}

platform :ios, '12.0'

4. Import CometChat UIKit In your Dart code, import the CometChat UIKit package to access its features. Add the following import statement to your main.dart file:

  import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
  import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; //Optional: Include if you're using Audio/Video Calling

​

Step 3: Initialize UI Kit

1. Import & Configure UIKit Settings You can store your app credentials (App ID, Auth Key, Region) in a dedicated configuration file and load them dynamically in your app. Example Configuration File:
   cometchat_config.dart

   Copy

   Ask AI

   class CometChatConfig {
     static const String appId = "APP_ID"; // Replace with your App ID
     static const String region = "REGION"; // Replace with your App Region
     static const String authKey = "AUTH_KEY"; // Replace with your Auth Key
   }
   

   Initialization Code:
   main.dart

   Copy

   Ask AI

   import 'cometchat_config.dart';
   
   UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
        ..subscriptionType = CometChatSubscriptionType.allUsers
        ..autoEstablishSocketConnection = true
        ..region = CometChatConfig.region
        ..appId = CometChatConfig.appId
        ..authKey = CometChatConfig.authKey
        ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions
        ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling
   ).build();
   
   CometChatUIKit.init(
     uiKitSettings: uiKitSettings,
     onSuccess: (successMessage) async {
       debugPrint('CometChat Initialized');
       // You can now log in the user
     },
     onError: (error) {
       debugPrint('CometChat Initialization error');
     },
   );
   

   Store your CometChat credentials in a config file to simplify environment management and avoid hardcoding.

​

Step 4: Login to UI Kit

CometChatUIKit.login(
  "cometchat-uid-1", // Replace with a valid UID
  onSuccess: (user) {
    debugPrint('CometChat LoggedIn success');
  },
  onError: (error) {
    debugPrint('CometChat LoggedIn error');
  },
);

• cometchat-uid-1
• cometchat-uid-2
• cometchat-uid-3
• cometchat-uid-4
• cometchat-uid-5

For more information, refer to the documentation on Init and Login.

​

Example: Initialization and Login Combined

import 'cometchat_config.dart';

void main() {
  UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
      ..subscriptionType = CometChatSubscriptionType.allUsers
      ..autoEstablishSocketConnection = true
      ..region = CometChatConfig.region
      ..appId = CometChatConfig.appId
      ..authKey = CometChatConfig.authKey
      ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions
      ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling
  ).build();

  CometChatUIKit.init(
    uiKitSettings: uiKitSettings,
    onSuccess: (successMessage) async {
      debugPrint('CometChat Initialized');

      CometChatUIKit.login(
        "cometchat-uid-1",
        onSuccess: (user) {
          debugPrint('CometChat LoggedIn success');
        },
        onError: (error) {
          debugPrint('CometChat LoggedIn error');
        },
      );
    },
    onError: (error) {
      debugPrint('CometChat Initialization error');
    },
  );
}

Extract credentials into a separate file (cometchat_config.dart) for better maintainability.

​

Step 5: Choose a Chat Experience

​

1️⃣ Conversation List + Message View

• Compact Layout – Uses Navigator.push() for mobile-first navigation.
• One-to-One & Group Chats – Built-in support for private and group conversations.
• Real-Time Messaging – Message list and view auto-refresh with CometChat events.
• State Persistence – Session-aware updates across screens and app restarts.
• Mobile-First UI – Optimized widgets that adapt to different screen sizes.
• Extremely Customizable – Modify styles, themes, and components easily.

• You want a clean navigation experience for multiple chat sessions.
• Your Flutter app supports both direct and group messaging.
• You prefer a stack-based routing approach using Navigator.

​

2️⃣ One-to-One / Group Chat

• Single Screen Chat – Use CometChatMessages widget with preselected user/group.
• No Conversation List – Start with just the message screen.
• Ideal for support & contextual chat – Ticket-based or user-to-agent communication.
• Simplified Routing – Pass user/group as route argument.
• Real-Time Communication – Auto-updates messages and statuses.

• Your chat starts from a specific user or group ID.
• You want a clean, focused chat interface.
• Use case involves support, onboarding, or one-time messages.

​

3️⃣ Tab-Based Messaging UI (All-in-One)

• Tab Navigation – Use BottomNavigationBar to switch between core features.
• Independent Screens – Chats, Calls, Users, and Settings in dedicated widgets.
• No Sidebar – True mobile layout using bottom tabs, ideal for smaller devices.
• Scalable – Add new tabs like Profile, Notifications, or Help later.
• Seamless UX – Syncs chat state across tabs with minimal boilerplate.

• You need a full-featured chat solution in one UI.
• Your users require structured navigation between modules.
• Use cases like support apps, business messengers, or social platforms.

​

Build Your Own Chat Experience

• Apps that require a fully customized chat experience.
• Developers who want to extend functionalities and modify UI components.
• Businesses integrating chat seamlessly into existing platforms.

• Flutter Sample App – Fully functional sample applications to accelerate your development.
• Core Features – Learn about messaging, real-time updates, and other essential capabilities.
• Components – Utilize prebuilt UI elements or customize them to fit your design.
• Themes – Adjust colors, fonts, and styles to match your branding.
• Build Your Own UI – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.

​

Next Steps

• Integrate Conversation List + Message
• Integrate One-to-One Chat
• Integrate Tab-Based Chat
• Advanced Customizations