Flutter Grocery List Card with Quantity Pills and Running Total
A shared shopping list where checked items strike through, each row carries a quantity pill and a price, and the footer tracks the running total against the weekly budget. Wind line-through and pill utilities, no state package required.
by Anılcan Çakır
80 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-emerald-50 dark:bg-emerald-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.shopping_bag,
className: 'text-emerald-600 dark:text-emerald-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Weekly groceries',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Shared with Ayla | Sat pickup',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-800',
child: WText(
'4 of 7',
className: 'text-xs font-semibold text-emerald-700 dark:text-emerald-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-gray-100 dark:bg-gray-800 mt-5',
child: WDiv(
className: 'w-[192px] h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-col gap-3.5 w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-lg'
),
WText(
'Rolled oats',
className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-500 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-gray-800',
child: WText(
'1 kg',
className: 'text-xs font-semibold text-gray-500 dark:text-gray-400'
),
),
WText(
'$4.20',
className: 'text-sm font-semibold text-gray-400 dark:text-gray-500 ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-lg'
),
WText(
'Greek yoghurt',
className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-500 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-gray-800',
child: WText(
'x2',
className: 'text-xs font-semibold text-gray-500 dark:text-gray-400'
),
),
WText(
'$6.80',
className: 'text-sm font-semibold text-gray-400 dark:text-gray-500 ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[18px] h-[18px] rounded-full border-2 border-gray-300 dark:border-gray-600'
),
WText(
'Sourdough loaf',
className: 'text-sm font-semibold text-gray-900 dark:text-white ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-gray-800',
child: WText(
'x1',
className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
),
),
WText(
'$5.50',
className: 'text-sm font-semibold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[18px] h-[18px] rounded-full border-2 border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'flex flex-col ml-2.5',
children: [
WText(
'Cold brew beans',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'On sale, save $3.10',
className: 'text-xs font-medium text-rose-500 dark:text-rose-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'px-2 py-0.5 rounded-lg bg-rose-100 dark:bg-rose-800',
child: WText(
'500 g',
className: 'text-xs font-semibold text-rose-600 dark:text-rose-200'
),
),
WText(
'$12.40',
className: 'text-sm font-semibold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[18px] h-[18px] rounded-full border-2 border-gray-300 dark:border-gray-600'
),
WText(
'Cherry tomatoes',
className: 'text-sm font-semibold text-gray-900 dark:text-white ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-gray-800',
child: WText(
'400 g',
className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
),
),
WText(
'$3.90',
className: 'text-sm font-semibold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Running total',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'$32.80',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'Budget $45.00',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'$12.20 left',
className: 'text-sm font-bold text-emerald-600 dark:text-emerald-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-4 mt-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.local_fire_department,
className: 'text-rose-500 dark:text-rose-400 text-base'
),
WDiv(
className: 'flex flex-col ml-2.5',
children: [
WText(
'2 items are on sale today',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Offer ends at midnight',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WIcon(
Icons.chevron_right,
className: 'text-gray-300 dark:text-gray-600 text-base'
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-emerald-600 dark:bg-emerald-500 py-3',
child: WText(
'Add 3 Remaining to Cart',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
Stats
- Views
- 80
- Stars
- 0
- Revisions
- 1
- Size
- 10,203 chars
- Created
- Jul 30, 2026