专为以下场景打造：FLUTTER

Flutter 直播 UI Kit

使用 Tencent RTC 的 Flutter Live Streaming UI Kit 连接创作者与观众。在 Flutter 应用中添加 TUILiveKit 小组件，用于开播、观看和发现房间。

开始构建探索 Live 演示

开发者资源

Flutter 直播 UI Kit 文档与示例

组件参考

探索 Flutter 直播 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 Flutter 直播 UI Kit 并连接用户。

Flutter 集成快速入门

示例与源码

查看产品的实际运行效果并了解其实现方式。

探索 Live 演示查看 Flutter 源代码

在 Flutter 中进行商品直播演示

让观众观看创作者的商品演示并参与对话。您的应用负责管理商品目录和购买体验。

探索直播购物

在 Flutter 中观看直播活动

将演示内容及其观众带入您的 Flutter 应用。把观看页面连接到房间，让用户可以观看直播活动。

探索活动直播

FLUTTER LIVE 功能

Flutter 直播功能

开始直播

主播和观众角色
房间生命周期管理

让人们相聚

直播视频播放
观众参与

打造属于您的产品体验

灵活的应用布局
平台专属构建模块

探索 Flutter 直播组件

将主播端视图、观众端视图和直播间列表连接到您的应用导航。

主播预览

为创作者提供一个起点

添加 Flutter 主播准备界面，让创作者在开播前预览摄像头画面。将该界面连接到经过身份验证的主播账户。

阅读文档

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAnchorOverlay(roomId: liveID),
));

观众端视图

将观看体验融入您的应用

使用所选直播间打开 Flutter 观众视图。将进入和退出房间的操作连接到应用导航。

阅读文档

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAudienceOverlay(
    roomId: liveID,
    liveInfo: LiveInfo(liveID: liveID),
  ),
));

直播房间列表

开启直播发现新入口

添加可浏览的列表，并将其连接到观看流程。

阅读文档

LiveListWidget(
  style: LiveListViewStyle.doubleColumn,
);

个性化定制

自定义您的 Flutter Live UI Kit

在 Flutter 应用中，围绕直播体验安排视频、观众互动和导航。

您的视觉品牌形象

使用平台提供的自定义选项调整视觉呈现。

阅读文档

开始使用

为您的 Flutter 应用添加直播

01
创建您的应用
为应用和测试用户启用 Live。
打开 Live 控制台
02
添加 Flutter 直播 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
连接到您的第一个房间
使用一个账户开播，另一个账户观看。
配置身份验证

Flutter Live UI Kit

flutter pub add tencent_live_uikit

import 'package:atomic_x_core/atomicxcore.dart';

await LoginStore.shared.login(
  sdkAppID: SDKAppID, userID: userID, userSig: userSig,
);

Flutter 直播 UI Kit 常见问题

使用 Flutter Live UI Kit 可以构建什么？

Flutter Live Streaming UI Kit 包含主播端、观众端和直播间列表界面。将这些 TUILiveKit 组件连接到您的用户账户和 Flutter 导航，即可创建完整的观看流程。

此 UI Kit 如何与 SDK 配合使用？

UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面，请选择 SDK。

Flutter 直播 SDK

如何将 Flutter 直播观看端连接到广播？

启用 Live 服务，验证观众身份，并加入主播创建的房间。使用不同账户测试 Flutter 观众端界面，并按照平台指南完成配置。

Flutter 观众端集成指南

如何对 Flutter 直播 UI Kit 的用户进行身份验证？

在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。

阅读身份验证指南

Flutter Live Streaming UI Kit 可以免费使用吗？

该界面与托管式 Live 服务承担不同的职责。请为您的应用开通该服务，并查看当前套餐、功能可用性和使用费用。

查看 Live 定价

如何将 Flutter 直播 UI Kit 集成到 Dart 项目中？

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

阅读平台指南

发布应用前如何测试 Flutter 直播 UI Kit？

测试主播与观众角色、支持的推流或播放事件及重连行为。

阅读平台指南

如何定制 Flutter 直播 UI Kit 的界面？

在持续维护的源码副本中定制主播页的 PNG 资源和 ARB 本地化文件。例如，修改 livekit_en.arb 中的文案，再运行 flutter gen-l10n 重新生成本地化代码。保留 ComponentTheme 和 LiveKit 导航观察器的接入。TUILiveRoomAnchorOverlay 必须作为独立路由打开，不能嵌套在 Container 或 Stack 中，因为它自行管理覆盖层和悬浮窗行为。

查看定制指南

Flutter Live 集成支持

集成问题

获取 Flutter 直播 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

讨论您的产品、预期用量和集成需求。

联系销售人员

将直播带入您的 Flutter 应用

使用 Flutter 直播 UI Kit 及其平台指南连接创作者与观众。

免费开始查看 UI Kit 指南

Flutter 直播 UI Kit

Flutter 直播 UI Kit 文档与示例

组件参考

接入指南

示例与源码

在 Flutter 中进行商品直播演示

在 Flutter 中观看直播活动

Flutter 直播功能

开始直播

让人们相聚

打造属于您的产品体验

探索 Flutter 直播组件

为创作者提供一个起点

将观看体验融入您的应用

开启直播发现新入口

自定义您的 Flutter Live UI Kit

您的视觉品牌形象

评论与内容

为您的 Flutter 应用添加直播

创建您的应用

添加 Flutter 直播 UI Kit

连接到您的第一个房间

Flutter 直播 UI Kit 常见问题

使用 Flutter Live UI Kit 可以构建什么？

此 UI Kit 如何与 SDK 配合使用？

如何将 Flutter 直播观看端连接到广播？

如何对 Flutter 直播 UI Kit 的用户进行身份验证？

Flutter Live Streaming UI Kit 可以免费使用吗？

如何将 Flutter 直播 UI Kit 集成到 Dart 项目中？

发布应用前如何测试 Flutter 直播 UI Kit？

如何定制 Flutter 直播 UI Kit 的界面？

Flutter Live 集成支持

集成问题

讨论您的应用

将直播带入您的 Flutter 应用