All snippets
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.
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(
'Borehole BH-04',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Riverside bridge, south abutment',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-indigo-100 dark:bg-indigo-900 px-3 py-1',
child: WText(
'Cable percussion',
className: 'text-[10px] font-bold text-indigo-700 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-end w-[44px]',
child: WText(
'0.0',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
)
),
WDiv(
className: 'w-[54px]'
),
WDiv(
className: 'ml-3',
child: WText(
'STRATUM',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
)
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-1',
children: [
WDiv(
className: 'flex flex-col w-[44px]',
children: [
WDiv(
className: 'flex flex-col items-end justify-end w-full h-[25px]',
child: WText(
'1.4',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-col items-end justify-end w-full h-[50px]',
child: WText(
'4.2',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-col items-end justify-end w-full h-[50px]',
child: WText(
'7.0',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-col items-end justify-end w-full h-[47px]',
child: WText(
'9.6',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-col items-end justify-end w-full h-[43px]',
child: WText(
'12.0',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'relative w-[54px] h-[215px]',
children: [
WDiv(
className: 'flex flex-col w-[54px]',
children: [
WDiv(
className: 'w-full h-[25px] rounded-t-md bg-gray-400 dark:bg-gray-500 border-b border-white dark:border-gray-900'
),
WDiv(
className: 'w-full h-[50px] bg-amber-600 dark:bg-amber-700 border-b border-white dark:border-gray-900'
),
WDiv(
className: 'w-full h-[50px] bg-yellow-400 dark:bg-yellow-500 border-b border-white dark:border-gray-900'
),
WDiv(
className: 'w-full h-[47px] bg-amber-800 dark:bg-amber-900 border-b border-white dark:border-gray-900'
),
WDiv(
className: 'w-full h-[43px] rounded-b-md bg-slate-500 dark:bg-slate-600 border-b border-white dark:border-gray-900'
),
],
),
WDiv(
className: 'absolute left-[0px] top-[50px] w-[54px] h-[2px] bg-sky-500 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[46px] top-[46px] w-[10px] h-[10px] rounded-full bg-sky-500 dark:bg-sky-400 border-2 border-white dark:border-gray-900'
),
],
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-[200px] h-[25px]',
children: [
WText(
'Made ground',
className: 'text-[11px] font-medium text-gray-800 dark:text-gray-100'
),
WDiv(
className: 'rounded bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'N 4',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[200px] h-[50px]',
children: [
WText(
'Soft silty CLAY',
className: 'text-[11px] font-medium text-gray-800 dark:text-gray-100'
),
WDiv(
className: 'rounded bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'N 7',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[200px] h-[50px]',
children: [
WText(
'Dense fine SAND',
className: 'text-[11px] font-medium text-gray-800 dark:text-gray-100'
),
WDiv(
className: 'rounded bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'N 24',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[200px] h-[47px]',
children: [
WText(
'Stiff sandy CLAY',
className: 'text-[11px] font-medium text-gray-800 dark:text-gray-100'
),
WDiv(
className: 'rounded bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'N 19',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[200px] h-[43px]',
children: [
WText(
'MUDSTONE',
className: 'text-[11px] font-medium text-gray-800 dark:text-gray-100'
),
WDiv(
className: 'rounded bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'N 50',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-3',
children: [
WDiv(
className: 'w-[16px] h-[2px] bg-sky-500 dark:bg-sky-400'
),
WDiv(
className: 'ml-2',
child: WText(
'Groundwater struck at 2.8 m',
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(
'DEPTH',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'12.0',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'metres',
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(
'GWL',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'2.8',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'metres bgl',
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(
'SAMPLES',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'14',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'recovered',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 rounded-2xl bg-emerald-50 dark:bg-emerald-950 px-3 py-2',
children: [
WIcon(
Icons.check_circle,
className: 'text-base text-emerald-600 dark:text-emerald-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Rockhead proved at 9.6 m',
className: 'text-[11px] font-semibold text-emerald-800 dark:text-emerald-200'
),
WText(
'2.4 m of penetration into weathered mudstone',
className: 'text-[10px] text-emerald-700 dark:text-emerald-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(
'Export AGS log',
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'
)
),
],
),
),
),
],
)
328 lines
Open in the playground
More like this
-
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
-
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums
A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
-
Flutter Git Commit Graph Card with Branch Lanes and Merge Lines
A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
