All snippets
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.
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'
),
),
],
),
],
),
],
)
397 lines
Open in the playground
More like this
-
Flutter Beat Sequencer Card with 16 Step Track Grid
A drum machine pattern grid where instrument tracks run down the left and 16 steps run across the top, so every cell is a step you can read at a glance. Six tracks, downbeat markers on 1, 5, 9 and 13, and a transport button, all built from fixed-size Wind divs.
-
Flutter Mixing Console Card with Channel Strip Level Meters
A Flutter audio mixer card for music production apps: six vertical channel meters with peak and clip zones, dB readouts, mute and solo pills and a master bus meter with a no-clipping badge. Vertical meters from a fixed-height track and bottom-aligned fill in wind_kit, no custom painter.
-
Flutter Festival Lineup Card with Set Times and Stages
A Flutter festival lineup card for music and event apps: gradient stage-art header, set-times list with a starred headliner, per-act time pills, coloured stage tags, a venue row and a get-passes button. Built with wind_kit className utilities and dark mode pairs.
