All snippets
Flutter Speedcube Timer Card with Unfolded Scramble Net
A Flutter speedcube timer card for puzzle and hobby apps: an unfolded cube net showing the exact state of a 20-move scramble in WCA notation, the last five solves with dropped times, best, average-of-five and solve count tiles and a start-inspection action. Built with wind_kit.
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-red-600 dark:bg-red-500',
child: WText(
'3x3',
className: 'text-xs font-black text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Cube timer',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Session 3x3, solve 39',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1',
child: WText(
'CFOP',
className: 'text-xs font-bold text-gray-700 dark:text-gray-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'relative w-[272px] h-[204px]',
children: [
WDiv(
className: 'absolute left-[68px] top-[0px] w-[68px] h-[68px] rounded-lg bg-gray-900 dark:bg-gray-950'
),
WDiv(
className: 'absolute left-[0px] top-[68px] w-[272px] h-[68px] rounded-lg bg-gray-900 dark:bg-gray-950'
),
WDiv(
className: 'absolute left-[68px] top-[136px] w-[68px] h-[68px] rounded-lg bg-gray-900 dark:bg-gray-950'
),
WDiv(
className: 'absolute left-[70px] top-[2px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[92px] top-[2px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[114px] top-[2px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[70px] top-[24px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[92px] top-[24px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[114px] top-[24px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[70px] top-[46px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[92px] top-[46px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[114px] top-[46px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[2px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[24px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[46px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[2px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[24px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[46px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[2px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[24px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[46px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[70px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[92px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[114px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[70px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[92px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[114px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[70px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[92px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[114px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[138px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[160px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[182px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[138px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[160px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[182px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[138px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[160px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[182px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[206px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[228px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[250px] top-[70px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[206px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[228px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[250px] top-[92px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[206px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[228px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[250px] top-[114px] w-[20px] h-[20px] rounded-[3px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'absolute left-[70px] top-[138px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[92px] top-[138px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[114px] top-[138px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[70px] top-[160px] w-[20px] h-[20px] rounded-[3px] bg-red-600 dark:bg-red-600'
),
WDiv(
className: 'absolute left-[92px] top-[160px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
WDiv(
className: 'absolute left-[114px] top-[160px] w-[20px] h-[20px] rounded-[3px] bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[70px] top-[182px] w-[20px] h-[20px] rounded-[3px] bg-green-500 dark:bg-green-500'
),
WDiv(
className: 'absolute left-[92px] top-[182px] w-[20px] h-[20px] rounded-[3px] bg-blue-600 dark:bg-blue-600'
),
WDiv(
className: 'absolute left-[114px] top-[182px] w-[20px] h-[20px] rounded-[3px] bg-yellow-300 dark:bg-yellow-300'
),
]
)
),
WDiv(
className: 'flex flex-col w-full mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-3 py-2',
children: [
WText(
'SCRAMBLE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'R U2 F’ L D2 B U’ R2 F D’',
className: 'text-[13px] font-semibold tracking-wide mt-1 text-gray-900 dark:text-white'
),
WText(
'L2 U B2 R’ D F2 U2 L B’ D2',
className: 'text-[13px] font-semibold tracking-wide text-gray-900 dark:text-white'
),
]
),
WText(
'Last 5: 13.92 15.41 (12.88) (16.70) 14.02',
className: 'text-xs font-medium mt-3 text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row gap-2 w-full mt-3',
children: [
WDiv(
className: 'flex flex-col w-[94px] rounded-2xl bg-emerald-50 dark:bg-emerald-900 p-3',
children: [
WText(
'11.84',
className: 'text-lg font-bold text-emerald-700 dark:text-emerald-300'
),
WText(
'BEST',
className: 'text-[9px] font-bold tracking-widest text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-2xl bg-gray-50 dark:bg-gray-800 p-3',
children: [
WText(
'14.45',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'AO5',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-2xl bg-gray-50 dark:bg-gray-800 p-3',
children: [
WText(
'38',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'SOLVES',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.timer,
className: 'text-base text-white dark:text-gray-900'
),
WText(
'Start 15s inspection',
className: 'text-sm font-semibold text-white dark:text-gray-900'
),
]
)
)
),
],
)
305 lines
Open in the playground
More like this
-
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.
-
Flutter Golf Scorecard Card with Birdie Circles and Bogey Squares
A Flutter golf scorecard card for round tracker apps: a back nine with hole and par rows, strokes marked the way golfers read them (circles under par, a double ring for an eagle, squares over par), a total against par and a post-to-handicap button. Built with wind_kit and dark mode pairs.
-
Flutter Poker Hand Odds Card with Board Cards and Equity Bar
A Flutter poker odds card for trainers and odds calculator apps: heads-up hole cards with suit glyphs, a flop with empty turn and river slots, a win and lose equity bar and every out as a mini card. Exact numbers over all 990 run-outs. Built with wind_kit className utilities.
