All snippets
Flutter Daily Crossword Card with Blacked Out Mini Grid
A Flutter daily crossword card for puzzle and word game apps: a real 5x5 mini board with symmetric black squares, clue numbers, an amber active word and cursor cell, solved words, the active clue and a resume button. wind_kit className strings only, no grid library.
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'
),
],
),
),
),
],
)
341 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.
