Flutter Barbell Plate Loader Card with IPF Colour Coded Plates
A barbell plate loader card built with Wind: a side-on barbell with IPF colour coded calibrated plates stacked heaviest first, competition collars and sleeves, a per-side plate breakdown, and an attempt strip for a powerlifting meet. The maths is exact: a 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Pure Tailwind-style className utilities, ready for gym, strength training and meet management apps.
by Anılcan Çakır
102 views
0 stars
3 weeks ago
Rev 1
main.dart
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'
)
)
),
],
)
Stats
- Views
- 102
- Stars
- 0
- Revisions
- 1
- Size
- 8,076 chars
- Created
- Oct 4, 2026