Avatar

Avatars are used to represent users or entities. They can display text (initials), icons, or images.

Initials

The most common use case is displaying a user’s initials.

Avatar(
  child: Text('CP'),
)

Icon

You can also display icons within an avatar.

Avatar(
  child: Icon(PrimeIcons.viamFlutter, size: 20),
)

Sizes

Avatars can be sized using the size property. The default size is 32.0.

Row(
  children: [
    Avatar(size: 24, child: Text('XS')),
    SizedBox(width: 16),
    Avatar(size: 32, child: Text('SM')),
    SizedBox(width: 16),
    Avatar(size: 48, child: Text('MD')),
    SizedBox(width: 16),
    Avatar(size: 64, child: Text('LG')),
  ],
)

Interactive

Pass an onPressed callback to make the avatar tappable. The background darkens with a 10% black scrim on hover and 20% on press, and the cursor switches to a click pointer on web/desktop.

Avatar(
  child: Text('CP'),
  onPressed: () {},
)