Flutter Discount Voucher Card with Promo Code
A bold discount voucher card with a gradient background, promo code block, copy action, and a call-to-action button. A marketing-ready coupon UI using Wind utility classes.
WDiv(
className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-gradient-to-br from-rose-500 to-pink-600 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-5',
children: [
WDiv(
className: 'flex flex-row items-center px-3 py-1 rounded-full bg-white/20',
children: [
WIcon(
Icons.bolt,
className: 'text-white dark:text-white text-sm mr-1'
),
WText(
'LIMITED OFFER',
className: 'text-white dark:text-white text-xs font-bold'
),
],
),
WDiv(
className: 'w-9 h-9 rounded-full bg-white/20 flex flex-row items-center justify-center',
child: WIcon(
Icons.favorite,
className: 'text-white dark:text-white text-base'
),
),
],
),
WText(
'25% OFF',
className: 'text-white dark:text-white text-4xl font-bold'
),
WText(
'Your entire first order',
className: 'text-rose-100 dark:text-rose-100 text-sm font-medium mb-5'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full p-3 rounded-2xl border-2 border-white/40 bg-white/10 mb-5',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'PROMO CODE',
className: 'text-rose-100 dark:text-rose-100 text-xs font-medium'
),
WText(
'WELCOME25',
className: 'text-white dark:text-white text-lg font-bold'
),
],
),
WButton(
className: 'px-3 py-2 rounded-xl bg-white/20',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check,
className: 'text-white dark:text-white text-sm mr-1'
),
WText(
'Copy',
className: 'text-white dark:text-white text-xs font-bold'
),
],
),
),
],
),
WButton(
className: 'w-full py-3 rounded-2xl bg-white dark:bg-white flex flex-row items-center justify-center mb-3',
child: WText(
'Apply Code',
className: 'text-rose-600 dark:text-rose-600 text-sm font-bold'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
children: [
WIcon(
Icons.schedule,
className: 'text-rose-100 dark:text-rose-100 text-xs mr-1'
),
WText(
'Valid until Jun 30, 2026',
className: 'text-rose-100 dark:text-rose-100 text-xs font-medium'
),
],
),
],
)
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.
