Flutter Meditation Session Card with Streak and Weekly Goal
A calming daily meditation card with a gradient backdrop, guided session details, a streak badge, and a weekly goal progress bar. Built with Wind utility classes and complete dark-mode pairs.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gradient-to-br from-indigo-500 to-purple-600 shadow-xl dark:from-indigo-600 dark:to-purple-700',
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: 'w-8 h-8 rounded-full bg-white/20 dark:bg-white/20 flex flex-row items-center justify-center',
child: WIcon(
Icons.dark_mode,
className: 'text-base text-white dark:text-white'
),
),
WText(
'Daily Calm',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-white/15 dark:bg-white/15',
children: [
WIcon(
Icons.bolt,
className: 'text-xs text-amber-200 dark:text-amber-200'
),
WText(
'12 day streak',
className: 'text-xs font-medium text-white dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-1 w-full',
children: [
WText(
'Evening Wind Down',
className: 'text-2xl font-bold text-white dark:text-white'
),
WText(
'Release the day and ease into rest',
className: 'text-sm text-indigo-100 dark:text-indigo-100'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-4 w-full',
children: [
WButton(
className: 'w-14 h-14 rounded-full bg-white dark:bg-white shadow-lg flex flex-row items-center justify-center',
child: WIcon(
Icons.play_arrow,
className: 'text-2xl text-purple-600 dark:text-purple-600'
),
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'10 min session',
className: 'text-sm font-semibold text-white dark:text-white'
),
WText(
'Guided by Aria',
className: 'text-xs text-indigo-100 dark:text-indigo-100'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Weekly goal',
className: 'text-xs text-indigo-100 dark:text-indigo-100'
),
WText(
'4 / 7 sessions',
className: 'text-xs font-medium text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-white/20 dark:bg-white/20',
child: WDiv(
className: 'h-2 w-[192px] rounded-full bg-white dark:bg-white',
child: WSpacer(
className: 'w-[192px] h-2'
),
),
),
],
),
],
)
Benzer örnekler
-
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.
