Flutter Flash Sale Countdown Timer Card
A high-urgency flash sale card with a lightning badge, a discount pill, product pricing with a struck-through original price, and a live HH:MM:SS countdown over a warm gradient. Built with Wind UI utility classes and dark mode pairs.
WDiv(
className: '''
relative mx-auto w-[400px] overflow-hidden rounded-3xl p-6
bg-gradient-to-br from-rose-600 via-orange-600 to-amber-500
dark:from-rose-700 dark:via-orange-700 dark:to-amber-600
shadow-2xl shadow-black/40 dark:shadow-black/60
''',
children: [
WDiv(
className: 'absolute -top-12 -right-10 w-44 h-44 rounded-full bg-white/15 dark:bg-white/10',
),
WDiv(
className: 'flex flex-col gap-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between',
children: [
WDiv(
className: '''
inline-flex flex-row items-center gap-1
rounded-full px-3 py-1
bg-white/20 dark:bg-white/15
''',
children: [
WIcon(
Icons.bolt,
className: 'text-base text-white dark:text-white',
),
WText(
'FLASH SALE',
className: 'text-xs font-bold tracking-widest text-white dark:text-white',
),
],
),
WDiv(
className: 'rounded-full px-3 py-1 bg-black/25 dark:bg-black/40',
child: WText(
'-40%',
className: 'text-sm font-extrabold text-white dark:text-white',
),
),
],
),
WDiv(
className: 'flex flex-row items-center gap-4',
children: [
WDiv(
className: '''
w-16 h-16 rounded-2xl
bg-white/25 dark:bg-white/15
border border-white/30 dark:border-white/20
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.favorite,
className: 'text-2xl text-white dark:text-white',
),
),
WDiv(
className: 'flex-1 flex flex-col gap-1',
children: [
WText(
'Aurora Wireless Buds',
className: 'text-lg font-bold text-white dark:text-white',
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'$59',
className: 'text-xl font-extrabold text-white dark:text-white',
),
WText(
'$99',
className: 'text-sm font-medium line-through text-white/60 dark:text-white/60',
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-3',
children: [
WDiv(
className: '''
w-20 h-20 rounded-2xl
bg-white/15 dark:bg-white/10
border border-white/25 dark:border-white/15
flex flex-col items-center justify-center
''',
children: [
WText(
'02',
className: 'text-3xl font-extrabold text-white dark:text-white',
),
WText(
'HRS',
className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
),
],
),
WText(
':',
className: 'text-2xl font-extrabold text-white/70 dark:text-white/70',
),
WDiv(
className: '''
w-20 h-20 rounded-2xl
bg-white/15 dark:bg-white/10
border border-white/25 dark:border-white/15
flex flex-col items-center justify-center
''',
children: [
WText(
'45',
className: 'text-3xl font-extrabold text-white dark:text-white',
),
WText(
'MIN',
className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
),
],
),
WText(
':',
className: 'text-2xl font-extrabold text-white/70 dark:text-white/70',
),
WDiv(
className: '''
w-20 h-20 rounded-2xl
bg-white/15 dark:bg-white/10
border border-white/25 dark:border-white/15
flex flex-col items-center justify-center
''',
children: [
WText(
'19',
className: 'text-3xl font-extrabold text-white dark:text-white',
),
WText(
'SEC',
className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
),
],
),
],
),
WDiv(
className: '''
w-full rounded-2xl py-4
bg-white dark:bg-white
flex flex-row items-center justify-center gap-2
''',
children: [
WIcon(
Icons.bolt,
className: 'text-lg text-rose-600 dark:text-rose-700',
),
WText(
'Grab the deal',
className: 'text-base font-bold text-rose-600 dark:text-rose-700',
),
],
),
],
),
],
)
Benzer örnekler
-
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.
