Customize the text message UI

Styles

In addition, you can also customize some styles, refer to the following:

Widget? background: The background of chat message list view.

bool visible: Display chat message list view or not.

bool showName: Display user name in message list view or not.

bool showAvatar: Display user avatar in message list view or not.

double? width: The width of chat message list view.

double? height: The height of chat message list view.

Offset? bottomLeft: The offset of chat message list view bottom-left position.

double opacity: The opacity of the background color for chat message list items. The default value is 0.5. If you set the backgroundColor, the opacity setting will be overridden.

Color? backgroundColor: The background color of chat message list items. If you set the backgroundColor, the opacity setting will be overridden. You can use backgroundColor.withOpacity(0.5) to set the opacity of the background color.

int? maxLines: The maximum number of lines of chat message list item. The default value is 3.

TextStyle? nameTextStyle: The text style for the name in the chat message list items.

TextStyle? messageTextStyle: The text style for the message in the chat message list items.

BorderRadiusGeometry? borderRadius: The border radius of chat message list items.

EdgeInsetsGeometry? paddings: The paddings of chat message list items.

Widget? resendIcon: The icon of re-send button.

Events

In addition, you can also customize click events refer to the following:

void Function(ZegoInRoomMessage message)? onClicked: Triggered when has click on the message item.

void Function(ZegoInRoomMessage message)? onLocalSend: Local message sending callback, This callback method is called when a message is sent successfully or fails to send.

void Function(ZegoInRoomMessage message)? onLongPress: Triggered when a pointer has remained in contact with the message item at the same location for a long period of time.

Example

Items

attributes

Map<String, String> Function()? attributes:

message attributes of local user, which will be appended to the message body.

if set, attributes will be sent along with the message body.

If you want to display some of your own data on the message, you can use attributes to bring your data out through this chat message.

in the params of builder in inRoomMessageConfig, the attributes of ZegoInRoomMessage will bring the data just now, you can customize it through the builder.

Example

leading/tailing builder

in order to make it easier to add custom controls to the original message (original message display widget = avatar + name + text), we have added a smaller scope builder. there are corresponding builders before and after avatar/name/text, which are empty by default. please note that if you use itemBuilder, this builder will be ignored.

ZegoInRoomMessageItemBuilder? avatarLeadingBuilder;

ZegoInRoomMessageItemBuilder? avatarTailingBuilder;

ZegoInRoomMessageItemBuilder? nameLeadingBuilder;

ZegoInRoomMessageItemBuilder? nameTailingBuilder;

ZegoInRoomMessageItemBuilder? textLeadingBuilder;

ZegoInRoomMessageItemBuilder? textTailingBuilder;

Below, we use attributes to carry user level data, and display the user level in front of avatar as an example:

Example

user join/leave notify

if you want to display user join/leave in message view, you can set notifyUserJoin/notifyUserLeave be true

bool notifyUserJoin: Whether to display user join messages, default is not displayed

bool notifyUserLeave: Whether to display user leave messages, default is not displayed

Here the reference code shows how to customize a message view:

Example

itemBuilder

To customize the message list item, you can set up the inRoomMessageView.itemBuilder. The itemBuilter method returns a Widget, and when the list is drawn, it calls back the itemBuilder function you set to get the Widget for rendering.

You can get and read the message from the itemBuilder paramete> r. The message is of type ZegoInRoomMessage and has the following > structure:

Defines

Besides, you can decide the effect when the message sent failed or successfully, and also set up the logic for sending the message again when the message failed to be sent.

Here the reference code shows how to customize a message view:

Example

View

If you want to fully customize the chat list and dynamically update chat messages, you can achieve this by listening to ZegoUIKitPrebuiltLiveStreamingController.message.stream.

Here the reference code shows how to customize the message view:

Example