文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊 SDK>含 UI 集成>语聊房>准备工作>准备工作（Flutter）

准备工作（Flutter）

最近更新时间：2026-01-08 17:33:41

我的收藏

本页目录：

功能预览

TUILiveKit 是一个功能全面的语聊组件，集成后可快速实现以下功能模块：
主播准备页
主播开播页
直播列表
观众观看页



















准备工作

开通服务

在使用 TUILiveKit 前，请先参考 开通服务，领取 TUILiveKit 体验版或开通大规模直播版套餐。

环境要求

Flutter
Flutter 3.27.4 或更高版本。
Dart 3.6.2 或更高的版本。
Android 平台
Android 5.0（SDK API Level 21）及以上版本。
Gradle 7.0 及以上的版本。
Android 5.0 及以上的手机设备。
iOS 平台
Xcode 15 或更高版本。
iOS 13.0 或更高版本。
已安装 CocoaPods 环境。如果您尚未安装，请 点击查看 安装步骤。

代码集成

步骤1：下载 TUILiveKit 组件

在工程的根目录下，通过命令行执行以下命令安装组件 tencent_live_uikit 插件。
flutter pub add tencent_live_uikit
安装命令执行成功后，控制台将输出如下信息：
Resolving dependencies... 
Downloading packages... 
......
+ tencent_live_uikit x.x.x
......
Changed xx dependencies!
xx packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

步骤2：工程配置

Android
iOS
1. 如果需要编译运行在 Android 平台，由于 SDK 内部使用了Java 的反射特性，需要将 SDK 中的部分类加入不混淆名单。
首先，需要在工程的 android/app/build.gradle 文件中配置并开启混淆规则：
  android {
    ......
    buildTypes {  
        release {  
            ......
            // 配置并开启混淆规则
            minifyEnabled true  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        } 
    }
}
在 android/app/proguard-rules.pro 文件中添加以下代码，如果该文件不存在则新建一个文件：
-keep class com.tencent.** { *; }
2. 在工程的 android/app/build.gradle 文件中配置开启 Multidex 支持。
  android {  
    ......
    defaultConfig {
      ......
      // 开启 Multidex 支持
      multiDexEnabled true
    } 
}
1. iOS 工程编译 release 版本时，需要配置符号保留规则。使用 Xcode 打开工程，在 TARGETS 列表中选择 target（通常是 Runner），选择项目 > Build Settings > Deployment，将其下的 Strip Style 设置为 Non-Global Symbols ，以保留所需要的全局符号信息。此配置是必需的，否则可能在运行时出现异常，无法进入房间。
2. （可选）如果需要在 iOS 模拟器上调试，并且您使用的 Mac 电脑使用的是 Intel 芯片，请在工程的 ios/Podfile 文件中添加以下代码：
target 'xxxx' do
  ......
end
......

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
      config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
    end
  end
end
3. 由于 TUILiveKit 会使用 iOS 的音频功能，需要授权麦克风的使用权限。
授权操作方法：在 iOS 工程的 Info.plist 的第一级 <dict> 目录下添加以下内容，这些说明将在系统请求权限时向用户显示：
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp需要访问您的麦克风权限，开启后录制的视频才会有声音</string>
完成以上添加后，在 ios/Podfile 中添加以下预处理器定义，用于启用麦克风权限。
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
      'PERMISSION_MICROPHONE=1',
      ]
    end
  end
end
配置成功后，App 可正常编译通过。

步骤3：配置页面导航和多语言功能

为了确保 TUILiveKit 能够正常管理页面导航和显示多语言界面，需要在 Flutter 应用框架中进行以下配置：
在 navigatorObservers 中添加 TUILiveKitNavigatorObserver.instance，用于监听页面路由变化和管理组件生命周期。
在 localizationsDelegates 中添加相关本地化代理，确保界面文案能够根据系统语言正确显示。
以 MaterialApp 框架为例，示例代码如下：
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// 您自己的 App 主类
class XXX extends StatelessWidget {
  const XXX({super.key});

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 添加 TUILiveKit 导航观察者，用于监听页面路由变化和生命周期管理
      navigatorObservers: [TUILiveKitNavigatorObserver.instance],
      // 添加本地化代理，支持多语言文案显示
      localizationsDelegates: [
      ...LiveKitLocalizations.localizationsDelegates,
      ...BarrageLocalizations.localizationsDelegates,
      ...GiftLocalizations.localizationsDelegates],
      
      // 您 App 的其他配置
      ......
    );
  }
}
配置成功后，TUILiveKit 页面跳转和国际化功能才能生效。

完成登录

代码集成完成后，您需要调用 TUILogin.login 完成登录，这是使用 TUILiveKit 的关键步骤，因为只有在登录成功后才能正常使用 TUILiveKit 的各项功能，请确保相关参数配置正确：
说明：
在实际项目场景下，强烈推荐 您在完成自己的用户身份验证等相关登录操作后，再调用 TUILiveKit 的登录服务。这样可以避免因过早调用登录服务，导致业务逻辑混乱或数据不一致的问题，同时也能更好地适配您项目中现有的用户管理和权限控制体系。
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async {
  await TUILogin.instance.login(
    1400000001,     // 请替换为开通服务控制台的 SDKAppID
    "denny",        // 请替换为您的 UserID
    "xxxxxxxxxxx",  // 您可以在控制台中计算一个 UserSig 并填在这个位置
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}
登录接口参数说明：
参数
类型
说明
SDKAppID
int
从 控制台 获取，中国站通常是以 140 或 160 开头的 10 位整数。
userID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用 1、123 等简单 ID。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig 类（example/lib/debug/generate_test_user_sig.dart）的 genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

（可选）浮窗版直播间配置

默认 App 的 MaterialApp 首页是在 rootNavigator 上显示。如果您希望直播间支持浮窗功能（即在直播过程中可以最小化直播窗口，悬浮在其他页面上方继续观看），需要在 rootNavigator 上添加一层二级导航器 secondaryNavigator，把首页移到 secondaryNavigator 上。直播页面的 Overlay 将会放在 secondaryNavigator 上展示。secondaryNavigator 用于承载 Overlay，并常驻 App，以实现悬浮窗的效果。
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
import 'package:tencent_live_uikit/common/widget/global.dart';

// 您自己的 App 主类
class XXX extends StatelessWidget {
  const XXX({super.key});

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
         // 首页配置
         home: Navigator(
            // Global.secondaryNavigatorKey 是 TUILiveKit 提供的用于管理浮窗页面的全局导航器 Key。
            key: Global.secondaryNavigatorKey,
            onGenerateRoute: (settings) => MaterialPageRoute(
              settings: const RouteSettings(name: 'home_widget'),
              builder: (BuildContext context) {
                // HomeWidget 是您自己的应用首页 Widget，请替换为您实际的首页类
                return const HomeWidget();
              },
            ),
          ),
         // 您 App 的其他配置
         ......
    );
  }
}
此步骤是进入浮窗版页面的必要配置，完整流程请参考 添加浮窗版主播页面 和 添加浮窗版观众观看页面 。如果您不需要接入浮窗版页面，请跳过此步骤。

下一步

恭喜您，现在您已经成功集成了语聊组件并完成了登录。接下来，可以实现主播开播、观众观看、直播列表等功能，可参考下表：
功能
描述
集成指引
主播开播
主播开播全流程功能，包括开播前的准备和开播后的各种互动。
主播开播
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
观众观看
直播列表
展示直播列表界面和功能，包含直播列表、房间信息展示功能。
直播列表

常见问题

关于重复登录？

无需在每次进房时登录。通常只需要完成一次 TUILogin.login 调用即可，我们建议您将 TUILogin.login 和 TUILogin.logout 与自己的登录业务关联。

iOS release 环境下无法进入房间问题？

请参考 工程配置 中 iOS 部分第 1 步：在 Xcode 中，在 TARGETS 列表中选择 target（通常是 Runner），选择项目 > Build Settings > Deployment，将其下的 Strip Style 设置为Non-Global Symbols ，以保留所需要的全局符号信息，否则可能在运行时出现异常，无法进入房间。

中国站
目录