> ## Documentation Index
> Fetch the complete documentation index at: https://bkey.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatars & images

> ProfileAvatar, ChatAvatar, and ProfileImageWidget.

## ProfileAvatar

Circular avatar that shows a network image when available, falling back to an auto-generated initial + colour pair derived from the `name`.

```dart theme={null}
ProfileAvatar(
  imageUrl: user.avatarUrl, // String? — null shows initials
  name: user.fullName,
  size: 48,                 // diameter in logical pixels
)
```

| Prop       | Type      | Default | Description                                                          |
| ---------- | --------- | ------- | -------------------------------------------------------------------- |
| `imageUrl` | `String?` | —       | Remote image URL. Falls back to initials when null or fails to load. |
| `name`     | `String`  | —       | Used to derive initials and the fallback background colour.          |
| `size`     | `double`  | `40`    | Diameter of the circle in logical pixels.                            |

***

## ChatAvatar

Like `ProfileAvatar` but uses a `userId` string (not `name`) to seed the fallback colour, ensuring consistent colour-per-user across the app.

```dart theme={null}
ChatAvatar(
  imageUrl: null,
  name: 'Alice Doe',
  userId: 'u_123',
  size: 40,
)
```

| Prop       | Type      | Default | Description                           |
| ---------- | --------- | ------- | ------------------------------------- |
| `imageUrl` | `String?` | —       | Remote image URL.                     |
| `name`     | `String`  | —       | Used for initial extraction.          |
| `userId`   | `String`  | —       | Seeds the fallback background colour. |
| `size`     | `double`  | `40`    | Diameter in logical pixels.           |

***

## ProfileImageWidget

A tap-aware profile image that supports network URLs, asset paths, and local `File` objects. Network images are cached automatically via `cached_network_image`.

```dart theme={null}
ProfileImageWidget(
  imageUrl: profile.imageUrl,  // remote URL, asset path, or null
  radius: 40,
  onTap: pickNewAvatar,        // optional — shows an edit overlay
)
```

| Prop       | Type            | Default | Description                                                               |
| ---------- | --------------- | ------- | ------------------------------------------------------------------------- |
| `imageUrl` | `String?`       | —       | Image source — remote URL or asset path. `null` shows a placeholder.      |
| `radius`   | `double`        | `32`    | Radius of the circle (half the diameter).                                 |
| `onTap`    | `VoidCallback?` | `null`  | When set, the widget renders a camera-icon overlay and calls this on tap. |