跑通 Demo
通过阅读本文,您可以了解集成 Flutter SDK 的方法。
体验 Demo
移动 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,帮助您一套代码,全平台运行。
平台 | ||
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,谨防泄露!
3. 下载并配置 Demo 源码
1. 下载 Demo 源码、安装依赖:
# Clone the codegit clone https://github.com/TencentCloud/chat-demo-flutter.git# Checkout the 'v2' branchgit checkout v2# Clean the project. Importantflutter clean# Install dependenciesflutter 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 webnpm initnpm i @tencentcloud/chatnpm 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 平台上的后端服务之间的正确通信至关重要。