Flutter Lap Delta Card with Diverging Sector Time Bars
A race telemetry panel where every mini sector is a bar that grows upward when the driver gains time and downward when it is lost, all anchored to a single zero line. The diverging chart is a row of flex columns with a fixed pixel spacer above each bar, so it needs no chart package and stays pure Tailwind syntax classNames.
by Anılcan Çakır
55 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 border border-gray-200 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-rose-500 dark:bg-rose-600',
child: WIcon(
Icons.directions_car,
className: 'text-lg text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Car 27, Bellini',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Lap 34 of 58, medium',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-rose-50 dark:bg-rose-900 px-3 py-1',
child: WText(
'STINT 2',
className: 'text-[9px] font-bold tracking-wide text-rose-600 dark:text-rose-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'1:32.418',
className: 'text-2xl font-bold text-gray-900 dark:text-white'
),
WText(
'LAP TIME',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WDiv(
className: 'flex flex-row items-center rounded-lg bg-emerald-500 dark:bg-emerald-600 px-2 py-1',
child: WText(
'-0.214',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'mt-1',
child: WText(
'vs personal best',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'MINI SECTOR DELTA',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'1 to 10',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-2',
child: WDiv(
className: 'relative w-[312px] h-[78px]',
children: [
WDiv(
className: 'flex flex-row items-start gap-2 w-[312px] h-[78px]',
children: [
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[32px]'
),
WDiv(
className: 'w-[24px] h-[18px] rounded-t bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[50px]'
),
WDiv(
className: 'w-[24px] h-[9px] rounded-b bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[17px]'
),
WDiv(
className: 'w-[24px] h-[33px] rounded-t bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[4px]'
),
WDiv(
className: 'w-[24px] h-[46px] rounded-t bg-violet-500 dark:bg-violet-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[50px]'
),
WDiv(
className: 'w-[24px] h-[13px] rounded-b bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[46px]'
),
WDiv(
className: 'w-[24px] h-[4px] rounded-t bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[50px]'
),
WDiv(
className: 'w-[24px] h-[24px] rounded-b bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[10px]'
),
WDiv(
className: 'w-[24px] h-[40px] rounded-t bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[39px]'
),
WDiv(
className: 'w-[24px] h-[11px] rounded-t bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col justify-start w-[24px] h-[78px]',
children: [
WDiv(
className: 'w-[24px] h-[50px]'
),
WDiv(
className: 'w-[24px] h-[20px] rounded-b bg-rose-500 dark:bg-rose-400'
),
],
),
],
),
WDiv(
className: 'absolute left-[0px] top-[49px] w-[312px] h-[2px] bg-gray-400 dark:bg-gray-500'
),
],
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-3',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'ml-2',
child: WText(
'time gained',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-rose-500 dark:bg-rose-400 ml-4'
),
WDiv(
className: 'ml-2',
child: WText(
'time lost',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'w-2 h-2 rounded-full bg-violet-500 dark:bg-violet-400 ml-4'
),
WDiv(
className: 'ml-2',
child: WText(
'session best',
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 items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'4',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'POSITION',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'+1.8',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'GAP',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'12',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'TYRE LAPS',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-xl bg-violet-50 dark:bg-violet-900 px-3 py-2 mt-3',
children: [
WIcon(
Icons.bolt,
className: 'text-base text-violet-500 dark:text-violet-300'
),
WDiv(
className: 'ml-2',
child: WText(
'Session best mini sector through turn 9',
className: 'text-[11px] font-medium text-violet-700 dark:text-violet-200'
),
),
],
),
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: WText(
'Compare with best lap',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 55
- Stars
- 0
- Revisions
- 1
- Size
- 10,667 chars
- Created
- Sep 2, 2026