# Avatars

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

```dart
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

```dart
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

```dart
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.

```dart
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.


---

This page was last updated at 2026-04-23T18:43:04.077Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/flutter/v10/stream_chat_flutter/avatars/](https://getstream.io/chat/docs/sdk/flutter/v10/stream_chat_flutter/avatars/).