flutter_coupon_card 0.1.0

A highly customizable coupon, voucher, ticket, promotion and discount card widget for Flutter, inspired by modern food delivery and e-commerce apps.

flutter_coupon_card

A highly customizable coupon / voucher / ticket / promotion / discount card widget for Flutter, inspired by modern food-delivery and e-commerce apps such as FoodPanda, GrabFood, ShopeeFood, Lazada and airline boarding passes — while staying fully controllable through parameters.

• 🎟️ Three entry widgets — CouponCard, TicketCard, VoucherCard
• ✂️ Notches, holes, and dashed / dotted / zig-zag / perforated dividers, all drawn by a single reusable CustomPainter
• 🎨 7 preset styles + light / dark / custom theming
• 🧩 Builder slots (header, body, footer, trailing) for total control
• 🖼️ 7 shapes — coupon, ticket, movie ticket, boarding pass, event ticket, gift voucher, membership card
• ✨ Hover / tap / scale / fade animations + shimmer loading
• 📋 Copy-to-clipboard code, QR / barcode / SVG / network-image hooks
• 📱 Responsive for mobile, tablet, desktop and web
• ⚡ Stateless where possible, RepaintBoundary-wrapped, null-safe, Flutter 3.29+

No third-party dependencies — QR/barcode/SVG are supported through builder hooks so you choose your own generator (qr_flutter, barcode_widget, flutter_svg, …), with decorative built-in painters available out of the box.

Installation

dependencies:
  flutter_coupon_card: ^0.1.0

import 'package:flutter_coupon_card/flutter_coupon_card.dart';

Quick start

CouponCard(
  style: CouponCardStyle.foodDelivery,
  discountText: '50% OFF',
  title: 'Up to \$10 off',
  subtitle: 'On your first food order',
  minimumOrder: 'Min. order \$15',
  code: 'YUMMY50',
  percentageText: '50%',
  onCodeCopied: (code) => debugPrint('Copied $code'),
  onTap: () {},
)

That single call renders the notched silhouette, dashed tear line, drop shadow, a copyable code chip, a circular 50% badge, and hover/tap animations.

Two ways to build a card

1. Declarative

Pass content fields and let the card lay them out:

CouponCard(
  theme: CouponTheme.fromColor(Colors.teal),
  shape: CouponShape.coupon,
  discountText: '\$25 OFF',
  title: 'Weekend Sale',
  minimumOrder: 'Min. spend \$100',
  usageLimit: 'One time use',
  validity: 'Valid till 31 Dec 2026',
  code: 'WEEKEND25',
)

2. Builder slots

Take over any region while keeping the shape, divider, shadow and interactions:

CouponCard(
  style: CouponCardStyle.travel,
  height: 170,
  header: Row(children: [/* PNH ✈ SIN */]),
  body:   Row(children: [/* flight / gate / seat */]),
  footer: CouponBarcode(data: 'PNHSIN934-14C', width: double.infinity),
)

Preset styles

CouponCardStyle.foodDelivery   // warm red coupon
CouponCardStyle.shopping       // green scalloped voucher
CouponCardStyle.travel         // blue boarding pass
CouponCardStyle.event          // purple perforated ticket
CouponCardStyle.premium        // black & gold membership
CouponCardStyle.neumorphism    // soft extruded surface
CouponCardStyle.glassmorphism  // frosted translucent glass

Presets are a starting point — any property you set on the widget overrides the style.

Shapes

CouponShape	Look
coupon	notch pair + dashed divider
ticket	notch pair + solid/dotted divider
movieTicket	notch pair + zig-zag perforated stub edge
boardingPass	wide card + dotted divider
eventTicket	notch pair + perforated divider
giftVoucher	scalloped edges (many notches)
membershipCard	plain rounded rectangle

Theming

// Built-in schemes
CouponTheme.light;
CouponTheme.dark;

// Adapt to the platform brightness
CouponTheme.of(context);

// Derive from one brand colour
CouponTheme.fromColor(const Color(0xFFFF5A5F),
    brightness: CouponBrightness.dark);

// Fine-tune anything
CouponTheme.light.copyWith(accentColor: Colors.indigo);

The CouponBorderPainter

The whole silhouette — fill/gradient, border, notches and the divider — is drawn by one reusable painter you can drop into any CustomPaint:

CustomPaint(
  painter: CouponBorderPainter(
    notch: const NotchConfig(leftCount: 1, rightCount: 1, radius: 16),
    borderRadius: 16,
    gradient: const LinearGradient(colors: [Colors.white, Colors.pink]),
    dividerStyle: CouponDividerStyle.dashed,
  ),
  child: /* your content */,
)

Static helpers are exposed for advanced reuse: CouponBorderPainter.buildOutline, drawDashedLine, drawZigzagLine, plus a matching CouponClipper for bleeding images to the notched edge.

Notches & dividers

CouponCard(
  leftNotchCount: 1,
  rightNotchCount: 1,
  notchRadius: 16,
  notchSpacing: 24,          // when more than one notch per edge
  dividerPosition: 0.66,     // fraction along the card
  dividerStyle: CouponDividerStyle.perforated,
)

CouponDividerStyle: none, solid, dashed, dotted, zigzag, perforated.

Right section

Priority order: trailing → QR/barcode (when a code is set) → logo → image → percentageText → icon (+ badgeNumber) → badgeNumber.

// Decorative built-ins (no dependency)
CouponCard(code: 'ABC', trailing: const CouponQr(data: 'ABC'));
CouponCard(code: 'ABC', trailing: const CouponBarcode(data: 'ABC'));

// Scannable codes — plug in your generator
CouponCard(
  code: 'ABC123',
  qrBuilder: (context, data) => QrImageView(data: data), // qr_flutter
);

// Network image / icon / percentage
CouponCard(image: const NetworkImage('https://…/logo.png'));
CouponCard(icon: Icons.local_pizza, badgeNumber: 3);
CouponCard(percentageText: '50%');

For SVG, pass a flutter_svg widget into trailing or logo.

Animations

CouponCard(
  enableHoverAnimation: true,  // desktop / web cursor hover scale
  enableTapAnimation: true,    // press-down scale
  enableFadeIn: true,          // fade + slide on first build
  hoverScale: 1.03,
  tapScale: 0.97,
  isLoading: true,             // shimmer skeleton placeholder
)

Responsive

final formFactor = CouponResponsive.of(context); // mobile / tablet / desktop
final width = CouponResponsive.cardWidth(context);
final pad = CouponResponsive.value(context, mobile: 12.0, desktop: 20.0);

API overview

Type	Purpose
CouponCard	main configurable widget (declarative or builder)
TicketCard	ticket-preset convenience wrapper
VoucherCard	gift-voucher-preset convenience wrapper
CouponData	immutable content bundle (title, code, validity, …)
CouponTheme	colours + text styles, light/dark/custom
CouponCardStyle	ready-made theme + shape + divider presets
CouponShape / CouponDividerStyle / CouponAxis	enums
NotchConfig	notch & divider geometry
CouponBorderPainter / CouponClipper	the silhouette painter & clipper
CouponCode	standalone copyable code chip
CouponBadge / PercentageBadge	right-section badges
CouponQr / CouponBarcode	decorative code displays
Shimmer / InteractiveCard	loading & interaction wrappers
CouponResponsive	breakpoint helpers

Example app

The example/ app showcases all nine scenarios: food-delivery coupon, shopping voucher, event ticket, airline boarding pass, membership card, gift voucher, movie ticket, glassmorphism, and a shimmer loading state.

cd example
flutter run   # mobile, desktop or -d chrome for web

License

MIT © NhebPanha