All snippets
Flutter Crop Field Health Card with Soil Moisture Zones
A Flutter crop field health card for precision agriculture apps: NDVI canopy score with weekly delta, four zones with soil moisture bars (dry, optimal, wet), weather and harvest stats and the next irrigation window. Bars sized in pixels on one shared scale with wind_kit.
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-lime-50 dark:bg-lime-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.water_drop,
className: 'text-lime-600 dark:text-lime-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Field 7, Corn',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'42 acres | 12 of 12 sensors',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-800',
child: WText(
'Healthy',
className: 'text-xs font-semibold text-emerald-700 dark:text-emerald-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-end w-full mt-5',
children: [
WText(
'0.78',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'NDVI canopy vigour',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-2'
),
WDiv(
className: 'flex flex-row items-center ml-2',
children: [
WIcon(
Icons.trending_up,
className: 'text-emerald-600 dark:text-emerald-400 text-sm'
),
WText(
'0.04',
className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400 ml-0.5'
),
],
),
],
),
WText(
'SOIL MOISTURE BY ZONE',
className: 'text-xs font-semibold tracking-widest text-gray-400 dark:text-gray-500 mt-5'
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'North zone',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Optimal',
className: 'text-xs font-medium text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[110px] h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'w-[68px] h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
),
WText(
'62%',
className: 'text-sm font-bold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'East zone',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Dry, needs water',
className: 'text-xs font-medium text-amber-600 dark:text-amber-400'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[110px] h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'w-[31px] h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
),
WText(
'28%',
className: 'text-sm font-bold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'South zone',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Optimal',
className: 'text-xs font-medium text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[110px] h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'w-[63px] h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
),
WText(
'57%',
className: 'text-sm font-bold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'West zone',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Wet, hold off',
className: 'text-xs font-medium text-sky-600 dark:text-sky-400'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[110px] h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'w-[92px] h-2.5 rounded-full bg-sky-500 dark:bg-sky-400'
),
),
WText(
'84%',
className: 'text-sm font-bold text-gray-900 dark:text-white ml-3'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-4 mt-5',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'24 C',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Air temp',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'6 mm',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Rain 24 h',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'11 kph',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Wind',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'38 d',
className: 'text-base font-bold text-lime-600 dark:text-lime-400'
),
WText(
'To harvest',
className: 'text-xs 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-row items-center',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-400 dark:text-gray-500 text-sm'
),
WText(
'Irrigation starts 05:30 on East',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WIcon(
Icons.chevron_right,
className: 'text-gray-300 dark:text-gray-600 text-base'
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-lime-600 dark:bg-lime-500 py-3',
child: WText(
'Run Irrigation Now',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
298 lines
Open in the playground
More like this
-
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.
