tencent cloud

All product documents
Tencent Real-Time Communication
DocumentationTencent Real-Time CommunicationMulti-Participant Conference (with UI)Enhanced Features (TUIRoomKit)Bullet Screen Chat (Android & IOS & Flutter)
Bullet Screen Chat (Android & IOS & Flutter)
Download PDF
Last updated: 2025-04-01 17:55:29
Bullet Screen Chat (Android & IOS & Flutter)
Last updated: 2025-04-01 17:55:29
Download PDF

Feature Introduction

The interactive Danmaku function supports the following features: sending barrage messages, inserting custom messages, customizing message styles, etc. Danmaku messages support emoji input, adding fun to the messages and making the interaction more pleasant.

Usage Instructions

After you successfully integrate TUIRoomKit and successfully log in, you can use this feature. TUIRoomKit bullet screen supports the following features:
Send/receive text or emoji messages.
Hide the danmaku button.
Bullet screen automatically disappears after 5 seconds.
Danmaku Chat
Send emoji
Hide the danmaku (bottom bar: settings)










Feature Customization

If the current UI does not meet your requirements, you can modify it by changing the source code to achieve the UI effect you are satisfied with. For different platforms, please refer to:
Android
iOS
Flutter
You can achieve the UI effect you are satisfied with by modifying the source code in the directory Android/tuiroomkit/src/main/java/com/tencent/cloud/tuikit/roomkit/view/page/widget/FloatChat. For easier UI customization, an introduction to the bullet screen file is provided here.
// Position: Android/tuiroomkit/src/main/java/com/tencent/cloud/tuikit/roomkit/view/page/widget/FloatChat
FloatChat       
  └── View 
  │   └── MessageBarrageView.java       // Interface for each barrage message
  │   └── FloatChatSendView.java        // Input box interface for barrage sending
  └── TUIFloatChatButton.java           // Send button for barrage
  └── TUIFloatChatDisplayView.java      // Area for showing barrage messages
You can achieve the UI effect you are satisfied with by modifying the source code under the Source/Common/Components/FloatChat directory. For easier UI customization, an introduction to the bullet screen file is provided here.
FloatChat       
  └── FloatChatButton.swift          // Barrage sending button
  └── FloatChatDisplayView.swift      // Area for showing barrage messages
  └── FloatChatInputController.swift      // Input box interface for barrage sending
The barrage chat component of Flutter is located in the tencent_float_chat_widget plug-in. You can achieve the UI effect you are satisfied with by modifying the source code in the directory tencent_float_chat_widget/lib/float_chat. For easier UI customization, an introduction to the barrage file is provided here.
// File location: tencent_float_chat_widget/lib/float_chat
float_chat      
  ├── widgets
  ├── emoji_panel.dart          // Emoji pack panel widget
  ├── float_chat_button.dart    // Barrage chat button
  ├── input_widget.dart         // Input box widget for sending barrage
  ├── message_item.dart         // widget for each barrage message
  └── message_widget.dart       // ALL barrage message widget
  └── view.dart                     // Overall barrage widget displayed inside the room (including the barrage chat button and ALL barrage message widgets)

Critical Code

Android
iOS
Flutter

Core API

The Danmaku Chat component mainly provides two APIs:
TUIFloatChatButton: Pull up the barrage sending interface after clicking.
TUIFloatChatDisplayView: Area for showing barrage messages.
In scenarios where you need to send danmaku, create a TUIFloatChatButton. Click to bring up the input interface.
TUIFloatChatButton button = new TUIFloatChatButton(mContext, roomId);
mButtonContainer.addView(button);
In scenarios where you need to display danmu messages, use TUIFloatChatDisplayView to display danmu messages.
TUIFloatChatDisplayView view = new TUIFloatChatDisplayView(mContext, roomId);
mLayoutDisplayViewContainer.addView(view);
The Danmaku Chat component is mainly divided into two parts:
FloatChatButton: Pull up the barrage sending interface after clicking.
FloatChatDisplayView: Area for showing barrage messages.
You can create these two components by yourself and place them in any position of the view.
let floatchatButton = FloatChatButton()
floatchatButton.updateRoomId(roomId:"your room Id") // Set roomId
self.view.addSubView(floatchatButton)
let displayView = FloatChatDisplayView()
self.view.addSubView(displayView)
In the bullet screen chat component (tencent_float_chat_widget), the following classes are externally exposed:
FloatChatWidget: Contains the bullet screen chat button and the bullet screen message display area. You can perform layout in the following ways where needed:
import 'package:tencent_float_chat_widget/tencent_float_chat_widget.dart';
                       
FloatChatWidget(roomId: yourRoomId)  // Layout where you need, input the roomId of the room for sending and receiving messages.
InputWidget: The input box for sending bullet screen chat messages. You need to lay it out on the topmost layer of the Stack in the page you are laying out to prevent it from being covered by other components. Once the layout is completed, it is not shown by default. Once you click the bullet screen chat button in FloatChatWidget, the input box and keyboard will pop up automatically .
import 'package:tencent_float_chat_widget/tencent_float_chat_widget.dart';

Stack(
    children: [
      ...yourWidget,        // Another one of your widgets, here as an example
      const InputWidget(),  // Input box for sending bullet screen chat messages
    ],
)
FloatChatManager: The class provides a deleteStatus() method. When you log out of the current room, this method must be called to clear the bullet screen chat status.
import 'package:tencent_float_chat_widget/tencent_float_chat_widget.dart';

FloatChatManager().deleteStatus();
Note:
If you have any requirements or feedback during the integration and use process, you can contact: info_rtc@tencent.com.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

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