Environment | Version |
Flutter | Flutter 3.0.0 or later for the Chat SDK; Flutter 3.16.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. |
Platform | UIKit | ||
iOS | Supported | Supported | Supported |
Android | Supported | Supported | Supported |
Supported from v4.1.1+2 | Supported from v0.1.5 | Coming Soon... | |
Supported from v4.1.9 | Supported from v2.0.0 | Supported | |
Windows | Supported from v4.1.9 | Supported from v2.0.0 | Supported |
Supported from v5.0.0 | Supported from v1.0.0 | Supported |
SDKAppID
.UserID
values and their UserSig
values, and copy the UserID
, Key
, and UserSig
so they can be used to log in later.UserSig
distribution method is to use the server to generate UserSig
and provide an application-oriented API. When UserSig
is needed, your application can send a request to the business server for a dynamic UserSig
. For more information, see Generating UserSig.Integration Scheme | Applicable Scenario |
The Chat sample app is a complete chat application built with UIKit. If you need to implement chat scenarios, you can use the sample app for secondary development. Try it out here. | |
The Chat UI component library UIKit provides common UI components, such as conversation list, chat UI, and contacts. You can use the component library to quickly build a custom Chat application as needed. This scheme is recommended. | |
You can use the Low-level SDK, if UIKit cannot meet your UI requirements or you want to further customize your UI. |
# 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
lib/config.dart
, and specify the sdkappid
, userid
, and usersig
obtained and generated in the previous step.flutter run
Folder | Features |
lib | Program core directory |
lib/desktop | Desktop adaptation related code |
lib/setting | The related code for Profile and Settings pages |
lib
directory's lib/main.dart
file is the core file of this sample app program. As you can see, there are several lines of key code. The List<Widget> pages
component list is passed into bottomNavigation
for page switching.pages = [ const TencentCloudChatConversation(), const TencentCloudChatContact(), TencentCloudChatSettings( removeSettings: removeLocalSetting, setLoginState: changeLoginState, ), ];
TencentCloudChatConversation
conversation list component and TencentCloudChatContact
contacts component, you can use all associated UIKit components, including the Message, Contact, and Group Profile components, etc. These components can be navigated to through the components you manually import.TencentCloudChatMaterialApp
:MaterialApp
with TencentCloudChatMaterialApp
. This will automatically manage and configure the language, theme (with material3), themeMode, and other settings, ensuring that the UIKit's interface parameters are consistent with your project.TencentCloudChatMaterialApp
, check its source code and implementation, and manually import the necessary capabilities in your project's MaterialApp
.TencentCloudChat.controller.initUIKit
method to initialize and log in. The call instructions and reference code are as follows:await TencentCloudChat.controller.initUIKit(context: context,config: TencentCloudChatConfig(usedComponentsRegister: [TencentCloudChatConversationInstance.register,TencentCloudChatMessageInstance.register,/// The above registers are examples./// In this field, pass in the register of each sub Modular UI Package./// After installing each sub Modular UI Package, you need to declare it here before you can use it.],preloadDataConfig: TencentCloudChatInitDataConfig(/// Config related to preloading data, used to improve performance),userConfig: TencentCloudChatUserConfig(/// Config related to the user),),/// **[Critical]**: It's strongly advised to incorporate the following callback listeners for effectively managing SDK API errors and specific UIKit events that demand user attention. /// For detailed usage, please refer to the guide at https://pub.dev/packages/tencent_cloud_chat#introducing-callbacks-for-uikit . callbacks: TencentCloudChatCallbacks( onTencentCloudChatSDKFailCallback: (apiName, code, desc) {}, /// Handles SDK API errors. onTencentCloudChatUIKitUserNotificationEvent: (TencentCloudChatComponentsEnum component, TencentCloudChatUserNotificationEvent event) {}, /// Handles specific UIKit events that require user attention on a global scale. ),options: TencentCloudChatInitOptions(sdkAppID: , /// The SDKAppID of your Tencent Cloud Chat applicationuserID: , /// The userID of the logged-in useruserSig: , /// The userSig of the logged-in usersdkListener: V2TimSDKListener(), /// Event listener registered with the Chat SDK),plugins: [], /// Used plugins, such as tencent_cloud_chat_robot, etc. For specific usage, refer to the README of each plugin.);
flutter pub add tencent_cloud_chat_sdk
initSDK
to initialize the SDK.sdkAppID
.import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';TencentImSDKPlugin.v2TIMManager.initSDK(sdkAppID: 0, // Replace 0 with the SDKAppID of your Chat application when integratingloglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Loglistener: V2TimSDKListener(),);
TencentImSDKPlugin.v2TIMManager.login
method to log in with the test account.res.code
is 0
, the login is successful.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login (userID: userID,userSig: userSig,);
createTextMessage(String)
to create a text message.sendMessage()
and pass in the id
, while receiver
can be the ID of the other test account created earlier, groupID
is not required for sending a one-to-one message.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<V2TimMsgCreateInfoResult> createMessage =await TencentImSDKPlugin.v2TIMManager.getMessageManager().createTextMessage(text: "The text to create");String id = createMessage.data!.id!; // The message creation IDV2TimValueCallback<V2TimMessage> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage(id: id, // Pass in the message creation ID toreceiver: "The userID of the destination user",groupID: "The groupID of the destination group",);
nextSeq
and record its current position.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';String nextSeq = "0";getConversationList() async {V2TimValueCallback<V2TimConversationResult> res = await TencentImSDKPlugin.v2TIMManager.getConversationManager().getConversationList(nextSeq: nextSeq, count: 10);nextSeq = res.data?.nextSeq ?? "0";}
await TencentImSDKPlugin.v2TIMManager.getConversationManager().setConversationListener(listener: new V2TimConversationListener(onConversationChanged: (List<V2TimConversation> list){_onConversationListChanged(list);},onNewConversation:(List<V2TimConversation> list){_onConversationListChanged(list);},
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';List<V2TimConversation> _conversationList = [];_onConversationListChanged(List<V2TimConversation> list) {for (int element = 0; element < list.length; element++) {int index = _conversationList.indexWhere((item) => item!.conversationID == list[element].conversationID);if (index > -1) {_conversationList.setAll(index, [list[element]]);} else {_conversationList.add(list[element]);}}
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<List<V2TimMessage>> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().getGroupHistoryMessageList(groupID: "groupID",count: 20,lastMsgID: "",);List<V2TimMessage> msgList = res.data ?? [];// here you can use msgList to render your message list}
V2TimAdvancedMsgListener.onRecvNewMessage
.onRecvNewMessage
callback is triggered, you can add new messages to the historical message list as needed.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';final adVancesMsgListener = V2TimAdvancedMsgListener(onRecvNewMessage: (V2TimMessage newMsg) {_onReceiveNewMsg(newMsg);},/// ... other listeners related to message);TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener: adVancesMsgListener);
flutter create .
in the root directory of the project to add web support.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
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/Runner/DebugProfile.entitlements
and macos/Runner/Release.entitlements
files in your project.<key>com.apple.security.network.client</key><true/>
pod install
or flutter run
again.ios/Pods
folder and the ios/Podfile.lock
file and run the following command to reinstall the dependenciescd iossudo gem install ffipod install --repo-update
Flutter doctor
to detect whether the Flutter environment is ready.Nuget.exe not found, trying to download or use cached version.
nuget.exe
was not found on your system, so the program is attempting to download or use a cached one. Nuget.exe
is a command-line utility for the NuGet Package Manager and is used to manage dependencies in .NET
projects.nuget.exe
by following these steps:nuget.exe
as needed.nuget.exe
file to an appropriate location, for example, C:\\NuGet
.nuget.exe
to your PATH
environment variable to make the nuget.exe
globally available in the command line.
Was this page helpful?