This is beta documentation for Stream Chat Flutter SDK v10. For the latest stable version, see the latest version (v9).

Avatars

Overview

Avatar components in v10 (design-refresh) use a StreamAvatarSize enum instead of BoxConstraints for sizing, and onTap callbacks have been removed — wrap the avatar in a GestureDetector or InkWell instead.

StreamUserAvatar

Displays a user's avatar with optional online indicator.

Breaking changes:

constraints → size (StreamAvatarSize enum)
showOnlineStatus → showOnlineIndicator
onTap removed — wrap with GestureDetector
borderRadius, selected, selectionColor, selectionThickness removed

GestureDetector(
  onTap: () => showProfile(user),
  child: StreamUserAvatar(
    user: user,
    size: StreamAvatarSize.lg,       // 40px diameter
    showOnlineIndicator: true,
  ),
)

StreamChannelAvatar

Displays an avatar for a channel (1:1 shows the other user's avatar; group shows a grid).

Breaking changes:

constraints → size (StreamAvatarGroupSize enum)
onTap, borderRadius, selected removed
ownSpaceAvatarBuilder, oneToOneAvatarBuilder, groupAvatarBuilder removed

GestureDetector(
  onTap: () => openChannel(channel),
  child: StreamChannelAvatar(
    channel: channel,
    size: StreamAvatarGroupSize.lg,   // 40px
  ),
)

StreamUserAvatarGroup (formerly StreamGroupAvatar)

StreamGroupAvatar has been renamed to StreamUserAvatarGroup. It now accepts users (Iterable<User>) instead of members (List<Member>).

Breaking changes:

Renamed: StreamGroupAvatar → StreamUserAvatarGroup
members → users (extract User from Member)
channel parameter removed
constraints → size (StreamAvatarGroupSize enum)
onTap, borderRadius, selected removed

GestureDetector(
  onTap: () => showGroupInfo(),
  child: StreamUserAvatarGroup(
    users: otherMembers.map((m) => m.user!),
    size: StreamAvatarGroupSize.lg,
  ),
)

StreamUserAvatarStack

A new component for displaying overlapping user avatars (e.g., thread participants). Replaces manual Stack + Positioned implementations.

StreamUserAvatarStack(
  users: threadParticipants,
  size: StreamAvatarStackSize.xs,   // 20px
  max: 3,
  overlap: 0.33,
)

Parameter	Type	Default	Description
`users`	`Iterable<User>`	required	Users to display
`size`	`StreamAvatarStackSize?`	`.sm`	Avatar size
`max`	`int`	`5`	Max avatars before overflow badge
`overlap`	`double`	`0.33`	Overlap fraction (0.0–1.0)

Size Reference

StreamAvatarSize

Old Constraints	New Enum	Diameter
`BoxConstraints.tight(Size(20, 20))`	`.xs`	20px
`BoxConstraints.tight(Size(24, 24))`	`.sm`	24px
`BoxConstraints.tight(Size(32, 32))`	`.md`	32px
`BoxConstraints.tight(Size(40, 40))`	`.lg`	40px
`BoxConstraints.tight(Size(48, 48))`	`.xl`	48px
`BoxConstraints.tight(Size(80, 80))`	`.xxl`	80px

StreamAvatarGroupSize

Old Constraints	New Enum	Diameter
`BoxConstraints.tight(Size(40, 40))`	`.lg`	40px
`BoxConstraints.tight(Size(48, 48))`	`.xl`	48px
`BoxConstraints.tight(Size(80, 80))`	`.xxl`	80px

StreamAvatarStackSize

Old Constraints	New Enum	Diameter
`BoxConstraints.tight(Size(20, 20))`	`.xs`	20px
`BoxConstraints.tight(Size(24, 24))`	`.sm`	24px

If your old constraints don't match exactly, choose the closest available size.

Reactions

Localization