Set avatar for users
User avatars are generally stored on the server. Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) uses the first letter of the username to draw the user avatars by default. While we allow you to customize the user avatars as needed.
Here are two options for you to customize the user avatar:
-
If you need to display a user's avatar, set the avatar image URL (PNG, JGP, JGEP, BMP, GIF, and WEBP are supported) to
userAvatarUrlinZegoUIKitPrebuiltLiveAudioRoomConfig. This way, Live Audio Room Kit will render the avatar for you based on the URL, rather than using the default letters. -
If you need to display a more complex avatar component, such as you need to render some decorations on the avatar, etc., you can use
avatarBuilderto achieve more flexible customization.
- The userAvatarUrl must be within 64 bytes. If exceeds, the default background is displayed.
- Even when using
avatarBuilder, you can still set the avatar URL touserAvatarUrl. After setting this, Live Audio Room Kit will synchronize each user'suserAvatarUrlin the room for you, and provide this parameter inavatarBuilder. This way, you can directly render each user's avatar inavatarBuilder.
Here is the reference code:
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: localUserID,
userName: 'user_$localUserID',
roomID: roomID,
// Modify your custom configurations here.
config: isHost
? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
: ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
/// The userAvatarUrl must be within 64 bytes. If exceeds, the default background is displayed.
..userAvatarUrl = 'your_avatar_url'
),
);
}
}
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: localUserID,
userName: 'user_$localUserID',
roomID: roomID,
// Modify your custom configurations here.
config: isHost
? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
: ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
..seat.avatarBuilder = avatarBuilder(BuildContext context, Size size, ZegoUIKitUser? user, Map extraInfo) {
return CircleAvatar(
maxRadius: size.width,
backgroundImage: YourAvatarImage(),
);
},
),
);
}
}