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

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.

Conversations

A home for your conversations

Add the conversation widget to your initialized Chat app.

Read the Documentation
conversations.dart
import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';

const TencentCloudChatConversation()

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 Documentation

GET STARTED

Your first conversation starts here

  1. 01

    Create your app

    Set up a Chat application and your test users.

    Open Chat Console
  2. 02

    Add the Flutter Chat UI Kit

    Follow the platform guide to connect your project.

    Follow the Integration Guide
  3. 03

    Connect your users

    Sign in two test users and send your first message.

    Connect Your Users
Flutter Chat UI Kit
Terminal
flutter pub add tencent_cloud_chat_common \
  tencent_cloud_chat_conversation tencent_cloud_chat_message
conversations.dart
import '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 Sales

Build your next conversation

Build your app with the Flutter Chat UI Kit.