文档概览/
Chat/
UIKit/
Flutter/
跑通 Demo/

跑通 Demo

通过阅读本文，您可以了解集成 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 平台上的后端服务之间的正确通信至关重要。