专为以下场景打造:FLUTTER

Flutter
Chat UI Kit

使用 Tencent RTC Flutter Chat UI Kit 创建互联的消息界面。根据产品布局和导航调整会话及消息组件。

开发者资源

Flutter Chat UI Kit 文档与示例

为对话而生

为您的社区提供一个共享空间,用于制定计划、分享照片和日常交流。

每条消息都有专属空间

使用 Flutter 组件,将聊天功能融入紧凑屏幕和宽屏布局。

FLUTTER 聊天功能

核心功能,随时可接入

会话列表

  • 最近对话
  • 未读消息指示器

消息界面

  • 联动式消息视图
  • 集成式消息编辑器

媒体分享

  • 照片和附件
  • 原生媒体权限

人员与群组

  • 单聊对话
  • 群组互动

打造属于您的产品体验

  • 调整 UI 源代码
  • 适配您的导航

互联组件

  • 底层 Chat SDK
  • 您的应用身份

探索 Flutter Chat Components

了解各组件如何协同工作。

对话

您的对话之家

将对话组件添加到已初始化的 Chat 应用中。

阅读文档
conversations.dart
import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';

const TencentCloudChatConversation()

个性化定制

自定义您的 Flutter 聊天界面

将您的视觉风格和应用流程融入聊天体验。

让品牌融入每一次会话

通过 Flutter UI Kit 的主题和构建器调整视觉样式。

阅读文档

开始使用

你的第一次对话从这里开始

  1. 01

    创建您的应用

    设置 Chat 应用和测试用户。

    打开 Chat 控制台
  2. 02

    添加 Flutter Chat UI Kit

    按照平台指南连接您的项目。

    按照集成指南操作
  3. 03

    连接你的用户

    登录两个测试用户并发送第一条消息。

    连接您的用户
Flutter Chat UI Kit
终端
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 常见问题

添加这些小组件前需要配置什么?

按照官方演示安装选定的 UI 软件包、初始化 UI Kit、登录并注册组件。为您使用的媒体功能配置原生权限。Flutter UI Kit 和 Core SDK 具有不同的环境要求。

Flutter UI Kit 与 SDK 有何不同?

UI Kit 在消息 SDK 之上提供相互联动的界面组件。如果希望完全自行构建界面,请使用 Core SDK。

如何对 Flutter Chat UI Kit 的用户进行身份验证?

在后端生成生产环境 UserSig。将其传递给客户端用于身份验证,并将应用密钥保留在服务器上。

这些 Flutter 代码片段能否构成一个完整的应用?

这些内容展示的是各个集成步骤。请按照完整指南完成导入、初始化、登录、错误处理和目标平台专属配置。发布前,请使用不同账户测试消息功能。

Flutter Chat UI Kit 的使用量如何计费?

托管 Chat 服务的用量取决于您选择的套餐。请查看适用于您应用的内含功能和额度;可选插件和 Call 服务可能有单独的要求。

如何将 Flutter 聊天 UI Kit 集成到 Dart 项目中?

安装文档指定的 Flutter 包,并完成每个目标平台的原生项目配置。结合底层 iOS 与 Android 行为测试 widget 生命周期。

发布应用前如何测试 Flutter 聊天 UI Kit?

检查登录、SDK 就绪、发送与接收事件,以及重连后的消息状态。

如何定制 Flutter 聊天 UI Kit 的界面?

对于本页使用的 tencent_cloud_chat_conversation 包,可传入 TencentCloudChatConversationBuilders,通过 conversationHeaderBuilder 等构建器自定义组件。例如,将列表顶部替换为产品名称和搜索入口,同时保留已接入的会话列表。构建器签名应与已安装的包版本一致。这些 API 属于该包系列,不要与旧版 TIMUIKitChat 示例或其他 Flutter UI Kit 混用。

获取后续步骤所需的支持

构建你的下一次对话体验

使用 Flutter Chat UI Kit 构建你的 app。