Building a Complete Flutter Chat App with CometChat UI Kit

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

When building with Flutter, developers face additional platform-specific complexities such as:

CometChat's Flutter UI Kit simplifies this process by offering pre-built, customizable chat components that eliminate the heavy lifting, while still allowing developers the flexibility to align the chat experience with their unique app requirements.

To better understand how CometChat can accelerate your Flutter chat development process, here's a quick comparison of building a chat app using the traditional DIY approach versus leveraging CometChat:

In this tutorial, we'll build a full-featured Flutter chat application that supports:

Before starting this tutorial, ensure you have:

• Flutter SDK installed

• Dart SDK installed

• Basic Flutter/Dart knowledge

• Text editor/IDE

• CometChat account (free plan available)

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

Step 1: Create a New Flutter Project

Open your preferred IDE (Android Studio or Visual Studio Code).

Click on "File" > "New Flutter Project" or run the following command in the terminal:

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

Step 2: Configure Dependencies

Open the pubspec.yaml file in your project's root directory. Add the following dependencies under the dependencies section:

Make sure to use the latest version of the CometChat UI Kit for the best results. Run the following command to fetch the dependencies:

Step 3: Update Android and iOS Configuration

Android Configuration

• Open the android/app/build.gradle file.

• Locate the defaultConfig block and update the minSdkVersion to 21 or higher:

• Add Internet permission in android/app/src/main/AndroidManifest.xml:

iOS Configuration

• Open the ios/Podfile file.

• Ensure the platform version is set to 12.0 or higher:

Update ios/Runner/Info.plist:

Run the following command to install the required pods:

Step 4: Initialize CometChat

Create a new file named cometchat_config.dart
in the lib directory of your project. Add the following code to initialize CometChat:

Make sure to replace "YOUR_APP_ID", "YOUR_REGION", and "YOUR_AUTH_KEY" with your actual CometChat configuration values. 

Open the main.dart file and call the initCometChat() method before running the app:

Note: We added WidgetsFlutterBinding.ensureInitialized() to ensure that the Flutter bindings are initialized before calling initCometChat().

That's it! You have successfully set up a new Flutter project and initialized CometChat. In the next section, we'll dive into building the chat app interface.

1. User login and authentication flow 

Before diving into building the chat interface, we'll create a login component that authenticates users with CometChat using their unique User ID. This authentication system is fundamental as it establishes a secure connection between users and CometChat servers, managing user sessions and ensuring proper access to conversations.

We'll create a login screen that:

This login screen uses only a User ID (UID) for authentication. During development and testing, use pre-generated CometChat test users with UIDs like cometchat-uid-1 through cometchat-uid-5. You can create additional users via the CometChat Dashboard or API as needed.

Step 1: Creating the Login Screen

Create a new file named login_screen.dart in the lib directory of your project. Add the following code to create the login screen UI:

This code creates a basic login screen with a text field for entering the User ID, a login button, and placeholders for displaying loading state and error messages.

Step 2: Implement User Authentication

Now that we have the login screen UI set up, let's focus on implementing the user authentication logic. The primary goal of this step is to validate the User ID entered by the user against CometChat's backend and handle the authentication response accordingly.

When the user clicks the login button, we'll trigger the login method, which will perform the following tasks:

Update the login method in the loginscreen.dart  file to implement user authentication:

In this code, we first update the loading state and clear any previous error messages. We retrieve the entered User ID from the text field and trim any leading or trailing whitespace.

We then perform a simple validation to ensure that the User ID is not empty. If it is empty, we display an error message to the user and return early.

By implementing the user authentication logic, we ensure that only valid User IDs are authenticated against CometChat's backend, and we handle the authentication response appropriately.

Step 3: Handle Session Establishment

After successfully authenticating the user, we need to establish a user session to maintain their logged-in state throughout the app. This step ensures that the user remains authenticated and can access the chat functionality without having to log in again.

To handle session establishment, we'll update the login method to store the logged-in user object returned by the login method upon successful authentication.

Here's the updated code for the _login method:

To complete the login flow, we need to navigate the user to the main chat screen after a successful login. Let's update the main.dart file to set the LoginScreen as the initial route:

With this update, when the app starts, it will display the LoginScreen as the initial screen. In the next step, we'll implement the main chat screen and navigate to it after a successful login.

2. Building the Chat Interface

After successfully setting up the login and authentication flow, we’ll now create the main chat interface. This is where users can view conversations, exchange messages, and interact in real time. CometChat simplifies this step with the CometChatConversationsWithMessages component, which provides a pre-built, feature-rich chat interface.

The CometChatConversationsWithMessages widget combines two key chat functionalities in one seamless interface:

This component is fully customizable, handles platform-specific optimizations, and ensures cross-platform consistency.

We’ll integrate CometChatConversationsWithMessages into our Flutter app using two approaches:

Approach 1: Launching the Chat Interface Using Navigator

This approach allows you to navigate to the chat interface upon successful login. Modify the _login method in the login_screen.dart file to navigate to the chat interface upon successful authentication:

Approach 2: Embedding the Chat Interface in the Build Method

If you prefer the chat interface to always be accessible, you can embed it directly into your widget tree. Create a new file called chat_screen.dart in the lib directory and add the following code:

To use this implementation, update the _login method in login_screen.dart to navigate to the ChatScreen

You can further customize the CometChatConversationsWithMessages widget by overriding its properties or methods. For example, you can adjust themes, configure conversation filters, or set default message actions.

Finally, update lib/main.dart:

When to Use Each Approach

The choice between the two integration approaches depends on your app’s structure and user flow. Here's a guide to help you decide:

Launching with Navigator.push

This approach is ideal when:

Example use case: A social app where users access messaging only after performing other actions like exploring content or adding friends.

Embedding as a Widget in the Build Method

This approach is suitable when:

Example use case: A messaging app where conversations are the primary focus, and users don’t need to navigate away from the chat interface frequently.

1. Setting up notifications

Now that your chat functionality is up and running, it's time to enable notifications so users never miss a message. CometChat’s Notifications module allows you to set up and manage notifications across multiple providers directly from the dashboard, ensuring centralized control and effortless configuration. You can easily integrate push notifications with APNs and FCM, email notifications with SendGrid, and SMS alerts with Twilio, or use webhooks to connect with any provider of your choice.

You can also enable notification preferences for your users, allowing them to customize when and how they receive notifications. Additionally, our customizable templates let you tailor notifications to your app’s tone and branding.

 2. Setting up advanced moderation

Next, we’ll explore CometChat’s powerful moderation capabilities, which you can enable using the CometChat SDK. These features are designed to help maintain a safe, respectful environment for users and allow you to moderate content in real time.

Front-end moderation

Moderation queue:

Use our centralized moderation dashboard to give app admins an organized view of flagged messages, reported users, and blocked content. From this dashboard, admins can take real-time action on flagged content, issue user bans or warnings, and escalate issues for higher-level review, all in one place.

Proactive content moderation:

Use our advanced AI filters to prevent harmful content from entering your chat. These filters automatically screen every message exchanged in your app for violations defined by you and take action based on the moderation rules you’ve set up with our rules engine.

CometChat’s rules engine lets you create custom rules to address common moderation scenarios. You can define which filters to use for identifying violations and specify how to handle them, such as blocking a user or removing them from a group. This helps you keep your app free from:

3. Using Webhooks to extend your chat app's functionality

Leverage webhooks to trigger actions based on key events like message exchanges, user interactions, group changes, and call activities. You can use them to automate tasks, integrate with external services, and optimize the chat experience in your app. You can configure these webhooks directly from the CometChat dashboard.

Here’s a list of available webhooks:

Theme-level customization in the CometChat UI Kit allows you to modify the overall appearance of your app by adjusting its colors and typography. This is done through two main components:

• Palette: For defining a color scheme.

• Typography: For customizing text styles.

Customizing the Palette

The Palette class helps you define a color scheme for your app. You can customize properties like background, primary, secondary, and accent colors.

Example: Setting a Custom Color Palette

To switch between light and dark modes change the mode property of the Palette class:

Customizing Typography

The Typography class lets you define text styles such as font size, font family, and weight for headings, titles, captions, and other text elements.

Example: Setting Custom Typography

Integrating the Custom Theme

Once you define the custom CometChatTheme, pass it to the CometChatUIKit widget:

Customizing your Flutter Chat App: Component-Level Customization

Conversations component customisation

The Conversations component displays all conversations related to the currently logged-in user. To ensure the component aligns with your app's design and branding, you can easily customize its appearance by adjusting the properties exposed by the ConversationsStyle class. Below, you'll find a table outlining all the properties you can modify to tailor the component to your specific needs.

For more advanced customization, you can define custom views within the Conversations component. This allows you to fully control and tailor each element of the interface, such as layouts, views, and UI elements, ensuring that the component perfectly matches your app's overall aesthetics and functionality. .

Messages component customization 

The Messages component is a central feature of our chat interface, responsible for rendering the area where messages are exchanged between users and groups. It plays a key role in managing the real-time flow of messages within the app. Below, you'll find a table outlining all the properties you can modify to tailor the messages component to your specific needs

Preparing for Deployment

Before deploying the app, follow these steps:

Step 1: Update App Metadata

Update your app's metadata, such as app name, icons, and version:

• App Name: Update in android/app/src/main/AndroidManifest.xml and ios/Runner/Info.plist.

• App Icons: Use tools like App Icon Generator to create platform-specific icons.

• Versioning: Update version in pubspec.yaml:

Step 2: Build the App

Create platform-specific build files.

For Android:

For iOS:

Step 3: Configure Firebase

If your app uses Firebase for push notifications or analytics:

• Add google-services.json (Android) and GoogleService-Info.plist (iOS) to their respective directories.

• Modify Gradle files for Android and enable Firebase services.

Step 4: Test Release Build

Install the release build on test devices for final validation:

Deploying the App

Once the app passes all tests, deploy it to app stores.

Deploying to Google Play Store

Generate a signed APK:

Sign the APK:

• Add the keystore file to the android/app directory.

• Configure the signing properties in android/app/build.gradle:

Upload the APK to the Google Play Console.

Deploying to Apple App Store

Ensure you have a paid Apple Developer account. 

Archive the app in Xcode:

Open the project in Xcode, go to Product > Archive, and upload the build to App Store Connect.

Haris Kumar

Lead Content Strategist , CometChat

Haris brings nearly half a decade of expertise in B2B SaaS content marketing, where he excels at developing strategic content that drives engagement and supports business growth. His deep understanding of the SaaS landscape allows him to craft compelling narratives that resonate with target audiences. Outside of his professional pursuits, Haris enjoys reading, trying out new dishes and watching new movies!