Flutter Sleep Score Panel with Stage Breakdown
A dark health panel led by a bold sleep score, with a segmented sleep-stage bar (light, deep, REM), a color-coded legend, and total-sleep and restfulness chips. A clean recovery-tracking pattern built with Tailwind-style className utilities in Flutter.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-slate-900 shadow-xl dark:bg-slate-950',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-2xl bg-indigo-500/20 dark:bg-indigo-500/20',
child: WIcon(
Icons.dark_mode,
className: 'text-indigo-300 text-base dark:text-indigo-300'
),
),
WText(
'Last night',
className: 'text-sm font-semibold text-white'
),
],
),
WText(
'Wed, 06:42 AM',
className: 'text-xs text-slate-400 dark:text-slate-500'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WText(
'84',
className: 'text-6xl font-extrabold text-emerald-400 dark:text-emerald-400'
),
WText(
'SLEEP SCORE',
className: 'text-xs font-semibold uppercase tracking-widest text-slate-400 dark:text-slate-500'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-3 rounded-full overflow-hidden',
children: [
WDiv(
className: 'h-3 w-[26px] bg-slate-600 dark:bg-slate-600',
child: WSpacer(
className: 'w-[26px] h-3'
)
),
WDiv(
className: 'h-3 w-[160px] bg-blue-400 dark:bg-blue-400',
child: WSpacer(
className: 'w-[160px] h-3'
)
),
WDiv(
className: 'h-3 w-[84px] bg-indigo-500 dark:bg-indigo-500',
child: WSpacer(
className: 'w-[84px] h-3'
)
),
WDiv(
className: 'h-3 w-[60px] bg-teal-400 dark:bg-teal-400',
child: WSpacer(
className: 'w-[60px] h-3'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-blue-400 dark:bg-blue-400',
child: WSpacer(
className: 'w-2 h-2'
)
),
WText(
'Light 3h',
className: 'text-xs text-slate-300 dark:text-slate-300'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-indigo-500 dark:bg-indigo-500',
child: WSpacer(
className: 'w-2 h-2'
)
),
WText(
'Deep 1h 40m',
className: 'text-xs text-slate-300 dark:text-slate-300'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-teal-400 dark:bg-teal-400',
child: WSpacer(
className: 'w-2 h-2'
)
),
WText(
'REM 1h 12m',
className: 'text-xs text-slate-300 dark:text-slate-300'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-4 py-3 w-[150px] bg-slate-800 dark:bg-slate-800',
children: [
WIcon(
Icons.schedule,
className: 'text-slate-300 text-base dark:text-slate-300'
),
WText(
'7h 12m total',
className: 'text-sm font-semibold text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-4 py-3 w-[150px] bg-emerald-500/15 dark:bg-emerald-500/15',
children: [
WIcon(
Icons.check,
className: 'text-emerald-400 text-base dark:text-emerald-400'
),
WText(
'Restful',
className: 'text-sm font-bold text-emerald-400 dark:text-emerald-400'
),
],
),
],
),
],
)
More like this
-
Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands
A Flutter hearing test card for health apps: a pure tone audiogram with red circles for the right ear and blue crosses for the left, dotted threshold lines from 250 Hz to 8 kHz, severity bands, per-ear averages and a noise notch callout. Fixed-pixel wind_kit layout that scales cleanly.
-
Flutter Barbell Plate Loader Card with IPF Colour Coded Plates
A Flutter barbell plate loader card for gym and powerlifting apps: a side-on barbell with IPF colour-coded plates stacked heaviest first, competition collars, a per-side breakdown and an attempt strip. Exact maths: 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Built with wind_kit.
-
Flutter Eye Test Card with Snellen Acuity Chart
A vision check card for health and optician apps, built with Wind in Flutter. A real Snellen letter chart shrinks line by line from 20/200 to 20/15, the 20/20 line is highlighted as the last line read, and acuity tiles summarise each eye above a book-an-exam action.
