Flutter

最近更新时间:2026-01-22 15:20:59

我的收藏
本文将指导您如何在 10 分钟内快速跑通 TUILiveKit 的 Flutter Demo,体验包含完整 UI 界面的视频直播/语音聊天室功能。

前提条件

开通服务

请参考 开通服务 领取 TUILiveKit 体验版,并在 应用管理 页面获取以下信息:
SDKAppID:应用标识(必填),腾讯云基于 SDKAppID 完成计费统计。
SDKSecretKey:应用密钥,用于初始化配置文件的密钥信息。

环境准备

在开始运行 Demo 之前,请确保您的开发环境满足以下要求:
平台
描述
Flutter
Flutter:需使用 3.29.3 或更高版本
Dart:需使用 3.7.2 或更高的版本
Android
Android Studio: 需使用 Android Studio 3.5 或更高版本。
Android 系统:支持 Android 5.0 或 更高版本的设备。
Java 版本:需使用 JDK 17。
iOS
Xcode:需使用 Xcode 15 或更高版本。
iOS 系统:支持 iOS 13.0 或更高版本的设备。
CocoaPods 环境:已安装 CocoaPods 环境。如果您尚未安装,请参见 CocoaPods 官网安装

IDE 环境配置

为帮助您更高效开发 Flutter 应用,请使用 Flutter 官方推荐的 Visual Studio Code 作为开发工具,可参考文档 Visual Studio Code 完成 Flutter 环境配置。

操作步骤

获取 Demo

1. 下载源码:从 GitHub 下载 TUIKit_Flutter 源码,或者直接在命令行运行以下命令:
git clone https://github.com/Tencent-RTC/TUIKit_Flutter.git
2. 安装依赖:使用 终端(Terminal) 工具进入 example 工程的 pubspec.yaml 所在目录,并执行 flutter pub get 命令安装依赖:
# example 工程 pubspec.yaml 文件位于 TUIKit_Flutter/application 目录下
cd TUIKit_Flutter/application
# 安装依赖
flutter pub get
3. 安装 iOS 依赖(仅 iOS 需要):使用 终端(Terminal) 工具进入 Podfile的 所在目录,并执行 pod install 命令安装依赖:
# ios 工程 Podfile 文件位于 application/ios 目录下
cd application/ios
# 安装依赖
pod install --repo-update
4. 清理 Gradle 全局配置(仅 Android 需要):如果您本地存在 ~/.gradle/init.gradle,运行如下命令:
rm -f ~/.gradle/init.gradle
说明:
如果您本地存在 Gradle 全局配置文件 ~/.gradle/init.gradle ,且该文件里配置有 allprojects.repositories ,需要进行以下操作:
方案一(推荐):删除 allprojects.repositories 相关配置。
方案二:直接删除 ~/.gradle/init.gradle 文件。
原因:该配置与 Gradle 高版本的仓库模式 RepositoriesMode.FAIL_ON_PROJECT_REPOS 冲突,会导致 运行报错
5. 配置 JDK 17(仅 Android 需要):application/android 目录下的gradle.properties里增加一条 org.gradle.java.home ,用来配置 JDK 17 路径,请替换成您实际的 JDK 17 的完整路径。参考如下:
# 请替换为您本地 JDK 17 的真实完整路径
org.gradle.java.home=xx/Java/JavaVirtualMachines/jdk-17.0.6.jdk/Contents/Home
6. 执行以上步骤后, 您可使用 Visual Studio Code 打开 TUIKit_Flutter/application 目录。

配置 Demo

1. 配置 sdkAppIdsecretKeyapplication 工程中,将获取的 sdkAppIdsecretKey 填入application/lib/debug/generate_test_user_sig.dart 文件:

注意:
本文的 Demo 示例中通过在客户端代码中配置 secretKey 进行鉴权,但 secretKey 很容易被反编译逆向破解,一旦密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
在正式的生产环境中,建议在您的服务端生成 UserSig,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 服务端生成 UserSig
2. 配置苹果开发者签名(仅 iOS 需要):在项目 TARGETS 下的 Signing & Capabilities 界面勾选 Automatically manage signing,配置您的苹果开发者账号和 Bundle Identifier


编译并运行 Demo

直播场景通常会使用到摄像头、麦克风设备,因此建议您使用真机调试和运行 Demo。

选择目标设备

当一个 Flutter 项目在 VS Code 中打开,您会在状态栏看到一些 Flutter 特有项,包括 Flutter SDK 版本和设备名称(或者无设备信息):

说明:
如果您没看到 Flutter 版本号或者设备信息,您的项目可能不被识别为一个 Flutter 项目。请确认 VS Code Workspace Folder 的目录中是否含有 pubspec.yaml
如果状态栏显示无设备,表明 Flutter 没有发现任何已连接的 iOS、Android 或者模拟器。您需要连接设备或者启动模拟器。
Flutter 扩展会自动选择上次连接的设备。然而,如果您有多个设备/模拟器连接,点击状态栏的 device 查看屏幕顶部的选择列表。选择您要用来运行或调试的设备。

运行


提示:
为了体验完整的直播流程,建议您将 Demo 分别在两台设备上运行并登录两个不同的用户(例如,一台设备作为主播,一台设备作为观众)。

1. 登录 & 注册

运行成功后,您需要先进行登录:在 用户id 处输入您的 UserID,如果该 UserID 未曾被使用,您将进入注册界面,可设置头像和昵称。
注意:
建议设置具有高辨识度的 UserID,避免使用“1”、“123”、“111”等简单字符串,以防被占用。
主播端(mike)
观众端(vince)













2. 视频直播

请点击首页的 直播功能区 进入直播页面:
直播列表
主播开播前预览
主播开始视频直播
观众观看直播













3. 语音聊天室

请点击首页的 直播功能区 进入直播页面:
直播列表
主播开播前预览
主播开始语聊直播
观众观看语聊房













下一步

Demo 跑通后,您可以根据业务需求,参考以下集成指引将对应功能集成到您的项目中:
功能
描述
集成指引
视频直播
支持超低延迟高清推流、多人连麦/PK、实时美颜、弹幕和礼物互动,轻松搭建互动视频直播场景。
语音聊天室
提供超清音质,支持多人连麦、房主麦位管理、实时文字聊天,轻松搭建交友/游戏开黑主题房间。

常见问题

CocoaPods 安装方式?

使用 gem 安装 CocoaPods:在终端中执行 sudo gem install cocoapods 命令进行安装。
提示:
sudo gem install cocoapods 安装过程中可能需要输入电脑密码,按提示输入管理员密码即可。

pod install 安装依赖速度慢或失败怎么办?

如果您运行 pod install 命令后,遇到安装依赖速度较慢、链接失败、下载超时等情况时,可尝试移除官方源,添加国内镜像源,然后再重试:
# 移除官方源
gem sources --remove https://rubygems.org/
# 添加国内镜像源
gem sources --add https://gems.ruby-china.com/

真机调试?

真机运行时需要开启开发者模式。
iOS 开启方式:将 iOS 设备连接至电脑,在设备上选择设置 > 隐私与安全性 > 开发者模式,打开开发者模式。
Android 开启方式:在设置中找到版本号进行多次点击来开启开发者模式。如果实在找不到,还可以去手机的官方网站查询或者在网上搜索具体的教程。

运行 Demo 提示签名错误或登录失败?

请检查您在 application/lib/debug/generate_test_user_sig.dart 文件中填写的 sdkAppIdsecretKey 是否正确,确保它们是您在 腾讯云控制台应用管理 页面获取到的密钥。

运行报错 Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']

如果运行遇到如下报错信息:
* What went wrong:
Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']
> Build was configured to prefer settings repositories over project repositories but repository 'xxx' was added by settings file 'settings.gradle'
请参考 获取 Demo 的步骤 4,清理 Gradle 全局配置

联系我们

售前咨询

当您需要购买咨询时,您可以直接通过 售前咨询 进行提问,会有专属客户经理在线为您解答,为您提供专业的上云方案。同时,您也可以直接致电销售人员,咨询热线:4009100100转1(工作日9:00 - 18:00)。

售后支持

当您遇到问题需要处理时,您可以直接通过 售后支持 进行提问,腾讯云工程师7 × 24小时在线为您提供服务。同时,您也可以直接致电客服人员,寻求相应的帮助,客服咨询:4009100100(7 × 24小时)。