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.
main.dart
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'
),
],
),
),
],
)
Stats
- Views
- 18
- Stars
- 0
- Revisions
- 1
- Size
- 5,630 chars
- Created
- Jun 11, 2026