Documentation
Live Audio Room Kit
Customize prebuilt features
Set avatar for users

Set avatar for users

Last updated：2024-01-31 10:51

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 of 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 of seatConfig to 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 to avatar. After setting this, Live Audio Room Kit will synchronize each user's avatar 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'
      ),
    );
  }
}

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

ZEGO UIKits

Cloud Communications Products

Low-Code Products

AIGC

Supporting Services

Set avatar for users