The Interactive Gifts component is a virtual gift interaction platform designed to enhance the social experience of users. With this component, users can send virtual gifts to their favorite live stream hosts to show their appreciation, favoritism, and support.
The Interactive Gift Component supports setting like, gift sending panel, send gifts, play normal gift animation, play SVGA gift animation, etc.
Flutter
Android
iOS
The interactive gift component provides 2 view components:
GiftSendWidget: send gift message view, clicking it can bring up the gift panel.
GiftDisplayWidget: receive gift message view, it will display gift messages on this view.
The effect is shown below:
Gift Display Panel
Normal Gift Playback Effect
Full-Screen Gift Playback Effect
The gift component mainly provides 2 APIs:
GiftListPanelView: gift panel, presents the gift list, send gifts, and top-up.
GiftPlayView: Panel for playing gifts, automatically listens to gift messages.
The effect is shown below:
Gift Display Panel
Normal Gift Playback Effect
Full-Screen Gift Playback Effect
The gift component mainly provides 2 APIs:
GiftListView: gift panel, presenting the gift list and send gifts.
GiftPlayView: A panel for playing gifts, automatically listens for gift messages.
The effect is shown below:
Gift Display Panel
Normal Gift Playing Effect
Full-Screen Gift Playing Effect
Quick Connection
Note:
If you have already integrated the LiveKit component, we have by default included the gift component in LiveKit. You can directly experience the interactive gift feature in LiveKit.
Adding the Gift Component To the Project
Flutter
Android
IOS
1. Download the gift component from GitHub to your local machine, and copy the gift (TUILiveKit/Flutter/gift) directory to your project directory. For example, integrating the gift component in livekit, the directory is shown as below:
2. Add the local dependency of barrage under the dependencies section in your project's pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl:^0.19.0
# Add gift local dependency
gift:
path:../gift
3. Configure multilingual support by adding the multilingual support of the gift component to the localizationsDelegates and supportedLocales properties of your MaterialApp.
Construct GiftSendController and GiftSendWidget objects where you need to integrate the gift sending message, and add the constructed GiftSendWidget object to your Widget tree. Example code is as follows:
roomId:"liveRoomId",/// liveRoomId Replace with your live room ID
owner: ownerInfo,/// ownerInfo Replace with your live room host information
self: selfInfo,/// selfInfo Replace with your login user information
);
GiftSendWidget(controller: _giftSendController);
Implement the GiftListPanelViewOnSendGiftListener callback onSendGift to get the number of gifts and gift information. After preprocessing, you can call the GiftListPanelView function sendGift for the actual sending of gifts.
//...Here is the pre-processing, such as verifying the current user's balance, etc
GiftUser receiver =newGiftUser();
//...Here set the gift recipient information
giftListView.sendGift(gift, giftCount, receiver);
}
Create a GiftListView object and add it to your view. You also need to implement the GiftListViewDelegate callback method onSendGift.
When you click the send button on the GiftListView panel, you will receive this callback. You can get the number of gifts to be sent and the gift information in this method. After preprocessing, you can call the GiftListView function sendGift for the actual sending of gifts.
Construct GiftDisplayController and GiftDisplayWidget objects where you need to integrate the gift display message, and add the constructed GiftDisplayWidget object to your Widget tree. Example code is as follows:
The gift display component GiftPlayView will receive and play gift messages.
You only need to create a GiftPlayView object and add it to your view.
let giftPlayView =GiftPlayView(groupId: roomId)
// ...Add giftPlayView to your parent view and adjust the layout here
Listening To Gift Sending and Receiving Messages
Flutter
Android
IOS
If you need to get callback information for sending and receiving gifts, you can call the GiftDisplayController's setGiftCallback method. Example code is as follows:
_giftDisplayController?.setGiftCallback(
onReceiveGiftCallback: _onReceiveGiftCallback,/// _onReceiveGiftCallback can be replaced with your custom handling method
onSendGiftCallback: _onSendGiftCallback,/// _onSendGiftCallback can be replaced with your custom handling method
);
If you need to receive callback information for receiving gifts, implement the GiftPlayViewTUIGiftPlayViewListener function onReceiveGift.
If you need to get callback information for receiving gifts, you can implement the GiftPlayView's delegate GiftPlayViewDelegate's giftPlayView:onReceiveGift:gift:giftCount:sender:receiver function.
ToastUtil.toastLongMessage("query gift list error, code = "+ error);
}
}));
Note:
Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<Gift>, and set the gift list through GiftListView.setGiftList.
The animationUrl of the gift requires an SVGA animation.
If you need to modify the gift list of the gift panel:
Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
The animationUrl of the gift requires an SVGA animation.
Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
The gift's animationUrl requires an SVGA animation.
FAQs
Gift Component Initialization Timing
Since the gift component's controller needs to integrate some live room information parameters and user information, it should be loaded after the audience enters the live broadcast room or the anchor creates a live streaming room.