Docs Overview/
Chat/
UIKit/
Flutter/
跑通Demo/

跑通Demo

通过阅读本文，您可以了解集成 Flutter SDK 的方法。

体验 Demo

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





Windows 10+


环境要求

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

支持平台

我们致力于打造一套支持 Flutter 全平台的即时通信 IM SDK 及 TUIKit，帮助您一套代码，全平台运行。
平台
UIKit V2 ( tencent_cloud_chat)
iOS
支持
支持
Android
支持
支持
支持，4.1.1+2版本起
支持
支持，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，谨防泄露！
并创建两组 UserID 和 UserSig 在 Usersig Tools 用于测试，并记录。




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, userid, and usersig 从此前步骤获取的。
警告：
1. 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
2. 为尊重表情设计版权，下载的 Demo 工程中不包含大表情元素切图，您可以使用自己本地表情包来配置代码。未授权使用 Demo 中的表情包可能会构成设计侵权。

4. 编译运行

flutter run

拓展更多平台

腾讯云IM for Flutter 相关SDK默认支持 Android, iOS 和 Windows 平台， 如果您需要拓展更多平台（Web 和 macOS），请参考本部分。

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 项目。

引入 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 平台上的后端服务之间的正确通信至关重要。