Flutter Event Ticket Card
A vibrant gradient event ticket with the headline act, venue and date, a perforated divider, seat metadata, and a barcode strip for scan-in. An entertainment pattern built with Tailwind-style className utilities in Flutter.
by Anılcan Çakır
32 views
0 stars
1 week ago
Rev 1
main.dart
WDiv(
className: 'mx-auto max-w-sm flex flex-col rounded-3xl bg-gradient-to-br from-violet-600 via-purple-600 to-fuchsia-600 shadow-xl dark:from-violet-700 dark:via-purple-700 dark:to-fuchsia-700',
children: [
WDiv(
className: 'flex flex-col gap-4 p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-white/20 dark:bg-white/20',
children: [
WIcon(
Icons.bolt,
className: 'text-amber-200 text-sm dark:text-amber-200'
),
WText(
'LIVE CONCERT',
className: 'text-xs font-bold text-white'
),
],
),
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white/20 dark:bg-white/20',
child: WIcon(
Icons.favorite,
className: 'text-rose-200 text-base dark:text-rose-200'
),
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Neon Nights',
className: 'text-3xl font-extrabold text-white'
),
WText(
'Festival 2026',
className: 'text-3xl font-extrabold text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-5 w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WIcon(
Icons.location_on,
className: 'text-fuchsia-200 text-base dark:text-fuchsia-200'
),
WText(
'Open Air Arena',
className: 'text-sm font-medium text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WIcon(
Icons.calendar_today,
className: 'text-fuchsia-200 text-base dark:text-fuchsia-200'
),
WText(
'Sat, Jul 18',
className: 'text-sm font-medium text-white'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full px-5 py-2',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
child: WSpacer(
className: 'w-2 h-2'
),
),
],
),
WDiv(
className: 'flex flex-col gap-4 p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'SECTION',
className: 'text-[10px] font-semibold tracking-widest text-fuchsia-200 dark:text-fuchsia-200'
),
WText(
'GA',
className: 'text-lg font-extrabold text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'ROW',
className: 'text-[10px] font-semibold tracking-widest text-fuchsia-200 dark:text-fuchsia-200'
),
WText(
'12',
className: 'text-lg font-extrabold text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'SEAT',
className: 'text-[10px] font-semibold tracking-widest text-fuchsia-200 dark:text-fuchsia-200'
),
WText(
'07',
className: 'text-lg font-extrabold text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'GATES',
className: 'text-[10px] font-semibold tracking-widest text-fuchsia-200 dark:text-fuchsia-200'
),
WText(
'8:00 PM',
className: 'text-lg font-extrabold text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full h-12 rounded-xl bg-white p-3 dark:bg-white',
children: [
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[3px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[3px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
WDiv(
className: 'w-1 h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-1 h-6'
),
),
WDiv(
className: 'w-[2px] h-6 rounded-full bg-gray-900 dark:bg-gray-900',
child: WSpacer(
className: 'w-[2px] h-6'
),
),
],
),
],
),
],
)
Stats
- Views
- 32
- Stars
- 0
- Revisions
- 1
- Size
- 12,680 chars
- Created
- Jun 14, 2026