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(
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',
),
],
),
],
),
],
)
Benzer örnekler
-
Flutter Euro Banknote Card with True Scale Note Stack and Denomination Colours
A euro banknote card for banking, travel and currency apps: all six Europa series notes from €5 to €200 drawn to true scale in their official grey, red, blue, orange, green and yellow-brown, each tagged with its millimetre size, plus width and height stats showing how every step up adds 6 or 7 mm.
-
Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate
A Flutter income tax card for payroll, budgeting and personal finance apps: UK 2026/27 personal allowance, basic and higher rate bands drawn to scale for a 60,000 pound salary, tax per band and tiles for total, effective rate and marginal rate. Baseline-aligned wind_kit bars.
-
Flutter Revenue Bridge Card with Floating Waterfall Steps
A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.
