专为以下场景打造:FLUTTER
Flutter
Chat UI Kit
使用 Tencent RTC Flutter Chat UI Kit 创建互联的消息界面。根据产品布局和导航调整会话及消息组件。
开发者资源
Flutter Chat UI Kit 文档与示例
FLUTTER 聊天功能
核心功能,随时可接入
会话列表
- 最近对话
- 未读消息指示器
消息界面
- 联动式消息视图
- 集成式消息编辑器
媒体分享
- 照片和附件
- 原生媒体权限
人员与群组
- 单聊对话
- 群组互动
打造属于您的产品体验
- 调整 UI 源代码
- 适配您的导航
互联组件
- 底层 Chat SDK
- 您的应用身份
探索 Flutter Chat Components
了解各组件如何协同工作。
您的对话之家
将对话组件添加到已初始化的 Chat 应用中。
阅读文档import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';
const TencentCloudChatConversation()打开会话
显示所选用户的消息组件。
阅读文档TencentCloudChatMessage(
options: TencentCloudChatMessageOptions(
userID: recipientID,
),
)让人们相聚
添加联系人软件包,并将其组件放置到您的应用中。
阅读文档import 'package:tencent_cloud_chat_contact/tencent_cloud_chat_contact.dart';
const TencentCloudChatContact()开始使用
你的第一次对话从这里开始
- 01
- 02
- 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 常见问题
添加这些小组件前需要配置什么?
按照官方演示安装选定的 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 混用。

