# 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`, `WText`, `WIcon`, `WButton`

```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'
              )
            ),
          ],
        ),
      ),
    ),
  ],
)
```