tencent_float_chat_widget 1.0.4 tencent_float_chat_widget: ^1.0.4 copied to clipboard
A plugin providing a floating chat widget integrated with Tencent's chat services for real-time messaging.
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
);
}
}
Login #
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.