Tüm örnekler
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(
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'
)
),
],
),
),
),
],
)
337 satır
Playground'da aç
Benzer örnekler
-
Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands
A Flutter hearing test card for health apps: a pure tone audiogram with red circles for the right ear and blue crosses for the left, dotted threshold lines from 250 Hz to 8 kHz, severity bands, per-ear averages and a noise notch callout. Fixed-pixel wind_kit layout that scales cleanly.
-
Flutter Barbell Plate Loader Card with IPF Colour Coded Plates
A Flutter barbell plate loader card for gym and powerlifting apps: a side-on barbell with IPF colour-coded plates stacked heaviest first, competition collars, a per-side breakdown and an attempt strip. Exact maths: 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Built with wind_kit.
-
Flutter Eye Test Card with Snellen Acuity Chart
A vision check card for health and optician apps, built with Wind in Flutter. A real Snellen letter chart shrinks line by line from 20/200 to 20/15, the 20/20 line is highlighted as the last line read, and acuity tiles summarise each eye above a book-an-exam action.
