Avatar

An avatar stands in for a user. Pass an image and it fills the circle; pass a fallback and it shows beneath the image until the first frame arrives, so a dead or missing URL degrades to initials instead of crashing. Pick the box with size. It is static and non-interactive.

import 'package:fossui/fossui.dart';

FossAvatar(
  image: NetworkImage('https://example.com/v.png'),
  fallback: const Text('VL'),
  semanticLabel: 'Vitalik Larsen',
);

Fallback

With no image, the fallback fills the circle on its own. Initials are the usual choice, but any widget works. The fallback also shows through whenever the image is loading or fails to load.

FossAvatar(
  fallback: const Text('AB'),
);

FossAvatar(
  fallback: const Icon(LucideIcons.user),
);

Sizes

Six boxes: xs (24), sm (28), md (32, the default), lg (36), xl (40), and xl2 (48). The fallback text step climbs with the box.

FossAvatar(
  size: FossAvatarSize.sm,
  fallback: const Text('JS'),
);

FossAvatar(
  size: FossAvatarSize.xl2,
  image: NetworkImage('https://example.com/j.png'),
  fallback: const Text('JS'),
);

Accessibility

Set semanticLabel to name the person. When it is null the avatar is treated as decorative and skipped by assistive technology.

FossAvatar(
  image: NetworkImage('https://example.com/m.png'),
  fallback: const Text('MK'),
  semanticLabel: 'Mara Kane',
);

Common patterns

Group avatars (a "3 people commented" row) by stacking them with a small negative margin and putting the highest z-index on the leftmost avatar, so each one partially overlaps the next. For a list of many people (a member directory, a chat thread), pair FossAvatar with the person's name in a Row rather than relying on the avatar alone, since fallback initials are not a reliable way to distinguish more than a couple of people at a glance.

API

FossAvatar

FossAvatarSize

xs (24), sm (28), md (32), lg (36), xl (40), xl2 (48).

Live demo

Open the interactive gallery to try fallback and sizes with live knobs.