Flutter Checkout Order Summary Card
An e-commerce checkout summary with product line items, a totals breakdown, a discount code badge, and a secure Place Order button. Styled entirely with Wind UI utility classes and dark mode ready.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-4 rounded-2xl border bg-white border-gray-200 shadow-lg p-5 dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WText(
'Order Summary',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'rounded-full px-2.5 py-0.5 bg-gray-100 dark:bg-gray-800',
child: WText(
'2 items',
className: 'text-xs font-semibold text-gray-500 dark:text-gray-400'
)
),
],
),
WDiv(
className: 'flex flex-col gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-amber-300 to-orange-400 dark:from-amber-600 dark:to-orange-700',
child: WIcon(
Icons.headphones,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Studio Headphones',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Midnight · Qty 1',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'$129',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-sky-300 to-indigo-400 dark:from-sky-600 dark:to-indigo-700',
child: WIcon(
Icons.watch,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Smart Watch Band',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Slate · Qty 1',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'$39',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-800'
),
WDiv(
className: 'flex flex-col gap-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WText(
'Subtotal',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$168',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'Discount',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'rounded-md px-1.5 py-0.5 bg-emerald-100 dark:bg-emerald-900',
child: WText(
'SAVE15',
className: 'text-xs font-bold text-emerald-700 dark:text-emerald-300'
)
),
]
),
WText(
'-$25',
className: 'text-sm font-medium text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WText(
'Shipping',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'Free',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
),
]
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WText(
'Total',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'$143',
className: 'text-xl font-extrabold text-gray-900 dark:text-white'
),
]
),
WButton(
className: 'w-full rounded-xl py-3 bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.lock,
className: 'text-white text-base'
),
WText(
'Place Order',
className: 'text-sm font-bold text-white'
),
]
)
),
],
)
More like this
-
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.
-
Flutter Cafe Loyalty Stamp Card with Reward Progress
A digital coffee-shop loyalty card built with Wind for Flutter: a fill-the-grid stamp collection, a stamps-earned counter chip, and a redeem call to action. Shows how to build retail rewards UI with Tailwind-style className utilities and dark-mode-ready color pairs.
-
Flutter Real Estate Property Listing Card with Photo Header
A real estate property listing card with a gradient photo header, price overlay, location, beds, baths, and area stats, plus a details call to action. Responsive Wind layout with dark mode.
