tencent cloud

文档反馈

快速入门(Flutter)

最后更新时间:2024-02-20 14:46:50
    通过阅读本文,您可以了解集成 Flutter SDK 的方法。

    环境要求

    环境
    版本
    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,快速了解腾讯云 IM Flutter 跨平台 SDK 及 TUIKit 的能力。
    以下各版本 DEMO,均由同一 Flutter 项目引入TUIKit 制作打包而成。 Desktop(macOS/Windows)平台,SDK 已支持,DEMO 将于近期上线。
    平台
    体验链接 / 下载二维码
    备注
    Android / iOS
    
    
    
    扫描下载应用程序,适用于Android和iOS。自动识别平台。
    Web
    
    
    
    支持桌面和移动浏览器,并根据需要自动调整布局。与下面链接的网站相同。
    Web
    支持桌面和移动浏览器,并根据需要自动调整布局。与之前的二维码链接到同一个网站。
    macOS
    按住 Control 键点按应用程序图标,然后从快捷菜单中选取“打开”。详细步骤
    Windows
    我们 Demo 的 Windows 版本,它是一个 UWP 应用程序。

    前序工作

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

    选择合适的方案集成 Flutter SDK

    IM 提供了三种方式来集成,您可以选择最合适的方案来集成:
    集成方式
    适用场景
    IM Demo 是一个完整的聊天 App,代码已开源,如果您需要实现聊天类似场景,可以使用 Demo 进行二次开发。 可立即 体验 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)信息。

    也可以使用 IDE 运行:(可选步骤)

    Android Studio[](id:android)
    Xcode[](id:ios)
    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
    
    
    
    4. 在弹出窗口中,配置 Additional run args,输入环境变量(SDKAPPID等信息)。如:
    # 请替换SDK_APPID、KEY两个参数
    --dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
    
    
    
    5. 创建 Android 模拟器。 启动您刚安装好的模拟器,并选中其。 单击界面右上角 Device Manager,完成 Create devices,创建模拟器。如果您需要使用 Google FCM 推送能力,建议最好安装支持 Google Play Store 的设备。
    
    
    
    6. 运行项目。 根据需要,单击下图左侧 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 能力植入

    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();
    @override
    void initState() {
    _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){}, // [建议配置,详见此部分](https://www.tencentcloud.com/document/product/269/70746?from_cn_redirect=1#onTUIKitCallbackListener)
    listener: V2TimSDKListener());
    super.initState();
    }
    }
    说明
    请在本步骤 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 组件,渲染聊天页面。

    实现:用户详情页面

    该页面默认,可在只传入一个 userID 的情况下,自动根据是否是好友,生成用户详情页。
    请创建一个 UserProfile 类,body 中使用 TIMUIKitProfile 组件,渲染用户详情及关系链页面。

    
    
    更多能力

    您还可以继续使用以下 TUIKit 插件快速实现完整 IM 功能。
    TIMUIKitContact:联系人列表页面。
    TIMUIKitGroupProfile:群资料页面,使用方式与 TIMUIKitProfile 基本一致。
    TIMUIKitGroup: 群列表界面。
    TIMUIKitBlackList:黑名单列表界面。
    TIMUIKitNewContact:联系人(好友)申请列表。如需在外部显示小红点,可使用 TIMUIKitUnreadCount 小红点组件,其会自动挂载监听。
    本地搜索TIMUIKitSearch 全局搜索组件,支持全局搜索联系人/群组/聊天记录,也支持使用 TIMUIKitSearchMsgDetail 在特定会话中搜索聊天记录。两种模式取决于是否传入 conversation
    UI 组件全貌可参见 本图文概览详细文档

    方案三:自实现 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 Ffltter 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 模块开发,可以发送接收消息,也可以进入不同的会话。
    您可以继续完成 群组用户资料关系链离线推送本地搜索 等相关功能开发。
    详情可查看 自实现 UI 集成 SDK 文档

    高阶功能集成

    使用更多插件丰富 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) 支持

    我们的无 UI SDK(tencent_cloud_chat_sdk) 4.1.9 版本起,可完美兼容 macOS、Windows 端。相比 Android 和 iOS 端,需要一些额外步骤。如下:

    升级 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/>

    常见问题

    iOS 端 Pods 依赖无法安装成功

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

    
    
    

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

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

    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 运行 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 监听 获得。全部场景码清单,请查看 该文档
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持