BUILT FOR FLUTTER
Flutter
Chat UI Kit
Create connected messaging screens with Tencent RTC’s Flutter Chat UI Kit. Adapt conversation and message widgets to your product’s layout and navigation.
DEVELOPER RESOURCES
Flutter Chat UI Kit Docs & Examples
Integration Guides
Install the Flutter Chat UI Kit and send a test message.
Examples & Source
Explore the messaging experience and the official developer resources.
Built for conversations
Give your community a shared space for plans, photos, and everyday discussion.
Space for every message
Bring chat into compact screens and wider layouts with Flutter components.
FLUTTER CHAT CAPABILITIES
The essentials, ready to connect
Conversation lists
- Recent conversations
- Unread message indicators
Messaging UI
- Connected message views
- An integrated composer
Media sharing
- Photos and attachments
- Native media permissions
People and groups
- Direct conversations
- Group interactions
Make it yours
- Adapt the UI source
- Fit your navigation
Connected components
- Chat SDK underneath
- Your application identity
Explore the Flutter Chat Components
See how the components fit together.
A home for your conversations
Add the conversation widget to your initialized Chat app.
Read the Documentationimport 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';
const TencentCloudChatConversation()Open the conversation
Show the message widget for a selected user.
Read the DocumentationTencentCloudChatMessage(
options: TencentCloudChatMessageOptions(
userID: recipientID,
),
)Bring people together
Add the contact package and place its widget in your app.
Read the Documentationimport 'package:tencent_cloud_chat_contact/tencent_cloud_chat_contact.dart';
const TencentCloudChatContact()CUSTOMIZATION
Customize Your Flutter Chat UI
Bring your visual style and application flow into chat.
Your brand, in every conversation
Adjust the visual style through Flutter UI Kit theming and builders.
Read the DocumentationGive shared moments more room
Compose messages and media into a conversation layout that fits your app.
Read the DocumentationGET STARTED
Your first conversation starts here
- 01
- 02
Add the Flutter Chat UI Kit
Follow the platform guide to connect your project.
Follow the Integration Guide - 03
flutter pub add tencent_cloud_chat_common \
tencent_cloud_chat_conversation tencent_cloud_chat_messageimport 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';
const TencentCloudChatConversation()Flutter Chat UI Kit FAQs
What needs to be configured before adding the widgets?
Install the selected UI packages, initialize the UI Kit, sign in, and register the components following the official demo. Configure native permissions for the media features you use. The Flutter UI Kit and Core SDK have separate environment requirements.
How is the Flutter UI Kit different from the SDK?
The UI Kit adds connected interface components on top of the messaging SDK. Use the Core SDK when you want to build the entire interface yourself.
How do I authenticate users of the Flutter Chat UI Kit?
Generate production UserSig on your backend. Pass it to the client for authentication and keep your application secret on the server.
Are these Flutter snippets a complete application?
They show individual integration steps. Follow the full guide for imports, initialization, login, error handling, and target-specific configuration. Test messaging with separate accounts before release.
How is Flutter Chat UI Kit usage priced?
Hosted Chat service usage follows your selected plan. Check the included features and allowances for your application; optional plugins and Call services can have separate requirements.
How do I integrate Flutter Chat UI Kit with Dart?
Install the documented Flutter package and complete native project configuration for each target. Test widget lifecycle together with the underlying iOS and Android behavior.
How do I test Flutter Chat UI Kit before releasing my app?
Check login, SDK readiness, send and receive events, and message state after reconnecting.
How do I customize the interface for Flutter Chat UI Kit?
For the tencent_cloud_chat_conversation package used here, supply TencentCloudChatConversationBuilders to customize widgets such as conversationHeaderBuilder. For example, replace the list header with your product's title and search entry while retaining the connected conversation list. Keep builder signatures matched to your installed package release. These APIs belong to this package family; do not mix them with older TIMUIKitChat examples or a different Flutter UI Kit.
Find support for your next step
Talk about your application
Discuss your product, expected usage, and integration needs.
Contact SalesBuild your next conversation
Build your app with the Flutter Chat UI Kit.

