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.
by Anılcan Çakır
13 views
0 stars
6 days ago
Rev 1
main.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',
),
],
),
],
),
],
)
Stats
- Views
- 13
- Stars
- 0
- Revisions
- 1
- Size
- 7,104 chars
- Created
- Jun 18, 2026