All snippets
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.
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-red-600 dark:bg-red-500',
child: WIcon(
Icons.fitness_center,
className: 'text-xl text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Plate loader',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Squat, third attempt, platform A',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1',
child: WText(
'IPF',
className: 'text-xs font-bold text-gray-700 dark:text-gray-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-end gap-2 mt-4',
children: [
WText(
'205',
className: 'text-4xl font-bold text-gray-900 dark:text-white'
),
WText(
'kg on the bar',
className: 'text-sm text-gray-500 dark:text-gray-400 pb-1'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full h-[136px] rounded-2xl bg-gray-50 dark:bg-gray-800 mt-3',
children: [
WDiv(
className: 'w-[16px] h-[14px] rounded-l-sm bg-gray-300 dark:bg-gray-500'
),
WDiv(
className: 'w-[8px] h-[30px] rounded-sm bg-gray-500 dark:bg-gray-400'
),
WDiv(
className: 'w-[12px] h-[104px] rounded-[3px] bg-yellow-400 dark:bg-yellow-500 ml-[2px]'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[6px] h-[36px] rounded-sm bg-gray-400 dark:bg-gray-500 ml-[2px]'
),
WDiv(
className: 'w-[72px] h-[8px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'w-[6px] h-[36px] rounded-sm bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[15px] h-[120px] rounded-[3px] bg-red-600 dark:bg-red-500 ml-[2px]'
),
WDiv(
className: 'w-[12px] h-[104px] rounded-[3px] bg-yellow-400 dark:bg-yellow-500 ml-[2px]'
),
WDiv(
className: 'w-[8px] h-[30px] rounded-sm bg-gray-500 dark:bg-gray-400 ml-[2px]'
),
WDiv(
className: 'w-[16px] h-[14px] rounded-r-sm bg-gray-300 dark:bg-gray-500'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WText(
'Each side, inside out',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'90 kg + collar',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full bg-red-50 dark:bg-red-900 px-2 py-1',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-red-600 dark:bg-red-400'
),
WText(
'25 × 3',
className: 'text-xs font-semibold text-red-700 dark:text-red-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full bg-yellow-50 dark:bg-yellow-900 px-2 py-1',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-yellow-400 dark:bg-yellow-400'
),
WText(
'15 × 1',
className: 'text-xs font-semibold text-yellow-700 dark:text-yellow-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-gray-500 dark:bg-gray-400'
),
WText(
'Collar 2.5',
className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
),
]
),
]
),
]
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700 mt-4'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl bg-emerald-50 dark:bg-emerald-900 py-2',
children: [
WText(
'1ST',
className: 'text-[10px] font-bold tracking-wide text-emerald-600 dark:text-emerald-400'
),
WText(
'190',
className: 'text-base font-bold text-emerald-700 dark:text-emerald-300'
),
WText(
'Good lift',
className: 'text-[11px] text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl bg-emerald-50 dark:bg-emerald-900 py-2',
children: [
WText(
'2ND',
className: 'text-[10px] font-bold tracking-wide text-emerald-600 dark:text-emerald-400'
),
WText(
'197.5',
className: 'text-base font-bold text-emerald-700 dark:text-emerald-300'
),
WText(
'Good lift',
className: 'text-[11px] text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl border-2 border-red-500 dark:border-red-400 py-2',
children: [
WText(
'3RD',
className: 'text-[10px] font-bold tracking-wide text-red-600 dark:text-red-400'
),
WText(
'205',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'On deck',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
]
),
]
),
WText(
'20 kg bar plus two 2.5 kg collars, then 90 kg loaded on each side, heaviest plate inside.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Bar loaded, call the lifter',
className: 'text-sm font-semibold text-center text-white dark:text-gray-900'
)
)
),
],
)
237 lines
Open in the playground
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 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.
-
Flutter Lab Assay Plate Card with 24 Well Dose Grid
A Flutter lab assay plate card for scientific apps: a real 24-well culture plate with lettered rows, a dose ladder across the columns, wells shaded from blank to the highest concentration and one excluded well ringed in amber. Circular wind_kit divs on a gap grid.
