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.
main.dart
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'
),
],
),
WDiv(
className: 'flex flex-row items-center px-3 py-2 rounded-xl bg-white/20',
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'
),
],
),
],
)
Stats
- Views
- 3
- Stars
- 0
- Revisions
- 2
- Size
- 2,720 chars
- Created
- Jun 23, 2026
Revisions