Flutter Workout Plan Card with Exercise List
A compact fitness workout card: session title with a gradient icon badge, difficulty and calorie chips, a numbered exercise list with set and rep counts, and a bold start button. Built in the Wind Dart dialect with Tailwind-style className and full dark-mode pairs.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl border p-6 bg-white border-gray-100 shadow-xl dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-4 w-full',
children: [
WDiv(
className: 'flex items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-600 shadow-lg',
child: WIcon(
Icons.fitness_center,
className: 'text-white text-2xl'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Upper Body Blast',
className: 'text-xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'Build strength and power',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'rounded-full px-3 py-1 bg-violet-50 dark:bg-violet-950',
child: WText(
'Intermediate',
className: 'text-xs font-semibold text-violet-700 dark:text-violet-300'
),
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-orange-50 dark:bg-orange-950',
children: [
WIcon(
Icons.local_fire_department,
className: 'text-orange-500 text-sm dark:text-orange-400'
),
WText(
'320 kcal',
className: 'text-xs font-semibold text-orange-700 dark:text-orange-300'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-gray-100 dark:bg-gray-800',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-500 text-sm dark:text-gray-400'
),
WText(
'45 min',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-900',
child: WText(
'1',
className: 'text-sm font-bold text-violet-700 dark:text-violet-300'
),
),
WText(
'Push-ups',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
WText(
'3 x 12',
className: 'text-sm font-medium text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-900',
child: WText(
'2',
className: 'text-sm font-bold text-violet-700 dark:text-violet-300'
),
),
WText(
'Shoulder Press',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
WText(
'4 x 10',
className: 'text-sm font-medium text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-900',
child: WText(
'3',
className: 'text-sm font-bold text-violet-700 dark:text-violet-300'
),
),
WText(
'Bench Press',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
WText(
'3 x 8',
className: 'text-sm font-medium text-gray-500 dark:text-gray-400'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl px-5 py-3 bg-violet-600 hover:bg-violet-500 shadow-lg dark:bg-violet-500 dark:hover:bg-violet-400',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.play_arrow,
className: 'text-white text-xl'
),
WText(
'Start Workout',
className: 'text-base font-bold text-white'
),
],
),
),
],
)
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.
