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 userAvatarUrl in ZegoUIKitPrebuiltLiveAudioRoomConfig. 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 avatarBuilder to achieve more flexible customization.

Note

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 to userAvatarUrl. After setting this, Live Audio Room Kit will synchronize each user's userAvatarUrl in the room for you, and provide this parameter in avatarBuilder. This way, you can directly render each user's avatar in avatarBuilder.

Here is the reference code:

userAvatarUrl

avatarBuilder

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'
      ),
    );
  }
}

Copied!

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(),
            );
          },
      ),
    );
  }
}

Copied!