Run Demo
This document describes how to integrate the SDK for Flutter.
Try Out the Demo
Before getting started, you can try out the Flutter Chat Demo with the embedded UIKit here.
Mobile App Android & iOS | Web The QR Code & 'Visit' button direct to the same page | Windows | macOS | |
 |  | | Windows 10+ | |
Environment Requirements
Environment | Version |
Flutter | Flutter 3.0.0 or later for the Chat SDK; Flutter 3.24.0 or later for the TUIKit component library. |
Android | Android Studio Dolphin | 2021.3.1 or later; and devices with Android 7.0 or later for apps. |
iOS | Xcode 12.0 or later. Ensure that your project has a valid developer signature. |
Supported Platforms
We offer a set of Chat SDK and UIKit for all Flutter platforms, allowing you to run one set of code on all platforms.
Platform | Low-level SDK (tencent_cloud_chat_sdk) | UIKit (tencent_cloud_chat_common, tencent_cloud_chat_message, tencent_cloud_chat_conversation, tencent_cloud_chat_contact, tencent_cloud_chat_sticker, tencent_cloud_chat_message_reaction, tencent_cloud_chat_text_translate, tencent_cloud_chat_sound_to_text, tencent_cloud_chat_push, tencent_calls_uikit) |
iOS | Supported | Supported |
Android | Supported | Supported |
HarmonyOS NEXT | Supported in version 8.4.6675-beta.2 | Developing |
macOS | Supported from v4.1.9 | Supported |
Windows | Supported from v4.1.9 | Supported |
Web | Supported from v4.1.1+2 | Supported |
Directions
1. Create an App
1. Log in to the Chat Console. If you already have an app, record its SDKAppID and SDKSecretKey.
Note：
1. A Chat account can create a maximum of 300 Chat apps. If you want to create a new app, you can disable and delete an unwanted app first.
2. Once an app (along with its SDKAppID) is deleted, the service it provides and all its data are lost. Please operate with caution.
2. Click 
Create Application, enter your Application name, product, Region, and click Create.
2. Obtain SDKAppID, SDKSecretKey and Login User
After creation, you can view the newly created app's Status, SDKAppID, Expiration time, etc., on the Applications page:
Record the SDKAppID and SDKSecretKey from the Application Information.
Danger:
Keep the SDKSecretKey properly to prevent disclosure.
3. Download and Configure the Demo
1. Download the source code and install dependencies:
# 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. Configure the user info for login.
Open
lib/config.dart, and specify the sdkappid and key obtained in the previous step.sdkAppID：set it to the SDKAppID obtained above.
key：set it to the SDKSecretKey obtained above.
Warning：
In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and feature debugging.
The correct
UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an app-oriented API. When UserSig is needed, your app can send a request to the business server to obtain a dynamic UserSig. For more information, see How to Generate UserSig on the Server.4. Compile and Run the Demo
Import the demo project with Android Studio, and install the Flutter and Dart plugins.
Execute the following command in the project root directory to install dependencies, then compile and run.
flutter pub get
Platform Configuration
HarmonyOS NEXT
Starting from version 8.4.6675-beta.2, the No-UI SDK (tencent_cloud_chat_sdk) supports HarmonyOS NEXT. This adaptation is developed based on the Flutter 3.22 version optimized for HarmonyOS.
HarmonyOS has adapted many third-party Flutter libraries. For the tencent_cloud_chat_sdk, the only required third-party library is path_provider. Therefore, you need to override the dependency in your project’s root pubspec.yaml file to use the HarmonyOS-adapted version of path_provider.
dependency_overrides:path_provider:git:url: "https://gitee.com/openharmony-sig/flutter_packages.git"path: "packages/path_provider/path_provider"
Web
To enable support for web, you need to perform the following extra steps in addition to those for enabling support for Android and iOS:
Upgrading to Flutter 3.x
Flutter 3.x has been dramatically optimized for web performance and is highly recommended for Flutter web project development.
Importing JS
Note:
If your existing Flutter project does not support web, run
flutter create . in the root directory of the project to add web support.Go to the
web/ directory of your project and run npm or yarn to install relevant JS dependencies. Initialize the project as instructed.cd webnpm initnpm i @tencentcloud/chatnpm i tim-upload-plugin
Open
web/index.html and import the JS files in <head> </head>. See below:<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
Additional configurations are required for the macOS platform. Follow the steps below to configure the macOS platform:
1. Open the
macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files in your project.2. Add the following lines to each file:
<key>com.apple.security.network.client</key><true/>
These lines grant your app the necessary permissions to access the network as a client.
This configuration is essential for ensuring proper communication between your app and the backend services on the macOS platform.
