Set avatar for users
User avatars are generally stored on the server. Live Streaming Kit (ZegoUIKitPrebuiltLiveStreaming) does not know the real profile picture of each user, so it uses the first letter of the username to draw the user avatars by default, as shown below:
To configure the custom user avatars, you can use the avatarBuilder to set a custom builder method.
Warning
Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters.
If you hardcode a URL, then everyone's avatar will be the one you hardcoded.
Here is the reference code:
Untitled
class LivePage extends StatelessWidget {
const LivePage({Key? key, required this.liveID, this.isHost = false})
: super(key: key);
final String liveID;
final bool isHost;
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveStreaming(
appID: YourSecret.appID,
appSign: YourSecret.appSign,
userID: localUserID,
userName: 'user_$localUserID',
liveID: liveID,
// Modify your custom configurations here.
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience()
..avatarBuilder = (BuildContext context, Size size, ZegoUIKitUser? user, Map extraInfo) {
return user != null
? Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
'https://your_server/app/avatar/${user.id}.png',
),
),
),
)
: const SizedBox();
},
),
);
}
}
1
When complete, the Live Streaming Kit (ZegoUIKitPrebuiltLiveStreaming) displays the custom user avatar that you set.