tencent_float_chat_widget

Demonstrates how to use the tencent_float_chat_widget plugin.

Getting Started

Complete Project Configuration

Since the tencent_float_chat_widget has utilized the relevant features of the GetX state management library, you need to use GetMaterialApp instead of MaterialApp in your application. Or you can set the navigatorKey property in your MaterialApp to Get.key to achieve the same effect.

// This step requires importing the get package before proceeding. 
// Since the rtc_conference_tui_kit already has a dependency on get, you don't need to make any additional configurations in your pubspec.yaml.
import 'package:get/get.dart';  

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return GetMaterialApp(  // Use GetMaterialApp to replace MaterialApp
        // Your original MaterialApp content
    );
    }
}

Before using the floating chat component, you need to initialize and log in to IM:

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/models/v2_tim_callback.dart';
import 'package:tencent_cloud_chat_sdk/tencent_im_sdk_plugin.dart';

// Initialize
var initResult = await TencentImSDKPlugin.v2TIMManager.initSDK(
    sdkAppID: SDKAPPID,                     // Replace with your SDKAPPID
    loglevel: LogLevelEnum.V2TIM_LOG_INFO,  // Log registration level
    listener: V2TimSDKListener(),           // Event listener. When using the floating chat, pass an empty object here.
);
    
if (initResult.code == 0) { // Initialized successfully
    // Login   
    V2TimCallback imLoginResult = await TencentImSDKPlugin.v2TIMManager.login(
        userID: 'userId',   // Replace with your userID
        userSig: 'userSig', // Replace with your userSig
    );
}

Use tencent_float_chat_widget

Introduce the floating chat

tencent_float_chat_widget provides two widgets:

FloatChatWidget: Contains a widget to display chat messages and a button widget to send messages. Clicking this button will pop up the input box and keyboard.
InputWidget: The input box and emoji widget for sending messages. You need to place this widget at the top of the stack on the page where you place the floating chat component to avoid the input box being covered or conflicting with other components.

Clear State

When you exit the page containing the floating chat component (i.e., when the floating chat component is destroyed), you need to manually clear its content and state (if you use the GetX state management library to navigate to the page containing the floating chat component, you can ignore this step):

import 'package:tencent_float_chat_widget/tencent_float_chat_widget.dart';

FloatChatManager().deleteStatus();

Note:

The current floating chat feature only supports using one object at a time. If you need to use different objects on multiple pages, please clear the state of the previous object before initializing a new FloatChatWidget.