Flutter Streaming Movie Card with Rating and Genre Tags
A cinematic detail card for a streaming or movie app: a gradient poster with a centered play affordance, rating and 4K HDR badges, genre tags, a two-line synopsis, and stacked Play and Add to My List actions. Built with Wind utility classes and full dark-mode pairing.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl overflow-hidden bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'relative h-44 bg-gradient-to-br from-indigo-500 to-fuchsia-600 dark:from-indigo-600 dark:to-fuchsia-700',
children: [
WDiv(
className: 'absolute inset-0 flex flex-row items-center justify-center',
child: WDiv(
className: 'flex flex-row items-center justify-center w-16 h-16 rounded-full bg-white/25 dark:bg-white/25 border border-white/50 dark:border-white/50',
child: WIcon(
Icons.play_arrow,
className: 'text-3xl text-white dark:text-white'
),
),
),
WDiv(
className: 'absolute top-4 left-4 flex flex-row items-center gap-1 px-2 py-1 rounded-lg bg-black/40 dark:bg-black/40',
children: [
WIcon(
Icons.star,
className: 'text-sm text-amber-300 dark:text-amber-300'
),
WText(
'8.9',
className: 'text-xs font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'absolute top-4 right-4 px-2 py-1 rounded-lg bg-white/20 dark:bg-white/20',
child: WText(
'4K HDR',
className: 'text-xs font-bold tracking-wide text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-col gap-3 p-5',
children: [
WText(
'Echoes of Tomorrow',
className: 'text-xl font-bold text-gray-900 dark:text-white'
),
WText(
'2024 . Sci-Fi Thriller . 2h 18m',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row flex-wrap gap-2',
children: [
WDiv(
className: 'px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-500/15',
child: WText(
'Sci-Fi',
className: 'text-xs font-medium text-indigo-700 dark:text-indigo-300'
),
),
WDiv(
className: 'px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-500/15',
child: WText(
'Thriller',
className: 'text-xs font-medium text-indigo-700 dark:text-indigo-300'
),
),
WDiv(
className: 'px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-500/15',
child: WText(
'Drama',
className: 'text-xs font-medium text-indigo-700 dark:text-indigo-300'
),
),
],
),
WText(
'A physicist intercepts a message from her future self, and racing to decode it unravels the line between memory and prophecy.',
className: 'text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2',
),
WButton(
className: 'flex flex-row items-center justify-center gap-2 w-full py-3 rounded-xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.play_arrow,
className: 'text-lg text-white dark:text-white'
),
WText(
'Play Now',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
),
WButton(
className: 'flex flex-row items-center justify-center gap-2 w-full py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.add,
className: 'text-lg text-gray-700 dark:text-gray-200'
),
WText(
'Add to My List',
className: 'text-sm font-semibold text-gray-700 dark:text-gray-200'
),
],
),
),
],
),
],
)
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.
