> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started With CometChat Flutter UI Kit V6

> Set up CometChat Flutter UI Kit V6 with app credentials, package installation, initialization, users, groups, messages, and calls.

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](https://app.cometchat.com/login).

**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`:

```bash theme={null}
dart pub add cometchat_chat_uikit:6.0.0 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
```

**2. Update Pubspec**

Or add it manually to your `pubspec.yaml`:

```yaml pubspec.yaml theme={null}
dependencies:
  cometchat_chat_uikit:
    hosted: https://dart.cloudsmith.io/cometchat/cometchat/
    version: 6.0.0
```

Final `pubspec.yaml`

```yaml pubspec.yaml theme={null}
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

  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`:

```gradle build.gradle theme={null}
android {
    defaultConfig {
        minSdk = 24
        // Other configurations...
    }
}
```

***

**3. Update iOS Podfile**

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

```ruby Podfile theme={null}
platform :ios, '13.0'
```

***

**4. Import CometChat UIKit**

In your Dart code, import the CometChat UIKit package:

```dart main.dart theme={null}
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:**

```dart cometchat_config.dart theme={null}
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:**

```dart main.dart theme={null}
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.

```dart main.dart theme={null}
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](/ui-kit/flutter/methods#init) and [Login](/ui-kit/flutter/methods#login-using-auth-key).

#### **Example: Initialization and Login Combined**

```dart main.dart theme={null}
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](./flutter-conversation)

***

### **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:

```dart theme={null}
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](./flutter-one-to-one-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](./flutter-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](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding.

***

## **Next Steps**

* **[Integrate Conversation List + Message](/ui-kit/flutter/flutter-conversation)**
* **[Integrate One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat)**
* **[Integrate Tab-Based Chat](/ui-kit/flutter/flutter-tab-based-chat)**
* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)**

***