Skip to main content

​
Avatars

The avatar components provide flexible ways to display user images, initials, or icons with various sizes, shapes, and status indicators.

​
Basic Usage

ChromiaAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  size: ChromiaAvatarSize.large,
)

​
ChromiaAvatar

A customizable avatar component for displaying user images, initials, or icons.

​
Parameters

​
imageUrl
String?
URL of the avatar image. If provided, displays the image from the network.
​
imageProvider
ImageProvider?
Custom image provider for the avatar. Allows using any Flutter image provider.
​
child
Widget?
Custom child widget (overrides image). Use for displaying initials or icons.
​
backgroundColor
Color?
Background color (visible when no image is displayed).
​
foregroundColor
Color?
Foreground color (for text/icons in the avatar).
​
size
ChromiaAvatarSize
default:"ChromiaAvatarSize.medium"
Size of the avatar. Options: extraSmall (24px), small (32px), medium (40px), large (56px), extraLarge (72px).
​
shape
ChromiaAvatarShape
default:"ChromiaAvatarShape.circle"
Shape of the avatar. Options: circle, rounded, square.
​
border
BoxBorder?
Border decoration for the avatar.
​
onTap
VoidCallback?
Callback when the avatar is tapped.

​
Factory Constructors

​
ChromiaAvatar.initials

Creates an avatar with initials.
​
initials
String
required
The initials to display (automatically converted to uppercase).
​
backgroundColor
Color?
Background color of the avatar.
​
foregroundColor
Color?
Color of the initials text.

​
ChromiaAvatar.icon

Creates an avatar with an icon.
​
icon
IconData
required
The icon to display.
​
backgroundColor
Color?
Background color of the avatar.
​
iconColor
Color?
Color of the icon.

​
Examples

​
Image Avatar

ChromiaAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  size: ChromiaAvatarSize.large,
)

​
Initials Avatar

ChromiaAvatar.initials(
  initials: 'JD',
  backgroundColor: Colors.blue,
  size: ChromiaAvatarSize.medium,
)

​
Icon Avatar

ChromiaAvatar.icon(
  icon: Icons.person,
  backgroundColor: Colors.purple,
  iconColor: Colors.white,
  size: ChromiaAvatarSize.small,
)

​
Rounded Square Avatar

ChromiaAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  shape: ChromiaAvatarShape.rounded,
  size: ChromiaAvatarSize.large,
)

​
Interactive Avatar

ChromiaAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  onTap: () => print('Avatar tapped!'),
)

​
ChromiaAvatarWithStatus

An avatar with a status indicator for showing online/offline/busy states.

​
Parameters

​
avatar
ChromiaAvatar
required
The avatar widget to display.
​
status
ChromiaAvatarStatus
required
Status indicator. Options: online (green), busy (red), away (yellow), offline (gray).
​
statusPosition
ChromiaAvatarStatusPosition
default:"ChromiaAvatarStatusPosition.bottomRight"
Position of the status indicator. Options: bottomRight, bottomLeft, topRight, topLeft.

​
Examples

​
Online Status

ChromiaAvatarWithStatus(
  avatar: ChromiaAvatar(
    imageUrl: 'https://example.com/avatar.jpg',
  ),
  status: ChromiaAvatarStatus.online,
)

​
Busy Status with Custom Position

ChromiaAvatarWithStatus(
  avatar: ChromiaAvatar.initials(
    initials: 'JD',
    backgroundColor: Colors.blue,
  ),
  status: ChromiaAvatarStatus.busy,
  statusPosition: ChromiaAvatarStatusPosition.topRight,
)

​
ChromiaAvatarGroup

A group of overlapping avatars with a “+N” indicator for additional avatars.

​
Parameters

​
avatars
List<ChromiaAvatar>
required
List of avatars to display.
​
max
int
default:"3"
Maximum number of avatars to show before displaying the “+N” indicator.
​
size
ChromiaAvatarSize
default:"ChromiaAvatarSize.medium"
Size of all avatars in the group.
​
spacing
double
default:"8"
Spacing between avatars (creates overlap effect).
​
showMore
bool
default:"true"
Whether to show “+N” for additional avatars beyond the max.

​
Examples

​
Basic Avatar Group

ChromiaAvatarGroup(
  avatars: [
    ChromiaAvatar(imageUrl: 'https://example.com/user1.jpg'),
    ChromiaAvatar(imageUrl: 'https://example.com/user2.jpg'),
    ChromiaAvatar(imageUrl: 'https://example.com/user3.jpg'),
    ChromiaAvatar(imageUrl: 'https://example.com/user4.jpg'),
    ChromiaAvatar(imageUrl: 'https://example.com/user5.jpg'),
  ],
  max: 3,
)

​
Custom Spacing

ChromiaAvatarGroup(
  avatars: [
    ChromiaAvatar.initials(initials: 'AB'),
    ChromiaAvatar.initials(initials: 'CD'),
    ChromiaAvatar.initials(initials: 'EF'),
  ],
  spacing: 12,
  size: ChromiaAvatarSize.small,
)

​
Enums

​
ChromiaAvatarSize

  • extraSmall - 24px diameter
  • small - 32px diameter
  • medium - 40px diameter (default)
  • large - 56px diameter
  • extraLarge - 72px diameter

​
ChromiaAvatarShape

  • circle - Circular avatar
  • rounded - Rounded square avatar
  • square - Square avatar with slight rounding

​
ChromiaAvatarStatus

  • online - User is online (green indicator)
  • busy - User is busy (red indicator)
  • away - User is away (yellow indicator)
  • offline - User is offline (gray indicator)

​
ChromiaAvatarStatusPosition

  • bottomRight - Bottom right corner (default)
  • bottomLeft - Bottom left corner
  • topRight - Top right corner
  • topLeft - Top left corner

Build docs developers (and LLMs) love

Get started for freeTalk to us