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.

Anılcan Çakır by Anılcan Çakır 3 views 0 stars 1 day ago Rev 1
Flutter Discount Voucher Card with Promo Code preview
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