Flutter Daily Crossword Card with Blacked Out Mini Grid
A daily mini puzzle card with a real five by five board: symmetric black squares, superscript clue numbers, an amber band on the active across word and a stronger fill on the cursor cell. Every visible word solves (BASIL, REALM and ENTER across, BARGE, SLANT and LEMUR down) and two cells are still blank, so the card reads as a puzzle in progress rather than a mockup. Below the grid sit the active clue, a struck through solved clue and a resume action. Wind className strings only, no grid library.
by Anılcan Çakır
9 views
0 stars
1 day 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(
'THE MINI',
className: 'text-[9px] font-bold tracking-widest text-amber-600 dark:text-amber-400'
),
WText(
'Monday 24 August',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'Best time 0:41',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-amber-50 dark:bg-amber-900 px-3 py-1',
children: [
WIcon(
Icons.local_fire_department,
className: 'text-amber-500 dark:text-amber-300 text-sm'
),
WText(
'12',
className: 'text-sm font-bold text-amber-700 dark:text-amber-200 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'flex flex-col',
children: [
WDiv(
className: 'flex flex-row',
children: [
WDiv(
className: 'relative w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
children: [
WDiv(
className: 'absolute left-[3px] top-[1px]',
child: WText(
'1',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[44px] h-[24px] flex flex-row items-center justify-center',
child: WText(
'B',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'relative w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
children: [
WDiv(
className: 'absolute left-[3px] top-[1px]',
child: WText(
'2',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[44px] h-[24px] flex flex-row items-center justify-center',
child: WText(
'A',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'S',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'I',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'relative w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
children: [
WDiv(
className: 'absolute left-[3px] top-[1px]',
child: WText(
'3',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[44px] h-[24px] flex flex-row items-center justify-center',
child: WText(
'L',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
],
),
WDiv(
className: 'flex flex-row',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'A',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'w-[44px] h-[44px] bg-gray-800 dark:bg-gray-700'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'L',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'w-[44px] h-[44px] bg-gray-800 dark:bg-gray-700'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'E',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row',
children: [
WDiv(
className: 'relative w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
children: [
WDiv(
className: 'absolute left-[3px] top-[1px]',
child: WText(
'4',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[44px] h-[24px] flex flex-row items-center justify-center',
child: WText(
'R',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'E',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'A',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'L',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'M',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'G',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'w-[44px] h-[44px] bg-gray-800 dark:bg-gray-700'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'N',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'w-[44px] h-[44px] bg-gray-800 dark:bg-gray-700'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900',
child: WText(
'U',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row',
children: [
WDiv(
className: 'relative w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-amber-50 dark:bg-amber-900',
children: [
WDiv(
className: 'absolute left-[3px] top-[1px]',
child: WText(
'6',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[0px] top-[10px] w-[44px] h-[24px] flex flex-row items-center justify-center',
child: WText(
'E',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-amber-50 dark:bg-amber-900',
child: WText(
'N',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-amber-50 dark:bg-amber-900',
child: WText(
'T',
className: 'text-lg font-bold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-amber-300 dark:bg-amber-500'
),
WDiv(
className: 'w-[44px] h-[44px] border border-gray-300 dark:border-gray-600 bg-amber-50 dark:bg-amber-900'
),
],
),
],
),
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-amber-50 dark:bg-amber-900 px-3 py-2 mt-4',
children: [
WDiv(
className: 'rounded-md bg-amber-500 dark:bg-amber-400 px-2 py-1',
child: WText(
'6 ACROSS',
className: 'text-[9px] font-bold tracking-wide text-white dark:text-white'
),
),
WText(
'Go inside (5)',
className: 'text-sm font-bold text-amber-800 dark:text-amber-100 ml-2'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'1 DOWN',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'Flat bottomed boat',
className: 'text-sm font-semibold line-through text-gray-400 dark:text-gray-500 ml-2'
),
],
),
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
],
),
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-gray-100 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.play_arrow,
className: 'text-white dark:text-gray-900 text-base'
),
WText(
'Resume puzzle',
className: 'text-sm font-bold text-white dark:text-gray-900 ml-2'
),
],
),
),
),
],
)
Stats
- Views
- 9
- Stars
- 0
- Revisions
- 1
- Size
- 13,584 chars
- Created
- Aug 23, 2026