tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
即时通信 IM
    文档
    Download PDF

    Flutter

    最后更新时间：2025-02-18 17:44:12
    下载PDF
      通过阅读本文，您可以了解集成 Flutter UIKit 的方法。

      体验 Demo

      在开始之前，你可以尝试在这里使用嵌入的 UIKit 来试用 Flutter 聊天演示。
      移动 App
      Android & iOS
      Web
      这个 QR Code & '访问' 按钮指向相同页面
      Windows
      macOS
      
      
      
      
      
      Windows 10+
      

      环境要求

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

      支持平台

      我们致力于打造一套支持 Flutter 全平台的即时通信 IM SDK 及 TUIKit，帮助您一套代码，全平台运行。
      平台
      UIKit
      iOS
      支持
      支持
      Android
      支持
      支持
      Web
      支持，4.1.1+2版本起
      支持
      macOS
      支持，4.1.9版本起
      支持
      Windows
      支持，4.1.9版本起
      支持

      操作步骤

      1. 创建应用

      1. 登录控制台。如果您已有应用，请记录其 SDKAppID 及 SDKSecretKey。
      说明：
      1. 同一个控制台账号，最多可创建 300 个即时通信 Chat 应用。若已有 300 个应用，您可以先停用并删除无需使用的应用后再创建新的应用。
      2. 应用删除后，该 SDKAppID 对应的所有数据和服务不可恢复，请谨慎操作！
      2. 单击Create Application，在对话框中输入您的 Application name、product、Region，单击Create。
      

      2. 获取 SDKAppID 及 SDKSecretKey

      创建完成后，可在控制台总览页查看新建应用的 Status、SDKAppID、Expiration time 等：
      
      
      
      记录下 Application 信息中的 SDKAppID 及 SDKSecretKey。
      禁止：
      请妥善保管 SDKSecretKey，谨防泄露！

      3. 下载并配置 Demo 源码

      1. 下载 Demo 源码、安装依赖：
      # Clone the code
      git clone https://github.com/TencentCloud/chat-demo-flutter.git
      
      # Checkout the 'v2' branch
      git checkout v2
      
      # Clean the project. Important
      flutter clean
      
      # Install dependencies
      flutter pub get
      2. 配置用户信息用于登录。
      打开 lib/config.dart, 并且配置 sdkAppID, key：
      sdkAppID：请设置为 步骤2 中获取的 SDKAppID。
      key：请设置为 步骤2 中获取的 SDKSecretKey。
      警告：
      本文提到的获取 UserSig 的方案是在客户端代码中配置 key 并由 GenerateUserSig.dart 计算得出，该方法中 key 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
      正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

      4. 编译运行

      用 Android Studio 导入工程，并安装 Flutter 和 Dart 插件。
      
      在项目根目录执行如下命令安装依赖后，编译运行即可。
      flutter pub get

      平台配置

      Web

      Web 端 UIKit 集成相比 Android 和 iOS 端，需要一些额外步骤。如下：

      升级 Flutter 3.x 版本

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

      引入 JS

      说明
      如果您现有的 Flutter 项目不支持 Web，请在项目根目录下运行 flutter create . 添加 Web 支持。
      进入您项目的 web/ 目录，使用 npm 或 yarn 安装相关JS依赖。初始化项目时，根据屏幕指引，进行即可。
      cd web
      
      npm init
      
      npm i @tencentcloud/chat
      
      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/@tencentcloud/chat/index.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/group-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/relationship-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/signaling-module.js"></script>
      
      
      

      macOS

      macOS 平台需要其他配置。按照以下步骤配置 macOS 平台：
      1. 打开项目中的 macos/Runner/DebugProfile.entitlements和 macos/Runner/Release.entitlements 文件。
      2. 将以下行添加到每个文件:
      <key>com.apple.security.network.client</key>
      <true/>
      
      这些行授予您的应用程序作为客户端访问网络所需的权限。
      此配置对于确保您的应用程序与 macOS 平台上的后端服务之间的正确通信至关重要。
      
      联系我们

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

      联系我们
      技术支持

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

      提交工单
      7x24 电话支持
      Copyright © 2013-2025 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款