Flutter Lab Assay Plate Card with 24 Well Dose Grid
A laboratory card that lays out a real 24 well culture plate: lettered rows, a dose ladder across the columns, wells shaded from blank through vehicle control to the highest concentration, and one excluded well ringed in amber. The whole plate is circular Wind divs on a gap grid, so a scientific readout ships as plain className utilities.
by Anılcan Çakır
49 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(
'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'
)
),
],
),
),
),
],
)
Stats
- Views
- 49
- Stars
- 0
- Revisions
- 1
- Size
- 12,199 chars
- Created
- Sep 1, 2026