Getting Started With CometChat Flutter UI Kit V6

CometChat UI Kit V6 for Flutter is a package of pre-assembled UI elements built on clean architecture with BLoC state management. It provides essential messaging functionalities with options for light and dark themes, diverse fonts, colors, and extensive customization capabilities.

CometChat UI Kit V6 supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch.

Prerequisites

Before installing the UI Kit, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the App ID, AuthKey, and Region of your CometChat application when initializing the SDK.

i. Register on CometChat

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

ii. Get Your Application Keys

• 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.

iii. Platform & IDE Setup

• 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 13.0 or above.
• Android device or emulator with Android version 7.0 (API 24) or above.

Getting Started

Step 1: Create Flutter application project

To get started, create a new flutter application project.

---

Step 2: Add Dependency

1. Install via CLI

Since V6 is hosted on Cloudsmith (not pub.dev), run this command instead of the standard flutter pub add:

dart pub add cometchat_chat_uikit:6.0.0-beta1 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/

2. Update Pubspec

Or add it manually to your pubspec.yaml:

pubspec.yaml

dependencies:
  cometchat_chat_uikit:
    hosted: https://dart.cloudsmith.io/cometchat/cometchat/
    version: 6.0.0-beta1

Final pubspec.yaml

pubspec.yaml

name: my_chat_app
description: "A Flutter app with CometChat V6."

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.8.0

dependencies:
  flutter:
    sdk: flutter

  cometchat_chat_uikit:
    hosted: https://dart.cloudsmith.io/cometchat/cometchat/
    version: 6.0.0-beta1

  cupertino_icons: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^4.0.0

flutter:
  uses-material-design: true

---

2. Android App Setup

Update the minSdkVersion in your Android project configuration, located at android/app/build.gradle:

build.gradle

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

---

3. Update iOS Podfile

In your Podfile (located at ios/Podfile), update the minimum iOS version:

Podfile

platform :ios, '13.0'

---

4. Import CometChat UIKit

In your Dart code, import the CometChat UIKit package:

main.dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

V6 uses a single import. The cometchat_uikit_shared package is internalized — no separate import needed.

---

Step 3: Initialize UI Kit

Before using any features from the CometChat UI Kit, initialize it with your app credentials.

1. Create a Configuration File:

cometchat_config.dart

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
}

2. Initialize the UI Kit:

main.dart

import 'cometchat_config.dart';

UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
  ..subscriptionType = CometChatSubscriptionType.allUsers
  ..autoEstablishSocketConnection = true
  ..region = CometChatConfig.region
  ..appId = CometChatConfig.appId
  ..authKey = CometChatConfig.authKey
).build();

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

V6 difference from V5: No extensions or aiFeature parameters needed. Extensions are built-in and handled automatically by MessageTemplateUtils.

---

Step 4: Login to UI Kit

Once the UI Kit is initialized, authenticate your user using the login() method.

main.dart

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

You can test using any of the following pre-generated users:

• 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

main.dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
import 'cometchat_config.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CometChat V6',
      theme: ThemeData(useMaterial3: true),
      home: const InitPage(),
    );
  }
}

class InitPage extends StatefulWidget {
  const InitPage({super.key});

  @override
  State<InitPage> createState() => _InitPageState();
}

class _InitPageState extends State<InitPage> {
  bool _isInitializing = true;
  String? _error;

  @override
  void initState() {
    super.initState();
    _initCometChat();
  }

  Future<void> _initCometChat() async {
    UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..autoEstablishSocketConnection = true
          ..region = CometChatConfig.region
          ..appId = CometChatConfig.appId
          ..authKey = CometChatConfig.authKey)
        .build();

    CometChatUIKit.init(
      uiKitSettings: uiKitSettings,
      onSuccess: (msg) {
        CometChatUIKit.login(
          "cometchat-uid-1",
          onSuccess: (user) {
            debugPrint('Logged in as: ${user.name}');
            setState(() => _isInitializing = false);
          },
          onError: (error) {
            setState(() {
              _isInitializing = false;
              _error = error.message;
            });
          },
        );
      },
      onError: (error) {
        setState(() {
          _isInitializing = false;
          _error = error.message;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    if (_isInitializing) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }
    if (_error != null) {
      return Scaffold(body: Center(child: Text('Error: $_error')));
    }
    return const Scaffold(body: Center(child: Text('Ready!')));
  }
}

---

Step 5: Choose a Chat Experience

Integrate a conversation view that suits your application’s UX requirements. Below are the available options:

---

1. Conversation List + Message View

Best for: Flutter apps that need a smooth, stack-based navigation between conversations and messages.

Highlights:

• 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 auto-refreshes with CometChat events.
• BLoC-Powered – Predictable state management with ConversationsBloc and MessageListBloc.

Use When:

• You want a clean navigation experience for multiple chat sessions.
• Your Flutter app supports both direct and group messaging.

Integrate Conversation List + Message View

---

2. One-to-One / Group Chat

Best for: When a user lands directly into a chat screen, bypassing the conversation list.

In V6, you compose the chat screen using individual widgets:

Scaffold(
  body: Column(
    children: [
      CometChatMessageHeader(user: user),
      Expanded(child: CometChatMessageList(user: user)),
      CometChatMessageComposer(user: user),
    ],
  ),
)

V6 does not have a combined CometChatMessages composite widget. You compose the UI yourself using CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer.

Use When:

• 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.

Integrate One-to-One / Group Chat

---

3. Tab-Based Messaging UI (All-in-One)

Best for: Flutter apps needing a multi-tab experience to access Chat, Users, Calls, and Settings.

Use When:

• You need a full-featured chat solution in one UI.
• Your users require structured navigation between modules.

Integrate Tab-Based Chat

---

Build Your Own Chat Experience

Best for: Developers who need complete control over their chat interface.

Key Areas to Explore:

• 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.

---

Next Steps

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

---