Customize the member list view
To customize the member list item, you can set up the memberList.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.
Besides, you can listen for item click events through onClicked in ZegoLiveStreamingMemberListEvents.
Here the reference code shows how to customize a member list 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 ZegoUIKitPrebuiltLiveStreaming(
appID: YourSecret.appID,
appSign: YourSecret.appSign,
userID: userID,
userName: 'user_$userID',
liveID: liveID,
events: ZegoUIKitPrebuiltLiveStreamingEvents(
memberList: ZegoLiveStreamingMemberListEvents(
onClicked: (user){
},
),
),
// Modify your custom configurations here.
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience()
..memberList = ZegoLiveStreamingMemberListConfig(
itemBuilder: (BuildContext context, Size size, ZegoUIKitUser user, Map<String, dynamic> extraInfo) {
return CustomMemberListItem(user: user);
},
),
);
}
}
1