Flutter Speedcube Timer Card with Unfolded Scramble Net
A speedcubing timer card for puzzle and hobby apps, built with Wind in Flutter. The unfolded cube net shows the exact sticker state the 20-move scramble produces, with the scramble in WCA notation, the last five solves with dropped times in parentheses, and best, average-of-five and solve count tiles above a start-inspection action.
by Anılcan Çakır
118 views
0 stars
1 month ago
Rev 1
main.dart
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'
),
]
)
)
),
],
)
Stats
- Views
- 118
- Stars
- 0
- Revisions
- 1
- Size
- 12,742 chars
- Created
- Sep 23, 2026