Skip to content
Türkçe
All snippets

Flutter Avatar Group with Status and Count Badges

An avatar group showing online status dots and a remaining-count badge. A chat and presence pattern built with Wind UI utility classes and dark mode pairs.

  • WDiv
  • WText
preview
92fy2bkd.dart 
WDiv(
  className: 'mx-auto flex flex-row items-center gap-3 rounded-2xl border p-6 bg-white border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'relative w-12 h-12',
      children: [
        WDiv(
          className: 'flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900',
          child: WText(
            'AC',
            className: 'text-sm font-bold text-indigo-600 dark:text-indigo-300'
          )
        ),
        WDiv(
          className: 'absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-2 bg-emerald-500 border-white dark:border-gray-900'
        ),
      ],
    ),
    WDiv(
      className: 'relative w-12 h-12',
      children: [
        WDiv(
          className: 'flex items-center justify-center w-12 h-12 rounded-full bg-rose-100 dark:bg-rose-900',
          child: WText(
            'MJ',
            className: 'text-sm font-bold text-rose-600 dark:text-rose-300'
          )
        ),
        WDiv(
          className: 'absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-2 bg-amber-400 border-white dark:border-gray-900'
        ),
      ],
    ),
    WDiv(
      className: 'relative w-12 h-12',
      children: [
        WDiv(
          className: 'flex items-center justify-center w-12 h-12 rounded-full bg-sky-100 dark:bg-sky-900',
          child: WText(
            'TS',
            className: 'text-sm font-bold text-sky-600 dark:text-sky-300'
          )
        ),
        WDiv(
          className: 'absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-2 bg-gray-300 border-white dark:bg-gray-600 dark:border-gray-900'
        ),
      ],
    ),
    WDiv(
      className: 'flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800',
      child: WText(
        '+5',
        className: 'text-sm font-bold text-gray-600 dark:text-gray-300'
      )
    ),
  ],
)
57 lines Open in the playground

More like this

  • Flutter Video Call Card with Participant Tile Grid

    A live meeting panel with a six tile participant grid, an active speaker ring, per person mute and camera state, connection stats, and a round control bar. Pure Wind className layout, no video plugin needed for the design pass.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Poll Results Card with Vote Percentage Bars

    A live poll results card built with Wind: a question header, ranked answer options each with a horizontal percentage fill bar, a highlighted winning choice, and a vote-count footer. Pure linear bars, no charts, dark-mode ready.

    • WDiv
    • WText
    • WIcon
    • WSpacer

  • Flutter Voice Message Bubble with Waveform Player

    A chat voice message bubble built with Wind utility classes: a sender avatar, a two tone waveform that shows playback progress, a play control, and the clip duration. Dark mode pairs are included on every color token.

    • WDiv
    • WText
    • WButton
    • WIcon