# Building a Complete Flutter Chat App with CometChat UI Kit

Learn how to build and launch a real-time Flutter chat app quickly using CometChat’s UI Kits. This step-by-step tutorial covers integration, customization, and component tailoring to create a fully functional, personalized chat experience.

## Why use CometChat instead of building it yourself?

Building chat apps in Flutter from scratch is an ambitious task that comes with a range of complex challenges, such as:

- Setting up real-time infrastructure for message exchange across platforms
- Managing message delivery, synchronization, and storage
- Handling presence, typing indicators, and read receipts reliably
- Implementing secure user authentication flows
- Scaling smoothly for multiple users and high message volumes
- Designing an intuitive chat interface that feels native on both iOS and Android

CometChat’s [Flutter UI Kit](https://www.cometchat.com/flutter-chat-ui-kit) simplifies this process by offering pre-built, customizable Flutter widgets that take care of the heavy lifting while still giving developers full flexibility to adapt the chat experience to their app’s unique requirements.

## What You’ll Build

By the end of this tutorial you’ll have a Flutter app that supports:

- Sign-in with user ID
- One-to-one chat
- Group chat (create/join/manage)
- Real-time messaging with typing, presence, and read receipts
- Customizable themes and UI
- Works on iOS & Android

## Prerequisites

Before you begin:

- Flutter (stable) installed
- Dart 3+
- Android Studio / Xcode / VS Code set up
- Internet access
- A CometChat Dashboard app with App ID, Auth Key, and Region.

## Getting Started

In this section, we'll walk you through the steps to set up a new Flutter project and integrate the CometChat UI Kit.

### Step1: Register + Create App on CometChat
Go to CometChat Dashboard. Sign up or log in.
Create a new app.
Note your App ID, Auth Key, and Region you’ll need them shortly.

### Step 2: Create a New Flutter Project
Open your preferred IDE (Android Studio or Visual Studio Code).
Run the following command in the terminal:

```
flutter create flutter_cometchat_app
```

Choose the default options for the project setup. Once the project is created, navigate to the project directory:

```
cd flutter_cometchat_app
```

### Step 3: Install CometChat UI Kit
Open the pubspec.yaml file in your project's root directory. Add the following dependencies under the dependencies section to include the UI Kit:

```
dependencies:
  flutter:
    sdk: flutter
  cometchat_chat_uikit: ^5.2.6
```

Run the following command to fetch the dependencies:

```
flutter pub get
```

Installation pulls in both the UI Kit and underlying CometChat SDK's [Dart packages.](https://pub.dev/packages/cometchat_chat_uikit?utm_source=chatgpt.com)

### Step 4: Configure iOS & Android (Platform Setup)

#### iOS configuration
In ios/Podfile, add:

```
post_install do |installer|
  installer.pods_project.build_configurations.each do |config|
    config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
  end
end
```

Ensure IPHONEOS_DEPLOYMENT_TARGET ≥ 12.
Run the following command to install the required pods:

```
cd ios
pod install
cd ..
```

#### Android configuration
In android/app/build.gradle ensure:

```
defaultConfig {
    minSdkVersion 21
    targetSdkVersion 33
}
```

### Step 5: Initialize CometChat
In main.dart, import and initialize with your credentials:

```
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await CometChatUIKit.init(
    appId: 'YOUR_APP_ID',
    region: 'YOUR_REGION',
    authKey: 'YOUR_AUTH_KEY',
  );
  runApp(MyApp());
}
```

### Step 6: User Authentication
Create a simple login screen asking for User ID:

```
TextField(
  controller: userIdController,
  decoration: InputDecoration(hintText: "Enter user ID"),
),
ElevatedButton(
  onPressed: () async {
    await CometChatUIKit.login(userIdController.text.trim());
    Navigator.pushNamed(context, '/chats');
  },
  child: Text("Login"),
),
```

### Step 7: Conversations Screen
Once logged in, show all chats using CometChatConversations widget:

```
CometChatConversations(
  onTap: (conversation) {
    // Navigate to chat details with conversation.id
  },
);
```

### Step 8: Chat Screen (One-to-One & Group)
#### One-to-One Chat
Show message UI with:

```
CometChatMessages(
  receiverUid: selectedUser.uid,
  chatType: ChatType.user,
);
```

#### Group Chat

```
CometChatMessages(
  receiverUid: selectedGroup.guid,
  chatType: ChatType.group,
);
```

### Step 9: Create & Manage Groups
Use provided UI Kit widgets to add the group creation functionality.

```
CometChatCreateGroup(
  onCreate: (group) {
    // Navigate to group chat screen
  },
);
```

And list/manage members with:

```
CometChatGroupInfo(group: selectedGroup);
```

### Step 10: Customize UI + Themes
The UI Kit supports light/dark themes, colors, fonts, and styling.

Example:

```
CometChatTheme(
  primaryColor: Colors.teal,
  accentColor: Colors.amber,
  // More theme settings…
);
```

### Step 11: Advanced Features (Optional)
Once core chat is working, you can extend your app with:

- Typing indicators
- Presence (online/offline)
- Media and file sharing
- Push notifications via FCM / APNs
- Moderation, profanity filters
- Voice & video calling

### Step 12: Test & Deploy
Run on emulator or real device:

```
flutter run
```

### Conclusion
At this point, you’ve seen how real-time chat comes together in a Flutter app without having to wrestle with platform differences or real-time plumbing. The Flutter sample app is there to help you go beyond the tutorial: run it, break it, tweak the UI, and see how messaging, presence, and groups behave in a real app.