Skip to main content

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.

User Avatar

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,
  ),
),

Did you find this page helpful?