# Flutter Bill Split Summary Card with Per-Person Shares

A group expense card showing the total bill, each person's share with avatar initials, settled and pending states, and how much you're owed. Perfect for fintech and social payment apps.

`WDiv`, `WIcon`, `WText`

```dart
WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-3',
          children: [
            WDiv(
              className: 'flex items-center justify-center w-11 h-11 rounded-2xl bg-indigo-100 dark:bg-indigo-500/20',
              child: WIcon(
                Icons.location_on,
                className: 'text-indigo-600 text-xl dark:text-indigo-300',
              ),
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Nodo Sushi Bar',
                  className: 'text-base font-bold text-gray-900 dark:text-white',
                ),
                WText(
                  'Apr 18 · split 4 ways',
                  className: 'text-xs text-gray-500 dark:text-gray-400',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-amber-100 dark:bg-amber-500/20',
          children: [
            WIcon(
              Icons.schedule,
              className: 'text-amber-600 text-sm dark:text-amber-300',
            ),
            WText(
              'Pending',
              className: 'text-xs font-bold text-amber-700 dark:text-amber-300',
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-baseline gap-2',
      children: [
        WText(
          '$184.00',
          className: 'text-4xl font-extrabold text-gray-900 dark:text-white',
        ),
        WText(
          'total bill',
          className: 'text-sm font-medium text-gray-500 dark:text-gray-400',
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-3 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-9 h-9 rounded-full bg-emerald-500 dark:bg-emerald-500',
                  child: WText(
                    'You',
                    className: 'text-[10px] font-bold text-white',
                  ),
                ),
                WText(
                  'You paid',
                  className: 'text-sm font-semibold text-gray-900 dark:text-white',
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center gap-2',
              children: [
                WText(
                  '$184.00',
                  className: 'text-sm font-bold text-gray-900 dark:text-white',
                ),
                WIcon(
                  Icons.check,
                  className: 'text-emerald-500 text-base dark:text-emerald-400',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-9 h-9 rounded-full bg-rose-500 dark:bg-rose-500',
                  child: WText(
                    'M',
                    className: 'text-xs font-bold text-white',
                  ),
                ),
                WText(
                  'Maya',
                  className: 'text-sm font-semibold text-gray-900 dark:text-white',
                ),
              ],
            ),
            WText(
              'owes $46.00',
              className: 'text-sm font-semibold text-rose-600 dark:text-rose-400',
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-9 h-9 rounded-full bg-sky-500 dark:bg-sky-500',
                  child: WText(
                    'L',
                    className: 'text-xs font-bold text-white',
                  ),
                ),
                WText(
                  'Leo',
                  className: 'text-sm font-semibold text-gray-900 dark:text-white',
                ),
              ],
            ),
            WText(
              'owes $46.00',
              className: 'text-sm font-semibold text-rose-600 dark:text-rose-400',
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-9 h-9 rounded-full bg-violet-500 dark:bg-violet-500',
                  child: WText(
                    'S',
                    className: 'text-xs font-bold text-white',
                  ),
                ),
                WText(
                  'Sam',
                  className: 'text-sm font-semibold text-gray-900 dark:text-white',
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center gap-2',
              children: [
                WText(
                  'settled',
                  className: 'text-sm font-semibold text-emerald-600 dark:text-emerald-400',
                ),
                WIcon(
                  Icons.check,
                  className: 'text-emerald-500 text-base dark:text-emerald-400',
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              "You're owed",
              className: 'text-xs text-gray-500 dark:text-gray-400',
            ),
            WText(
              '$92.00',
              className: 'text-lg font-extrabold text-emerald-600 dark:text-emerald-400',
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 rounded-full px-4 py-2 bg-indigo-600 dark:bg-indigo-500',
          children: [
            WIcon(
              Icons.notifications,
              className: 'text-white text-sm dark:text-white',
            ),
            WText(
              'Remind',
              className: 'text-xs font-bold text-white dark:text-white',
            ),
          ],
        ),
      ],
    ),
  ],
)
```