User Avatar
User avatars on video calling screens are important for identifying users, creating a sense of presence, and expressing personality. As such, it is important to be able to customise user avatars according to your app specifications.
Customising the user avatar
The user avatar can be modified via the userAvatarTheme
parameter of the StreamCallParticipant
widget:
StreamCallContainer(
// ...
callContentBuilder: (
BuildContext context,
Call call,
CallState callState,
) {
return StreamCallContent(
call: call,
callState: callState,
callParticipantsBuilder: (
BuildContext context,
Call call,
CallState callState,
) {
return StreamCallParticipants(
call: call,
participants: callState.callParticipants,
callParticipantBuilder: (
BuildContext context,
Call call,
CallParticipantState participantState,
) {
return StreamCallParticipant(
call: call,
participant: participantState,
userAvatarTheme: StreamUserAvatarThemeData(),
);
},
);
},
);
},
),
Customising size of the avatar
You can change the size of the user avatar on the screen by providing it BoxConstraints
using the constraints parameter.
The default value of the constraints is BoxConstraints.tightFor(height: 40, width: 40)
.
StreamUserAvatarThemeData(
constraints: const BoxConstraints.tightFor(
height: 50,
width: 50,
),
),
Customising border radius of the avatar
You can change the border radius of the user avatar using the borderRadius
parameter.
The default value for border radius is 20
units.
StreamUserAvatarThemeData(
borderRadius: const BorderRadius.all(Radius.circular(25)),
),
Changing the style of initials displayed
If the user does not have an image to be displayed, initials of the user are displayed instead.
To change the style of these initials, you can use the initialsTextStyle
parameter:
StreamUserAvatarThemeData(
initialsTextStyle: TextStyle(
fontWeight: FontWeight.bold,
),
),