Avatar

A fixed-size circle showing a profile image with a fallback while it loads or fails.

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'),
  semanticsLabel: '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 semanticsLabel 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'),
  semanticsLabel: 'Mara Kane',
);

API

FossAvatar

Prop	Type	Default	Description
`image`	`ImageProvider?`	`null`	The profile image. Null renders the fallback alone.
`fallback`	`Widget?`	`null`	Shown until the image loads, and whenever it is absent or fails. Usually initials.
`size`	`FossAvatarSize`	`md`	The box edge and fallback text step.
`semanticsLabel`	`String?`	`null`	Accessibility name. Null marks the avatar decorative.
`style`	`FossAvatarStyle?`	`null`	Per-instance overrides on the theme.

FossAvatarSize

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

Live demo

Open the interactive gallery to try every variant, size, and state with live knobs.