有奖捉虫:行业应用 & 管理与支持文档专题 HOT
?
?
?
欢迎使用腾讯云 IM Flutter 相关集成产品,通过阅读本文,您可以了解集成 Flutter SDK 或 UIKit 组件库的方法。

环境要求

环境
版本
Flutter
IM SDK 最低要求 Flutter 2.2.0 版本,TUIKit 集成组件库最低要求 Flutter 3.0.0 版本。
Android
Android Studio Dolphin | 2021.3.1 及以上版本,App 要求 Android 7.0 及以上版本设备。
iOS
Xcode 12.0 及以上版本,请确保您的项目已设置有效的开发者签名。

支持平台

我们致力于打造一套支持 Flutter 全平台的即时通信 IM SDK 及 TUIKit,帮助您一套代码,全平台运行。
平台
含 UI 及基础业务逻辑 TUIKit (tencent_cloud_chat_uikit)
iOS
支持
支持
Android
支持
支持
支持,4.1.1+2版本起
支持,0.1.5版本起
支持,4.1.9版本起
支持,2.0.0 版本起
支持,4.1.9版本起
支持,2.0.0 版本起
混合开发 (将 Flutter SDK 添加至现有原生应用)
5.0.0版本起支持
1.0.0版本起支持
说明
Web/macOS/Windows 平台需要简单的几步额外引入,详情请查看本文 拓展更多平台

体验 Demo

您可以通过我们的 DEMO,快速在线体验 TUIKit 各项能力。
以下各版本 DEMO,均由同一 Flutter 项目引入TUIKit 制作打包而成。单击获取 Demo 源码
平台
体验链接 / 下载二维码
备注
Android / iOS
?
?
?
扫描下载应用程序,适用于 Android 和 iOS。自动识别平台。
Web
?
?
?
支持桌面和移动浏览器,并根据需要自动调整布局。与下面链接的网站相同。
Web
支持桌面和移动浏览器,并根据需要自动调整布局。与之前的二维码链接到同一个网站。
macOS
按住 Control 键点按应用程序图标,然后从快捷菜单中选取“打开”。>>>单击查看详细步骤?
Windows
我们 Demo 的 Windows 版本,它是一个 UWP 应用程序。

前序工作

1. 您已 注册腾讯云 账号,并完成 实名认证
2. 参照 创建并升级应用 创建应用,并记录好 SDKAppID
3. IM 控制台 选择您的应用,在左侧导航栏依次点击 辅助工具->UserSig 生成&校验 ,创建两个 UserID 及其对应的 UserSig,复制UserID签名(Key)UserSig这三个,后续登录时会用到。
?
?
说明
该账户仅限开发测试使用。应用上线前,正确的 UserSig 签发方式是由服务器端生成,并提供面向 App 的接口,在需要 UserSig 时由 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

选择合适的方案集成 Flutter SDK

IM 提供了三种方式来集成,您可以选择最合适的方案来集成:
集成方式
适用场景
IM Demo 是一个完整的聊天 App,代码已开源,如果您需要实现聊天类似场景,可以使用 Demo 进行二次开发。
IM 的 UI 组件库TUIKit提供了通用的 UI 组件,例如会话列表、聊天界面和联系人列表等,开发者可根据实际业务需求通过该组件库快速地搭建自定义 IM 应用。推荐优先使用该方案
如果 TUIKit 不能满足您应用的界面需求,或者您需要比较多的定制,可以使用该方案。
为帮助您更好的理解 IM SDK 的各 API,我们还提供了API Example,演示各 API 的调用及监听的触发。

方案一:使用 Demo 修改

跑通 Demo

1. 下载 Demo 源码、安装依赖:
# Clone the code
git clone https://github.com/TencentCloud/chat-demo-flutter.git
?
# Install dependencies
flutter pub get
2. [可选] 在Web 上运行或部署
如果您想在 Web 上运行或部署此示例应用程序,您需要先完成一些额外的步骤。
导航到您项目的 web/ 目录,并使用 npm 或 Yarn 安装所需的 JavaScript 依赖项。
cd web
npm install
完成这些步骤后,您就可以在Web上运行或部署示例应用程序了。
3. 运行 Demo 项目:
#启动demo项目,请替换SDK_APPID、KEY两个参数
flutter run --dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
说明
--dart-define=SDK_APPID={YOUR_SDKAPPID} 其中{YOUR_SDKAPPID}需替换成您自己应用的 SDKAppID。
--dart-define=ISPRODUCT_ENV=false 对开发生产环境做判断,如您是开发环境请用 false。
--dart-define=KEY={YOUR_KEY} 其中{YOUR_KEY}需替换成官网控制台中的密钥(Key)信息。
请注意,把大括号去掉。
请注意,如果直接运行 Demo 源码,离线推送默认不可用,需要向厂商申请离线推送配置,才能使用。

如果需要在 IDE 中运行

Android Studio
Xcode
1. ?
在 Android Studio 中
安装 Flutter 和 Dart 插件。
Mac 平台:打开插件设置(在 v3.6.3.0 以上的系统打开 Preferences > Plugins)=> 选择 Flutter 插件并点击 安装 => 当弹出安装 Dart 插件提示时,点击 Yes => 当弹出重新启动提示时,点击 Restart。
Linux 或者 Windows 平台:打开插件设置 (位于 File > Settings > Plugins)= > 选择 Marketplace (扩展商店),选择 Flutter plugin 然后点击 Install (安装)。
?
?
2. 打开项目并获取依赖。 在 Android Studio 中打开 chat-demo-flutter 目录。
?
并在该路径执行命令安装依赖。
flutter pub get
3. 配置环境变量。 在右上角运行按钮旁,鼠标单击 main.dart,配置 Edit Configurations
?
在弹出窗口中,配置 Additional run args,输入环境变量(SDKAPPID等信息)。如:
# 请替换SDK_APPID、KEY两个参数
--dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
?
?
?
4. 创建 Android 模拟器。 启动您刚安装好的模拟器,并选中其。
?
单击界面右上角 Device Manager,完成 Create devices,创建模拟器。如果您需要使用 Google FCM 推送能力,建议安装支持 Google Play Store 的设备。
?
?
5. 运行项目。 根据需要,单击下图左侧 Run ,或右侧 Debug,以运行项目。
?
?
说明
UI 可能会有部分调整更新,请以最新版为准。
?
1. ?
在 Xcode
中打开 chat-demo-flutter/ios目录。
2. 连接 iPhone 真机,单击 Build And Run,iOS 工程等待编译完成,会有新窗口弹出 Xcode 工程。
3. 打开 iOS 工程,设置主 Target 的 Signing & Capabilities(需要苹果开发者账号),让项目可以在 iPhone 真机上运行。
4. 启动项目,在真机上进行 Demo 的调试。
?
?

Demo 代码结构概览

说明
我们 Demo 的 UI 及业务逻辑部分,使用 Flutter TUIKit。Demo 层本身仅用于构建 App,处理导航跳转及调用实例化 TUIKit 中各个组件。
文件夹
介绍
lib
程序核心目录
lib/i18n
国际化相关代码。这里的国际化,不包含 TUIKit 本身的国际化能力和国际化词条,您可按需引入
lib/src
项目主体目录
lib/src/pages
本 Demo 几个重点导航页。项目初始化完成后,由 app.dart 负责展示加载动画,并判断登录态,将用户引导至 login.darthome_page.dart。用户登录后,会将登录信息通过 shared_preference 插件,存储至本地。以后每次启动应用,若在本地发现原来的登录信息,则自动使用该信息进行登录,若无或登录失败,则引导至登录页。自动登录过程中,用户还在 app.dart ,可看到加载动画。home_page.dart含一个底部 Tab,支撑本 Demo 的四个主功能页的切换。
lib/src/pages/cross_platform/wide_screen/
桌面端适配相关文件。包含一个桌面端的全局 home_page.dart 页面,还有若干用于各个子组件展示的 dart 文件。
lib/utils
一些工具函数类。
基本上,lib/src 内每个 dart 文件引入了一个 TUIKit 组件,在文件内,实例化组件后,即可渲染页面。
主要文件如下:
lib/src 主要文件
文件介绍
add_friend.dart
申请添加好友页面,使用 TIMUIKitAddFriend 组件
add_group.dart
申请入群页面,使用 TIMUIKitAddGroup 组件
blacklist.dart
黑名单列表页面,使用 TIMUIKitBlackList 组件
chat.dart
主聊天页面,使用全套TUIKit聊天能力,使用 TIMUIKitChat 组件
chatv2.dart
主聊天页面,使用原子化能力,使用 TIMUIKitChat 组件
contact.dart
联系人页面 ,使用 TIMUIKitContact 组件
conversation.dart
会话列表界面,使用 TIMUIKitConversation 组件
create_group.dart
发起群聊页面,纯Demo实现,未使用组件
group_application_list.dart
入群申请列表页面,使用 TIMUIKitGroupApplicationList 组件
group_list.dart
群列表页面,使用 TIMUIKitGroup 组件
group_profile.dart
群资料及群管理页面,使用 TIMUIKitGroupProfile 组件
newContact.dart
联系人好友申请页面,使用 TIMUIKitNewContact 组件
routes.dart
Demo 的路由,导航至登录页 login.dart 或主页面 home_page.dart
search.dart
全局搜索及会话内搜索页面,使用 TIMUIKitSearch(全局搜索) 及 TIMUIKitSearchMsgDetail(会话内搜索) 组件
user_profile.dart
用户信息及关系链维护页面,使用 TIMUIKitProfile 组件
在移动端上,大部分 TUIKit 组件需要传入导航跳转方法,因此需要 Demo 层处理 Navigator
以上介绍了我们的 Demo,您可以直接直接修改它二次开发,或参照它实现您的业务需求。

方案二:含 UI 集成,使用 TUIKit 组件库,半天完成 IM 能力植入

UIKit V2 新版

UIKit V2 新版现已开放接入使用!
?
?
?
UIKit V2 经过全面重构,为您带来更出色的开发及使用体验。
包括全新简洁美观的 UI 界面, 开发者更友好的程序架构, 内置可切换的黑暗/日间模式, 更全面的国际化支持, 手机平板桌面端及 Web 全平台支持, 更多细节丰富体验, 更进一步的性能等更多强大的能力及设计.
您可阅读 集成基础功能 > Flutter 接入使用.

UIKit 稳定版

TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,例如会话列表、聊天界面和联系人列表等,开发者可根据实际业务需求通过该组件库快速地搭建自定义 IM 应用。参见 TUIKit 图文介绍
本部分为快速使用 TUIKit 介绍,详细入门指引可参见 TUIKit 集成基础功能
?
?
?

前提条件

您已经完成创建 Flutter 项目,或有可以基于的 Flutter 项目。

接入步骤

配置权限
由于 TUIKit 运行,需要拍摄/相册/录音/网络等权限,需要您在 Native 的文件中手动声明,才可正常使用相关能力。
Android
打开 android/app/src/main/AndroidManifest.xml ,在 <manifest></manifest>中,添加如下权限。
<uses-permission
android:name="android.permission.INTERNET"/>
<uses-permission
android:name="android.permission.RECORD_AUDIO"/>
<uses-permission
android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission
android:name="android.permission.VIBRATE"/>
<uses-permission
android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission
android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission
android:name="android.permission.CAMERA"/>
<uses-permission
android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission
android:name="android.permission.READ_MEDIA_VIDEO"/>
iOS
打开 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['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
end
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
'PERMISSION_PHOTOS=1',
]
end
end
end
说明
如您需要用到推送能力,还需要添加推送相关权限,详情可查看 Flutter 厂商消息推送插件集成指南
安装 IM TUIKit
我们的 TUIKit 已经内含 IM SDK,因此仅需安装tencent_cloud_chat_uikit,不需要再安装基础 IM SDK。
#在命令行执行:
flutter pub add tencent_cloud_chat_uikit
如果您的项目需要支持 Web,请在执行后续步骤前,查看 Web 兼容说明章节,引入 JS 文件。
初始化
1. 在您应用启动时,初始化 TUIKit。
2. 请务必保证先执行 TIMUIKitCore.getInstance() ,再调用初始化函数 init() ,并将您的sdkAppID传入。
3. 为方便您获取API报错及建议提醒用户的提示语,此处建议挂载一个 onTUIKitCallbackListener 监听,详见此部分
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
?
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
?
// init sdk. call this api where you need.
_coreInstance.init(
sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
// language: LanguageEnum.en, // 界面语言配置,若不配置,则跟随系统语言
loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
onTUIKitCallbackListener: (TIMCallback callbackValue){}, // [建议配置,详见此部分](/document/product/269/70746#onTUIKitCallbackListener)
listener: V2TimSDKListener(),
);
说明
请在本步骤 await 初始化完成后,再执行后续步骤。
登录测试账户
1. 此时,您可以使用最开始的时候,在控制台生成的测试账户,完成登录验证。
2. 调用 _coreInstance.login 方法,登录一个测试账户。
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
?
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
_coreInstance.login(userID: userID, userSig: userSig);
说明
该账户仅限开发测试使用。应用上线前,正确的 UserSig 签发方式是由服务器端生成,并提供面向 App 的接口,在需要 UserSig 时由 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig
实现:会话列表页面
您可以以会话列表作为您的 IM 功能首页,其涵盖了与所有有聊天记录的用户及群聊的会话。
?
?
?
请创建一个 Conversation 类,body 中使用 TIMUIKitConversation 组件,渲染会话列表。
实现:会话聊天页面
该页面由顶部主体聊天历史记录及底部发送消息模块组成。
?
?
?
请创建一个 Chat 类,body 中使用 TIMUIKitChat 组件,渲染聊天页面。
您最好传入一个 onTapAvatar 事件的处理函数,用于跳转至联系人的详细信息页。关于 UserProfile 类,会在下一步讲解。
实现:用户详情页面
该页面默认,可在只传入一个 userID 的情况下,自动根据是否是好友,生成用户详情页。
请创建一个 UserProfile 类,body 中使用 TIMUIKitProfile 组件,渲染用户详情及关系链页面。
?
?
?
此时,您的应用已经可以完成消息收发,管理好友关系,展示用户详情及展示会话列表。
更多能力
您还可以继续使用以下 TUIKit 插件快速实现完整 IM 功能。
TIMUIKitContact:联系人列表页面。
TIMUIKitGroupProfile:群资料页面,使用方式与 TIMUIKitProfile 基本一致。
TIMUIKitGroup: 群列表界面。
TIMUIKitBlackList:黑名单列表界面。
TIMUIKitNewContact:联系人(好友)申请列表。如需在外部显示小红点,可使用 TIMUIKitUnreadCount 小红点组件,其会自动挂载监听。
本地搜索TIMUIKitSearch 全局搜索组件,支持全局搜索联系人/群组/聊天记录,也支持使用 TIMUIKitSearchMsgDetail 在特定会话中搜索聊天记录。两种模式取决于是否传入 conversation
UI 组件全貌可参见 本图文概览详细文档
本部分仅为快速使用 TUIKit 介绍,详细入门指引可参见 TUIKit 集成基础功能

方案三:自实现 UI 集成

前提条件

您已经完成创建 Flutter 项目,或有可以基于的 Flutter 项目。

接入步骤

安装 IM SDK

使用如下命令,安装 Flutter IM SDK 最新版本。
在命令行执行:
flutter pub add tencent_cloud_chat_sdk
说明 如果您的项目还同时需要用于 Web桌面端(macOS、Windows),还需要一些额外步骤,具体请点击链接查看。

完成 SDK 初始化

调用initSDK,完成 SDK 初始化。
将您的 sdkAppID 传入。
import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';
import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
TencentImSDKPlugin.v2TIMManager.initSDK(
sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
loglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Log
listener: V2TimSDKListener(),
);
在本步骤,您可以针对 IM SDK 挂载一些监听,主要包括网络状态及用户信息变更等,详情可参见 该文档

登录测试账户

此时,您可以使用最开始的时候,在控制台生成的测试账户,完成登录验证。
调用TencentImSDKPlugin.v2TIMManager.login方法,登录一个测试账户。
当返回值res.code为0时,登录成功。
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login(
userID: userID,
userSig: userSig,
);
说明
该账户仅限开发测试使用。应用上线前,正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

发送消息

此处以发送文本消息举例,其流程为:
1. 调用 createTextMessage(String)创建一个文本消息。
2. 根据其返回值,拿到消息 ID。
3. 调用 sendMessage() 发送该ID的消息。receiver可填入您此前创建的另一个测试账户 ID。发送单聊消息无需填入groupID
代码示例:
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
?
V2TimValueCallback<V2TimMsgCreateInfoResult> createMessage =
await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.createTextMessage(text: "The text to create");
?
String id = createMessage.data!.id!; // The message creation ID
?
V2TimValueCallback<V2TimMessage> res = await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.sendMessage(
id: id, // Pass in the message creation ID to
receiver: "The userID of the destination user",
groupID: "The groupID of the destination group",
);
说明
如果发送失败,可能是由于您的 sdkAppID 不支持陌生人发送消息,您可至控制台开启,用于测试。
请单击此链接,关闭好友关系链检查。

获取会话列表

在上一个步骤中,完成发送测试消息,现在可登录另一个测试账户,拉取会话列表。
?
?
?
获取会话列表的方式有两种:
1. 监听长连接回调,实时更新会话列表。
2. 请求 API,根据分页一次性获取会话列表。
常见应用场景为:
在启动应用程序后立即获取会话列表,然后监听长连接以实时更新会话列表的变化。
一次性请求会话列表
为了获取会话列表,需要维护nextSeq,记录当前位置。
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
?
String nextSeq = "0";
?
getConversationList() async {
V2TimValueCallback<V2TimConversationResult> res = await TencentImSDKPlugin
.v2TIMManager
.getConversationManager()
.getConversationList(nextSeq: nextSeq, count: 10);
?
nextSeq = res.data?.nextSeq ?? "0";
}
此时,您可以看到您在上一步中,使用另一个测试账号,发来消息的会话。
监听长连接实时获取会话列表
您在此步骤中,需要先在 SDK 上挂载监听,然后处理回调事件,更新 UI。
1. 挂载监听。
await TencentImSDKPlugin.v2TIMManager
.getConversationManager()
.setConversationListener(
listener: new V2TimConversationListener(
onConversationChanged: (List<V2TimConversation> list){
_onConversationListChanged(list);
},
onNewConversation:(List<V2TimConversation> list){
_onConversationListChanged(list);
},
2. 处理回调事件,将最新的会话列表展示在界面上。
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
?
List<V2TimConversation> _conversationList = [];
?
_onConversationListChanged(List<V2TimConversation> list) {
for (int element = 0; element < list.length; element++) {
int index = _conversationList.indexWhere(
(item) => item!.conversationID == list[element].conversationID);
if (index > -1) {
_conversationList.setAll(index, [list[element]]);
} else {
_conversationList.add(list[element]);
}
}

接收消息

通过腾讯云 IM Flutter SDK 接收消息有两种方式:
1. 监听长连接回调,实时获取消息变化,更新渲染历史消息列表。
2. 请求 API,根据分页一次性获取历史消息。
常见应用场景为:
1. 界面进入新的会话后,首先一次性请求一定数量的历史消息,用于展示历史消息列表。
2. 监听长连接,实时接收新的消息,将其添加进历史消息列表中。
一次性请求历史消息列表
每页拉取的消息数量不能太大,否则会影响拉取速度。建议此处设置为20左右。
您应该动态记录当前页数,用于下一轮请求。
示例代码如下:
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
?
V2TimValueCallback<List<V2TimMessage>> res = await TencentImSDKPlugin
.v2TIMManager
.getMessageManager()
.getGroupHistoryMessageList(
groupID: "groupID",
count: 20,
lastMsgID: "",
);
?
List<V2TimMessage> msgList = res.data ?? [];
?
// here you can use msgList to render your message list
}
监听长连接实时获取新消息
历史消息列表初始化后,新消息来自长连接 V2TimAdvancedMsgListener.onRecvNewMessage
onRecvNewMessage回调被触发后,您可以按需将新消息添加进历史消息列表中。
绑定监听器示例代码如下:
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';
?
final adVancesMsgListener = V2TimAdvancedMsgListener(
onRecvNewMessage: (V2TimMessage newMsg) {
_onReceiveNewMsg(newMsg);
},
/// ... other listeners related to message
);
?
TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.addAdvancedMsgListener(listener: adVancesMsgListener);
此时,您已基本完成 IM 模块开发,可以发送接收消息,也可以进入不同的会话。
您可以继续完成 群组用户资料关系链离线推送本地搜索 等相关功能开发。

高阶功能集成

使用更多插件丰富 Flutter IM 使用体验

除 SDK 及 TUIKit 本体基础功能外,我们还提供了四个选装插件,帮助您丰富 IM 能力。
消息推送插件:支持厂商原生离线推送能力及在线推送能力,并支持推送您的其他业务消息,帮助您提高消息触达率。
音视频通话插件:支持类似微信的 一对一/群组 音视频 通话。
地理位置消息插件:提供选取位置/发送位置及解析展示位置消息的能力。
自定义表情插件:TUIKit0.1.5版本后,无自带表情包,需要使用此插件,快速简便集成表情能力。支持 Emoji Unicode 编码及自定义图片表情。集成代码可参考我们的 Demo
说明
如果您有好的想法及建议,欢迎随时 联系我们

拓展更多平台

腾讯云IM for Flutter 相关SDK默认支持 Android / iOS平台, 如果您需要拓展更多平台( Web/Desktop ),请参考本部分。

Flutter for Web支持

我们的 SDK,TUIKit(tencent_cloud_chat_uikit) 0.1.5版本,无 UI SDK(tencent_cloud_chat_sdk) 4.1.1+2 版本起,可兼容 Web 端。
相比 Android 和 iOS 端,需要一些额外步骤。如下:

升级 Flutter 3.x 版本

Flutter 3.x 版本 针对 Web 性能做了较多优化,强烈建议您使用其来开发 Flutter Web 项目。

引入 Flutter for Web 增补SDK

flutter pub add tencent_im_sdk_plugin_web

引入 JS

说明
如果您现有的 Flutter 项目不支持 Web,请在项目根目录下运行 flutter create . 添加 Web 支持。
进入您项目的 web/ 目录,使用 npmyarn 安装相关JS依赖。初始化项目时,根据屏幕指引,进行即可。
cd web
?
npm init
?
npm i tim-js-sdk
?
npm i tim-upload-plugin
打开 web/index.html ,在 <head> </head> 间引入这JS文件。如下:
<script src="./node_modules/tim-upload-plugin/index.js"></script>
<script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>
?
?
?

Flutter for Desktop(PC) 支持

我们的TUIKit(tencent_cloud_chat_uikit) 自 2.0.0 版本,无 UI SDK(tencent_cloud_chat_sdk) 4.1.9 版本起,可兼容 Desktop 端,包含Windows / macOS / 桌面 Web。相比移动端,需要一些额外步骤。如下:

升级 Flutter 3.x 版本

从 Flutter 3.0 版本起,才可用于打包 desktop 端,因此,如需使用,请升级至 Flutter 3.x 版本。

引入 Flutter for Desktop 增补 SDK

flutter pub add tencent_im_sdk_plugin_desktop

macOS修改

打开 macos/Runner/DebugProfile.entitlements 文件。
<dict></dict> 中,加入如下 key-value 键值对。
<key>com.apple.security.app-sandbox</key>
<false/>

可选操作:开通内容审核功能

在消息发送、资料修改场景中,很有可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,更很有可能违法并导致业务被监管部门查封。
即时通信 IM 支持内容审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。可以通过 云端审核 方式来实现。

常见问题

iOS 端 Pods 依赖无法安装成功

尝试方案一:配置运行后,如果报错,可以单击 Product > Clean Build Folder,清除产物后重新运行 pod installflutter run

?
?
?

尝试方案二:手动删除 ios/Pods 文件夹,及 ios/Podfile.lock 文件,并执行如下命令,重新安装依赖

cd ios
sudo gem install ffi
pod install --repo-update

佩戴 Apple Watch 时,真机调试 iOS 报错

?
?
?
请将您的 Apple Watch 调整至飞行模式,并将 iPhone 的蓝牙功能通过 设置 => 蓝牙 彻底关闭。
重新启动 Xcode(若打开),并重新运行 flutter run 即可。

Flutter 环境问题

如您需得知 Flutter 的环境是否存在问题,请运行 Flutter doctor 检测 Flutter 环境是否装好。

使用 Flutter 自动生成的项目,引入TUIKit 后,运行 Android 端报错

?
?
?
1. 打开 android\\app\\src\\main\\AndroidManifest.xml,根据如下,补全 xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label"tools:replace="android:label"
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="替换成您的 Android 端包名"
xmlns:tools="http://schemas.android.com/tools">
<application
android:label="@string/android_label"
tools:replace="android:label"
android:icon="@mipmap/ic_launcher" // 指定一个 icon 路径
android:usesCleartextTraffic="true"
android:requestLegacyExternalStorage="true">
2. 打开 android\\app\\build.gradle,补全 defaultConfigminSdkVersiontargetSdkVersion
defaultConfig {
applicationId "" // 替换成您的Android端包名
minSdkVersion 21
targetSdkVersion 30
}

Windows 11 运行 Demo 报错怎么办?

报错一:
Error waiting for a debug connection: The log reader stopped unexpectedly, or never started.
Error launching application on Windows.
1. 首先,将项目名称中的横线改为下划线。例如,将 "im-flutter-uikit-full-platform" 改为 "im_flutter_uikit_full_platform"。
2. 删除根目录下的 "windows" 文件夹。
3. 在命令行中运行以下命令:flutter create . --org=com.tencent.im.flutter。这将创建一个新的 Flutter 项目,并将其组织名称设置为 "com.tencent.im.flutter"。
4. 运行?flutter clean?命令以清除缓存。
5. 运行?flutter pub get?命令以获取项目所需的依赖项。
6. 最后,运行?flutter run -d windows?命令以在 Windows 平台上运行应用程序。
通过按照上述步骤操作,您可以尝试在新项目中运行应用程序,以确定问题是否出在您的项目中。如果新项目可以正常工作,则可以尝试将新项目中的 pubspec.yaml 文件复制到原来不工作的项目中,并保存以便 Flutter 可以运行新的 pubspec.yaml 代码。然后,您可以返回到旧的 pubspec.yaml 文件,这样它就可以正常工作了。
报错二:
Nuget.exe not found, trying to download or use cached version.
这个提示表明您的系统中没有找到 nuget.exe,因此程序尝试下载或使用缓存的版本。nuget.exe 是 NuGet 包管理器的命令行工具,用于在 .NET 项目中管理依赖项。
要解决此问题,您可以手动下载并安装 nuget.exe。以下是操作步骤:
1. 访问 NuGet 官方网站的下载页面:https://www.nuget.org/downloads?
2. 在 "Command-line" 部分,找到 "Windows x86 Commandline",点击 "Download" 下载?nuget.exe
3. 将下载的?nuget.exe?文件保存到一个合适的位置,例如?C:\\NuGet
4. nuget.exe 的路径添加到系统的环境变量 PATH 中。这样,您就可以在命令行中全局访问 nuget.exe

错误码如何查询?

IM SDK 的 API 层面错误码,请查看 该文档
TUIKit 的场景码,用于界面弹窗提示,通过 onTUIKitCallbackListener 监听 获得。全部场景码清单,请查看 该文档

联系我们

?点此进入IM社群,享有专业工程师的支持,解决您的难题。


http://www.vxiaotou.com