即时通信 IM Flutter（快速接入 含 UI ）

二、开通服务

请参考 开通服务 领取 TUIRoomKit 体验版，并在 应用管理 页面获取以下信息：

·SDKAppID：应用标识（必填），腾讯云基于 SDKAppID 完成计费统计。

·SDKSecretKey：应用密钥，用于初始化配置文件的密钥信息。

三、环境准备

五、步骤1：集成 TUIRoomKit 组件

在你的工程 pubspec.yaml 文件中，添加 tencent_conference_uikit 插件依赖。

dependencies: tencent_conference_uikit: 最新版本

执行以下命令安装组件：

flutter pub get

六、步骤2：工程配置

·使用 Xcode 打开你的工程，选择项目 > Build Settings > Deployment，将其下的 Strip Style 设置为 Non-Global Symbols，以保留所需要的全局符号信息。

·若你需要在 iOS 端使用音视频功能，需要授权麦克风和摄像头的使用权限（Android 端已在 SDK 中声明相关权限，你无需手动进行相关配置）。

在你 App 的 Info.plist（路径：ios/Runner/Info.plist）中添加以下两项，分别对应麦克风和摄像头在系统弹出授权对话框时的提示信息。

<key>NSCameraUsageDescription</key><string>TUIRoomKit 需要访问你的相机权限</string><key>NSMicrophoneUsageDescription</key><string>TUIRoomKit 需要访问你的麦克风权限</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', 'PERMISSION_CAMERA=1', ] end endend

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

为了确保 TUIRoomKit 能够正常管理页面导航和显示多语言界面，需要在 Flutter 应用框架中进行以下配置：

·在 navigatorObservers 中添加 RoomNavigatorObserver.instance，用于监听页面路由变化和管理组件生命周期。

·在 localizationsDelegates 中添加相关本地化代理，确保界面文案能够根据系统语言正确显示。

·使用 ComponentTheme 包裹在 MaterialApp 外层，确保所有 RoomKit 组件都能访问主题配置。

以 MaterialApp 框架为例，示例代码如下：

import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// 你自己的APP主类class XXX extends StatelessWidget { const XXX({super.key}); @override Widget build(BuildContext context) { return ComponentTheme( // 使用 ComponentTheme 包裹在 MaterialApp 外层，确保所有 RoomKit 组件都能访问主题配置。 child: MaterialApp( // 添加 RoomKit 导航观察者，用于监听页面路由变化和生命周期管理 navigatorObservers: [RoomNavigatorObserver.instance], // 添加本地化代理，支持多语言文案显示 localizationsDelegates: [ …RoomLocalizations.localizationsDelegates, …BarrageLocalizations.localizationsDelegates, ], supportedLocales: const [Locale('en'), Locale('zh')], // 你APP的其他配置 …… ), ); }}

配置后，组件将支持多语言并能正确处理页面跳转。

八、步骤4：登录

代码集成完成后，需要完成登录操作，这是使用 TUIRoomKit 的关键步骤。只有在登录成功后，才能正常使用 TUIRoomKit 的各项功能，因此请仔细检查相关参数配置是否正确：

注意：说明：

注意：在示例代码中，直接进行了登录接口的调用。但在实际项目场景下，强烈推荐你在完成自己的用户身份验证等相关登录操作后，再调用 TUIRoomKit 的登录服务。这样可以避免因过早调用登录服务，导致业务逻辑混乱或数据不一致的问题，同时也能更好地适配你项目中现有的用户管理和权限控制体系。

Dartimport 'package:atomic_x_core/atomicxcore.dart'; // TUIRoomKit内部有对atomic_x_core的依赖,这里直接import即可。var loginResult = await LoginStore.shared.login( sdkAppID: 1400000001, // 替换为你的 SDKAPPID userID: 'userID', // 替换为你的 UserID userSig: 'userSig', // 替换为你的 UserSig);if (loginResult.isSuccess) { // login success} else { // login error}

登录接口参数说明：

九、步骤5：设置头像和昵称

首次登录的用户没有头像和昵称信息，需要通过 LoginStore 的 setSelfInfo 接口设置个人信息：

import 'package:atomic_x_core/atomicxcore.dart';final result = await LoginStore.shared.setSelfInfo( userInfo: UserProfile(userID: 'userID', nickname: 'userName', avatarURL: 'avatarURL'),);if (result.isSuccess) { debugPrint("setSelfInfo success");} else { debugPrint("setSelfInfo failed code:${result.errorCode}, message:${result.errorMessage}");}

setSelfInfo 接口参数/返回值说明：

十、步骤6：创建房间

在 TUIRoomKit 组件中，RoomMainWidget 是集成了完整的多人音视频房间功能的核心界面，以下将向开发者演示如何以房主身份将 RoomMainWidget 嵌入到应用中。

十一、实现方式：

1. 构造进房的配置项：进入房间后是否需要自动打开音视频设备的配置项。

2. 配置房间创建选项：配置房间名称等信息。

3. 初始化房间主页面：通过房主身份初始化房间主页面。

4. 导航到房间页面：将 RoomMainWidget 推入导航栈。

注意：说明：

注意：移动端仅支持创建标准房间，如你需要创建大型研讨会房间，请参考 Web 快速接入 使用 Web 端创建。

十二、示例代码：

import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage 代表你加载房间主页面的页面class YourMainPage extends StatelessWidget { const YourMainPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton( onPressed: () => _createRoom(context), child: const Text('创建房间'), ), ), ); } void _createRoom(BuildContext context) { // 1. 构造进房的配置项 const config = ConnectConfig( autoEnableCamera: true, // 进房后是否自动开启摄像头 autoEnableMicrophone: true, // 进房后是否自动开启麦克风 autoEnableSpeaker: true, // 进房后是否自动开启扬声器 ); // 2. 配置房间创建选项 final options = CreateRoomOptions( roomName: 'roomName', // 房间名称 ); // 3. 初始化房间主页面 final behavior = RoomBehavior.create(options); // 4. 导航到房间页面 Navigator.of(context).push( MaterialPageRoute( builder: (context) => RoomMainWidget( roomID: 'roomID', behavior: behavior, config: config, ), ), ); }}

RoomMainWidget 构造函数参数详细说明：

ConnectConfig 参数详细说明：

十三、步骤7：加入房间

以下示例将向开发者演示如何以参与者身份将 RoomMainWidget 嵌入到应用中。

十四、实现方式：

1. 构造进房的配置项：进入房间后是否需要自动打开音视频设备的配置项。

2. 初始化房间主页面：通过参与者身份初始化房间主页面。

3. 导航到房间页面：将 RoomMainWidget 推入导航栈。

十五、代码示例：

import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage 代表你加载房间主页面的页面class YourMainPage extends StatelessWidget { const YourMainPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton( onPressed: () => _enterRoom(context), child: const Text('加入房间'), ), ), ); } void _enterRoom(BuildContext context) { // 1. 构造进房的配置项 const config = ConnectConfig( autoEnableCamera: true, // 进房后是否自动开启摄像头 autoEnableMicrophone: true, // 进房后是否自动开启麦克风 autoEnableSpeaker: true, // 进房后是否自动开启扬声器 ); // 2. 初始化房间主页面 const behavior = RoomBehavior.enter(); // 3. 导航到房间页面 Navigator.of(context).push( MaterialPageRoute( builder: (context) => RoomMainWidget( roomID: 'roomID', behavior: behavior, config: config, ), ), ); }}

参数详细说明请参考：RoomMainWidget 构造函数参数详细说明 和 ConnectConfig 参数详细说明

注意：说明：

注意：使用 TUIRoomKit 组件进入大型研讨会房间时，需确保 Web 端创建的研讨会房间的房间 ID 以 webinar_ 开头。

十六、AI 助手：知识咨询与代码集成

你在接入视频会议 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于产品文档。适用于查询 Room 组件和 AtomicXCore SDK 用法以及集成文档等场景，立即体验，提出你的第一个问题。

十七、核心功能

接入 RoomMainWidget 代码后，开发者将得到一个完整的多人音视频页面，内部包含成员管理，音视频设备控制，房间信息展示等功能，这是 TUIRoomKit 组件的核心。

十八、界面定制

注意：界面定制、图标定制、文案定制这部分章节内容，涉及到需要修改 TUIRoomKit 组件源码，通过 pub 依赖管理器集成 TUIRoomKit 为"不可变"的依赖项。每次执行 flutter pub get 时，Flutter 会：

注意：1. 检查 pubspec.lock 中记录的版本号。

注意：2. 从远程仓库重新下载对应版本的源码。

注意：3. 用下载的原始代码覆盖 .pub-cache/ 目录下的现有文件。

注意：因此，任何对缓存目录的手动修改都只是临时性的，下次执行安装命令时即被还原。

注意：

注意：推荐解决方案：

注意：1. Fork TUIKit_Flutter 的仓库。

注意：2. 在 fork 的仓库中修改并提交。

注意：3. 修改 pubspec.yaml ，指向自定义仓库和分支。

注意：dependencies: tencent_conference_uikit: git: url: https://github.com/your-username/TUIKit_Flutter.git ref: your-branch path: room

RoomMainWidget 房间主页面内功能丰富，可定制化度高，开发者可以根据实际产品需求，对 UI 进行定制化修改，以适配业务交互场景。以下将详细为开发者展示 RoomMainWidget 页面中视图组件，便于开发者快速修改。

RoomMainWidget 中组件详细说明

十九、图标定制

接入 TUIRoomKit 组件后，开发者可以根据实际 UI 交互需求直接替换组件下的图标资源，以适配开发者的业务场景。

TUIRoomKit 使用 assets/images/ 目录管理 UI 所需的图片资源，你可以直接替换该目录下的图片文件来自定义界面所需的图标。

常用的图片文件列表

20、文案定制

TUIRoomKit 使用 Flutter 标准的 ARB 文件来管理 UI 所需的文案显示，你可以直接修改 lib/base/language/i10n/ 目录下的语言文件来调整需要的文案：

22、每次进房都需要调用登录吗？

不需要。通常你只需要完成一次 LoginStore.shared.login 调用即可，我们建议你将 LoginStore.shared.login 和

LoginStore.shared.logout 与自己的登录业务关联。

23、iOS 在 release 下运行/打包后无法进房？

使用 Xcode 打开你的工程，选择项目 > Build Settings > Deployment，将其下的 Strip Style 设置为 Non-Global Symbols，以保留所需要的全局符号信息。

24、pubspec.yaml 文件有没有示例配置可以参考？

你可以参考 GitHub TUIKit_Flutter Example 或者 CNB TUIKit_Flutter Example 工程 pubspec.yaml 示例文件。

25、进房后无画面？

请前往手机设置 > App > 相机，检查摄像头权限是否开启，可参考如下示例：