Customize the text message UI

To customize the message list item, you can set up the ZegoUIKitPrebuiltLiveAudioRoomConfig.inRoomMessage.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 parameter. The message is of type ZegoInRoomMessage and has the following structure:

Untitled

class ZegoInRoomMessage {
  int messageID;
  ZegoUIKitUser user; // message sender.
  String message; // message content.
  int timestamp; // The timestamp at which the message was sent
  var state =
      ValueNotifier<ZegoInRoomMessageState>(ZegoInRoomMessageState.success); // message sending state.
}

Copied!

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:

Untitled

class LivePage extends StatelessWidget {
  const LivePage({Key? key, required this.roomID, this.isHost = false})
      : super(key: key);

  final String roomID;
  final bool isHost;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        appID: YourSecret.appID,
        appSign: YourSecret.appSign,
        userID: userID,
        userName: 'user_$userID',
        roomID: roomID,

        // Modify your custom configurations here.
        config: isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
          ..inRoomMessage = ZegoLiveAudioRoomInRoomMessageConfig(
            itemBuilder: (
              BuildContext context,
              ZegoInRoomMessage message,
              Map<String, dynamic> extraInfo,
            ) {
              /// how to use itemBuilder to custom message view
              return Text('${message.user.name} : ${message.message}');
            },
          ),
      ),
    );
  }
}

Copied!