Flutter Grain Storage Card with Silo Fill Level Gauges
A farm storage monitoring card that renders each bin as a real silo silhouette with a bottom anchored fill level, marks the 90 percent overfill line across every vessel, and flags the bin that has crossed it. The gauges are ordinary Wind divs with fixed pixel fills, so the whole yard reads at a glance with no chart library and no custom painter.
by Anılcan Çakır
47 views
0 stars
1 week ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Kestrel Ridge Farm',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Grain storage, west yard',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-emerald-100 dark:bg-emerald-900 px-3 py-1',
children: [
WDiv(
className: 'w-[6px] h-[6px] rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'ml-2',
child: WText(
'4 bins live',
className: 'text-[10px] font-bold text-emerald-700 dark:text-emerald-300'
)
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-5',
children: [
WDiv(
className: 'flex flex-col items-center w-[68px]',
children: [
WText(
'92%',
className: 'text-[11px] font-bold text-rose-600 dark:text-rose-400'
),
WDiv(
className: 'w-[52px] h-[14px] rounded-t-full bg-gray-300 dark:bg-gray-600 mt-1'
),
WDiv(
className: 'relative w-[52px] h-[104px] rounded-b-xl border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-col justify-end w-full h-full',
child: WDiv(
className: 'w-full h-[96px] rounded-b-lg bg-amber-400 dark:bg-amber-500'
),
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[48px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
],
),
WText(
'B1',
className: 'text-[11px] font-bold text-gray-700 dark:text-gray-200 mt-2'
),
WText(
'Wheat',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[68px]',
children: [
WText(
'61%',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[52px] h-[14px] rounded-t-full bg-gray-300 dark:bg-gray-600 mt-1'
),
WDiv(
className: 'relative w-[52px] h-[104px] rounded-b-xl border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-col justify-end w-full h-full',
child: WDiv(
className: 'w-full h-[63px] rounded-b-lg bg-yellow-300 dark:bg-yellow-400'
),
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[48px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
],
),
WText(
'B2',
className: 'text-[11px] font-bold text-gray-700 dark:text-gray-200 mt-2'
),
WText(
'Barley',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[68px]',
children: [
WText(
'34%',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[52px] h-[14px] rounded-t-full bg-gray-300 dark:bg-gray-600 mt-1'
),
WDiv(
className: 'relative w-[52px] h-[104px] rounded-b-xl border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-col justify-end w-full h-full',
child: WDiv(
className: 'w-full h-[35px] rounded-b-lg bg-lime-400 dark:bg-lime-500'
),
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[48px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
],
),
WText(
'B3',
className: 'text-[11px] font-bold text-gray-700 dark:text-gray-200 mt-2'
),
WText(
'Canola',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[68px]',
children: [
WText(
'78%',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[52px] h-[14px] rounded-t-full bg-gray-300 dark:bg-gray-600 mt-1'
),
WDiv(
className: 'relative w-[52px] h-[104px] rounded-b-xl border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-col justify-end w-full h-full',
child: WDiv(
className: 'w-full h-[81px] rounded-b-lg bg-amber-400 dark:bg-amber-500'
),
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[48px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
],
),
WText(
'B4',
className: 'text-[11px] font-bold text-gray-700 dark:text-gray-200 mt-2'
),
WText(
'Wheat',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-3',
children: [
WDiv(
className: 'w-[16px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'ml-2',
child: WText(
'90% overfill line',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'STORED',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'4,180',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'tonnes',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'MC',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'13.2%',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'moisture',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'TEMP',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'14.2',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'degrees C',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 rounded-2xl bg-amber-50 dark:bg-amber-950 px-3 py-2',
children: [
WIcon(
Icons.warning,
className: 'text-base text-amber-600 dark:text-amber-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Bin 1 is above the overfill line',
className: 'text-[11px] font-semibold text-amber-800 dark:text-amber-200'
),
WText(
'Outload 140 t before the Thursday delivery',
className: 'text-[10px] text-amber-700 dark:text-amber-300'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Plan outload',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
WDiv(
className: 'ml-2',
child: WIcon(
Icons.arrow_forward,
className: 'text-base text-white dark:text-gray-900'
)
),
],
),
),
),
],
)
Stats
- Views
- 47
- Stars
- 0
- Revisions
- 1
- Size
- 9,987 chars
- Created
- Sep 1, 2026