# Flutter Lab Assay Plate Card with 24 Well Dose Grid

A Flutter lab assay plate card for scientific apps: a real 24-well culture plate with lettered rows, a dose ladder across the columns, wells shaded from blank to the highest concentration and one excluded well ringed in amber. Circular wind_kit divs on a gap grid.

`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(
              'Plate CC-118',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Cytotoxicity assay, passage 6',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
        WDiv(
          className: 'rounded-full bg-violet-100 dark:bg-violet-900 px-3 py-1',
          child: WText(
            '72 h read',
            className: 'text-[10px] font-bold text-violet-700 dark:text-violet-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center gap-2 w-full mt-5',
      children: [
        WDiv(
          className: 'w-[18px]'
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            'BLK',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            'VEH',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            '0.1',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            '1',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            '10',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[34px]',
          child: WText(
            '100',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-2 w-full mt-2',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WText(
              'A',
              className: 'w-[18px] text-[10px] font-bold text-gray-400 dark:text-gray-500'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-slate-400 dark:bg-slate-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-200 dark:bg-sky-300 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-400 dark:bg-sky-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-600 dark:bg-sky-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-800 dark:bg-sky-900 border border-gray-300 dark:border-gray-600'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WText(
              'B',
              className: 'w-[18px] text-[10px] font-bold text-gray-400 dark:text-gray-500'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-slate-400 dark:bg-slate-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-200 dark:bg-sky-300 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-400 dark:bg-sky-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-600 dark:bg-sky-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-800 dark:bg-sky-900 border border-gray-300 dark:border-gray-600'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WText(
              'C',
              className: 'w-[18px] text-[10px] font-bold text-gray-400 dark:text-gray-500'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-slate-400 dark:bg-slate-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-200 dark:bg-sky-300 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-400 dark:bg-sky-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-amber-400 dark:bg-amber-500 border-2 border-amber-600 dark:border-amber-700'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-800 dark:bg-sky-900 border border-gray-300 dark:border-gray-600'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WText(
              'D',
              className: 'w-[18px] text-[10px] font-bold text-gray-400 dark:text-gray-500'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-slate-400 dark:bg-slate-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-200 dark:bg-sky-300 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-400 dark:bg-sky-500 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-600 dark:bg-sky-700 border border-gray-300 dark:border-gray-600'
            ),
            WDiv(
              className: 'w-[34px] h-[34px] rounded-full bg-sky-800 dark:bg-sky-900 border border-gray-300 dark:border-gray-600'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'w-[10px] h-[10px] rounded-full bg-sky-200 dark:bg-sky-300 ml-1'
            ),
            WDiv(
              className: 'w-[10px] h-[10px] rounded-full bg-sky-400 dark:bg-sky-500 ml-1'
            ),
            WDiv(
              className: 'w-[10px] h-[10px] rounded-full bg-sky-600 dark:bg-sky-700 ml-1'
            ),
            WDiv(
              className: 'w-[10px] h-[10px] rounded-full bg-sky-800 dark:bg-sky-900 ml-1'
            ),
            WDiv(
              className: 'ml-2',
              child: WText(
                '0.1 to 100 uM',
                className: 'text-[10px] text-gray-500 dark:text-gray-400'
              )
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'w-[10px] h-[10px] rounded-full bg-amber-400 dark:bg-amber-500'
            ),
            WDiv(
              className: 'ml-2',
              child: WText(
                'Excluded well',
                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(
              'WELLS',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
            WText(
              '24',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'seeded',
              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(
              'IC50',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
            WText(
              '12.4',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'uM',
              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(
              'FLAGGED',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
            WText(
              '1',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'well C5',
              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(
              'Well C5 excluded for turbidity',
              className: 'text-[11px] font-semibold text-amber-800 dark:text-amber-200'
            ),
            WText(
              'The 10 uM dose point now runs on three replicates',
              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(
              'Open plate report',
              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'
              )
            ),
          ],
        ),
      ),
    ),
  ],
)
```