tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    Flutter

    Last updated: 2024-07-30 16:05:57
    Download PDF
      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 (Source Code) 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.19.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)
      iOS
      Supported
      Supported
      Android
      Supported
      Supported
      Supported from v4.1.1+2
      Supported
      Supported from v4.1.9
      Supported
      Windows
      Supported from v4.1.9
      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.
      Create and record two sets of UserID and UserSig at Usersig Tools for testing purpose.
      
      
      

      3. Download and Configure the Demo

      1. Download the source code and install dependencies:
      # 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. Configure the user info for login.
      Open lib/config.dart, and specify the sdkappid, userid, and usersig obtained and generated in the previous step.
      Warning：
      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.
      To respect the copyright of emoji design, the downloaded demo project does not contain sliced images of major emoji elements. You can use your local emoji packs to configure code. Unauthorized use of the emoji pack in the Chat demo may infringe on the design copyright.

      4. Compile and Run the Demo

      flutter run

      Expanding to More Platforms

      Tencent Cloud Chat for Flutter SDKs support Android, iOS and Windows platforms by default. You can also expand to more platforms (web and macOS).

      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 web
      
      npm init
      
      npm i @tencentcloud/chat
      
      npm 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.
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy