All snippets
Flutter Lap Delta Card with Diverging Sector Time Bars
A Flutter lap delta card for race telemetry apps: each mini sector is a bar that grows up when time is gained and down when it is lost, all anchored to one zero line. Flex columns with a fixed-pixel spacer in wind_kit, no chart package.
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'
),
),
),
],
)
323 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 Connect Four Board Card with Winning Diagonal and Series Score
A Connect Four game card for casual and board game apps: a 7 by 6 board with ringed winning discs on the diagonal, a marker over the last column played, the head to head series score, move and disc counts, and a play-again button.
