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 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.
Why use CometChat instead of building it yourself?
To better understand how CometChat can accelerate your development process, here's a quick comparison of building a chat app using the traditional DIY approach versus leveraging CometChat:
| Feature | Traditional DIY | With CometChat UI Kit |
|---|---|---|
Real-time infrastructure
|
Manually set up WebSockets/Firebase, handle reconnections
|
Prebuilt real-time infrastructure handled by CometChat
|
Message delivery & sync
|
Custom logic for delivery, retries, offline sync
|
Built-in message sync, delivery & read receipts
|
Presence & typing indicators
|
Complex state handling across devices
|
Out-of-the-box presence & typing indicators
|
Authentication
|
Build and secure auth flows manually
|
Simple user login via CometChat SDK
|
UI development
|
Design and build every chat screen from scratch
|
Prebuilt, customizable Flutter widgets
|
Cross-platform consistency
|
Extra effort to maintain iOS & Android parity
|
Consistent UI and behavior across platforms
|
Time to production
|
Weeks to months
|
Days
|
In this tutorial, you’ll learn how to integrate the CometChat UI Kit into a Flutter application to build a production-ready real-time chat experience without managing complex real-time infrastructure or additional backend systems. This matters because native, real-time chat plays a key role in driving engagement and retention in modern mobile apps.
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 ready cometchat.com
You’ll use the CometChat UI Kit for Flutter, which includes prebuilt UI widgets that handle the complexity of messaging UI for you. cometchat.com
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:
Choose the default options for the project setup. Once the project is created, navigate to the project directory:
Step 3: Install CometChat UI Kit
Open the pubspec.yaml ile in your project's root directory. Add the following dependencies under the dependencies section to include the UI Kit:
Run the following command to fetch the dependencies:
Installation pulls in both the UI Kit and underlying CometChat SDK's Dart packages.
Step 4: Configure iOS & Android (Platform Setup)
iOS configuration
In ios/Podfile, add:
Ensure IPHONEOS_DEPLOYMENT_TARGET ≥ 12.
Run the following command to install the required pods:
Android configuration
In android/app/build.gradle ensure:
This config lets CometChat run on most devices.
Step 5: Initialize CometChat
In main.dart, import and initialize with your credentials:
Step 6: User Authentication
Create a simple login screen asking for User ID:
This uses the UI Kit’s built-in login implementation.
Step 7: Conversations Screen
Once logged in, show all chats using CometChatConversations widget:
This built-in widget displays conversation list, presence, and last message previews with minimal code.
Step 8: Chat Screen (One-to-One & Group)
One-to-One Chat
Show message UI with:
Group Chat
These widgets handles message rendering, sending, typing indicators, and read receipts automatically.
Step 9: Create & Manage Groups
Use provided UI Kit widgets to add the group creation functionality.
And list/manage members with:
These built-in widgets speed up group chat flows.
Step 10: Customize UI + Themes
The UI Kit supports light/dark themes, colors, fonts, and styling.
Example:
Advanced theming docs are available in the CometChat UI Kit documentation.
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
These can be integrated using CometChat’s SDK and additional widgets.
Step 12: Test & Deploy
Run on emulator or real device:
Verify:
Users log in
Conversations show
Messages send & receive
Groups work
UI matches your brand
Useful Links
CometChat Flutter UI Kit docs (latest)
CometChat UI Kit components overview
Sample GitHub apps for reference
These docs provide detailed widget APIs and examples to customize your app further
Flutter Sample App by CometChat
This is a reference application showcasing the integration of CometChat's Flutter UI Kit in a Flutter project. It demonstrates how to implement real-time messaging and voice/video calling features with ease.
Prerequisites
Sign up for a CometChat account to obtain your app credentials: App ID, Region, and Auth Key
iOS
XCode
Pod (CocoaPods) for iOS
An iOS device or emulator with iOS 12.0 or above.
Ensure that you have configured the provisioning profile in Xcode to run the app on a physical device.
Android
Android Studio
Android device or emulator with Android version 5.0 or above.
Installation
Clone the repository:
Checkout v5 branch:
Open the project in Android Studio by navigating to the cloned directory. Run flutter pub get to fetch all dependencies.
[Optional] Configure CometChat credentials:
Open the app_credentials.dart file located at sample_app/lib/app_credentials.dart and enter your CometChat App ID, Region, and Auth Key:
In the Run/Debug Configurations dropdown (on the top toolbar), select the preconfigured sample_app run configuration. Connect a physical device or select an emulator from the Device Selector dropdown. Click the Run button to launch the app.
Note: If the provisioning profile is not set up correctly in Xcode, you may encounter errors when running the app on a physical iOS device. Ensure that you have configured the provisioning profile before proceeding
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.
If you’re curious about how chat would actually feel inside your own Flutter project, this is a great place to start. Having a working reference makes it much easier to experiment, customize, and decide what fits your product, instead of building everything blindly from scratch.
For issues running the project or integrating with our UI Kits, consult our documentation or create a support ticket. You can also access real-time support via the CometChat Dashboard.
Haris Kumar
Lead Content Strategist , CometChat