Tüm örnekler
Flutter Grain Storage Card with Silo Fill Level Gauges
A Flutter grain storage card for farm monitoring apps: each bin drawn as a silo with a bottom-anchored fill level, a 90 percent overfill line across every silo and a flag on the bin that crossed it. Fixed-pixel wind_kit divs, no chart library, no custom painter.
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'
)
),
],
),
),
),
],
)
294 satır
Playground'da aç
Benzer örnekler
-
Flutter Bubble Level Card with Bullseye and Tilt Vials
A spirit level card for Flutter tool apps, built with Wind: a bullseye vial with target rings and crosshair, vertical and horizontal tube vials with tolerance marks, a big total tilt readout, roll and pitch tiles and a set reference button. Every bubble sits where the stated tilt puts it.
-
Flutter Battery Cell Balancing Card with Per Cell Voltage Gauges
A battery management panel that gives every cell in the pack its own vertical gauge, so a low cell and the one being bled off both stand out at a glance against the pack voltage and delta. Each gauge is a fixed height cell with a bottom anchored fill, which is the vertical twin of the classNames progress bar pattern.
-
Flutter Borehole Log Card with Proportional Soil Strata Column
A Flutter borehole log card for geotechnical and ground investigation apps: soil strata as coloured bands proportional to true thickness, a shared depth rail, SPT blow counts beside each layer and the groundwater strike marked across the column. Aligned wind_kit divs, no chart package.
