Flutter Borehole Log Card with Proportional Soil Strata Column
A ground investigation card that renders a real borehole log: each stratum is a coloured band whose height is proportional to its true thickness, depth boundaries line up on a shared rail, SPT blow counts sit beside every layer and the groundwater strike is marked across the column. Three aligned lanes of Wind divs, no chart package and no image.
by Anılcan Çakır
52 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(
'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'
)
),
],
),
),
),
],
)
Stats
- Views
- 52
- Stars
- 0
- Revisions
- 1
- Size
- 11,262 chars
- Created
- Sep 1, 2026