ArcaneAvatarGroup#

A component for displaying multiple avatars in a stacked layout with overflow handling.

Basic Usage#

ArcaneAvatarGroup(
  avatars: [
    ArcaneAvatar(initials: 'AB'),
    ArcaneAvatar(initials: 'CD'),
    ArcaneAvatar(initials: 'EF'),
  ],
)

Properties#

Stack Directions#

Stack to Right (Default)#

ArcaneAvatarGroup.toRight(
  avatars: avatarList,
  maxVisible: 4,
)

Stack to Left#

ArcaneAvatarGroup.toLeft(
  avatars: avatarList,
  maxVisible: 4,
)

With Overflow#

ArcaneAvatarGroup(
  avatars: [
    ArcaneAvatar(initials: 'AB'),
    ArcaneAvatar(initials: 'CD'),
    ArcaneAvatar(initials: 'EF'),
    ArcaneAvatar(initials: 'GH'),
    ArcaneAvatar(initials: 'IJ'),
    ArcaneAvatar(initials: 'KL'),
  ],
  maxVisible: 3,  // Shows: AB, CD, EF, +3
)

ArcaneAvatarBadge#

A status badge that can be positioned on an avatar.

Basic Usage#

ArcaneDiv(
  styles: const ArcaneStyleData(position: Position.relative),
  children: [
    ArcaneAvatar(initials: 'JD'),
    ArcaneAvatarBadge.online(),
  ],
)

Factory Constructors#

Online Status#

ArcaneAvatarBadge.online()  // Green dot

Busy Status#

ArcaneAvatarBadge.busy()  // Red dot

Away Status#

ArcaneAvatarBadge.away()  // Yellow dot

Offline Status#

ArcaneAvatarBadge.offline()  // Gray dot

Custom Badge#

ArcaneAvatarBadge(
  status: AvatarBadgeStatus.custom,
  color: '#10b981',
  pulse: true,
)

Examples#

Team Members#

ArcaneColumn(
  gapSize: Gap.md,
  children: [
    ArcaneText('Team Members', weight: FontWeight.bold),
    ArcaneAvatarGroup.toRight(
      avatars: teamMembers.map((m) => ArcaneAvatar(
        imageUrl: m.avatarUrl,
        initials: m.initials,
      )).toList(),
      maxVisible: 5,
    ),
  ],
)

User Status List#

for (final user in users)
  ArcaneRow(
    gapSize: Gap.md,
    children: [
      ArcaneDiv(
        styles: const ArcaneStyleData(position: Position.relative),
        children: [
          ArcaneAvatar(initials: user.initials),
          ArcaneAvatarBadge(status: user.status),
        ],
      ),
      ArcaneText(user.name),
    ],
  ),

Related Components#

• ArcaneAvatar - Single avatar component
• ArcaneBadge - Generic badge component