Flutter Chess Puzzle Card with Mate in Two Board
A daily chess puzzle card for Flutter apps, built with Wind: a full 8x8 board with coordinates, Unicode pieces, a highlighted last move, a mate in two badge, solve stats and a hint button. The position is a real puzzle with exactly one winning first move.
by Anılcan Çakır
130 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-[40px] h-[40px] rounded-xl bg-[#769656] dark:bg-[#769656]',
child: WText(
'♞',
className: 'text-[24px] text-white dark:text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Daily puzzle',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Puzzle rating 1640',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-amber-100 dark:bg-amber-500/20 px-3 py-1',
child: WText(
'MATE IN 2',
className: 'text-[10px] font-bold tracking-wide text-amber-700 dark:text-amber-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4 mb-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[12px] h-[12px] rounded-full bg-white dark:bg-white border-2 border-gray-900 dark:border-gray-300'
),
WText(
'White to move',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
WText(
'Black played a6',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WDiv(
className: 'relative w-[288px] h-[288px] bg-[#eeeed2] dark:bg-[#eeeed2]',
children: [
WDiv(
className: 'absolute left-[0px] top-[252px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[72px] top-[252px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[144px] top-[252px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[216px] top-[252px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[36px] top-[216px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[108px] top-[216px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[180px] top-[216px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[252px] top-[216px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[0px] top-[180px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[72px] top-[180px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[144px] top-[180px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[216px] top-[180px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[36px] top-[144px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[108px] top-[144px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[180px] top-[144px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[252px] top-[144px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[0px] top-[108px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[72px] top-[108px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[144px] top-[108px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[216px] top-[108px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[0px] top-[72px] w-[36px] h-[36px] bg-[#f6f669] dark:bg-[#f6f669]'
),
WDiv(
className: 'absolute left-[36px] top-[72px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[108px] top-[72px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[180px] top-[72px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[252px] top-[72px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[0px] top-[36px] w-[36px] h-[36px] bg-[#baca2b] dark:bg-[#baca2b]'
),
WDiv(
className: 'absolute left-[72px] top-[36px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[144px] top-[36px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[216px] top-[36px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[36px] top-[0px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[108px] top-[0px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[180px] top-[0px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WDiv(
className: 'absolute left-[252px] top-[0px] w-[36px] h-[36px] bg-[#769656] dark:bg-[#769656]'
),
WText(
'1',
className: 'absolute left-[3px] top-[254px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'2',
className: 'absolute left-[3px] top-[218px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'3',
className: 'absolute left-[3px] top-[182px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'4',
className: 'absolute left-[3px] top-[146px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'5',
className: 'absolute left-[3px] top-[110px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'6',
className: 'absolute left-[3px] top-[74px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'7',
className: 'absolute left-[3px] top-[38px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'8',
className: 'absolute left-[3px] top-[2px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'a',
className: 'absolute left-[28px] top-[275px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'b',
className: 'absolute left-[64px] top-[275px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'c',
className: 'absolute left-[100px] top-[275px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'd',
className: 'absolute left-[136px] top-[275px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'e',
className: 'absolute left-[172px] top-[275px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'f',
className: 'absolute left-[208px] top-[275px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'g',
className: 'absolute left-[244px] top-[275px] text-[9px] font-bold text-[#eeeed2] dark:text-[#eeeed2]'
),
WText(
'h',
className: 'absolute left-[280px] top-[275px] text-[9px] font-bold text-[#769656] dark:text-[#769656]'
),
WText(
'♛',
className: 'absolute left-[144px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♕',
className: 'absolute left-[144px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♜',
className: 'absolute left-[144px] top-[252px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♖',
className: 'absolute left-[144px] top-[252px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♚',
className: 'absolute left-[216px] top-[252px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♔',
className: 'absolute left-[216px] top-[252px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[0px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♙',
className: 'absolute left-[0px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[36px] top-[180px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♙',
className: 'absolute left-[36px] top-[180px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[180px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♙',
className: 'absolute left-[180px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[216px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♙',
className: 'absolute left-[216px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[252px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-white dark:text-white'
),
WText(
'♙',
className: 'absolute left-[252px] top-[216px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♜',
className: 'absolute left-[72px] top-[0px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♚',
className: 'absolute left-[216px] top-[0px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[36px] top-[36px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[0px] top-[72px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[180px] top-[36px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[216px] top-[36px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
WText(
'♟',
className: 'absolute left-[252px] top-[36px] w-[36px] h-[36px] text-center text-[28px] text-gray-900 dark:text-gray-900'
),
]
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WText(
'Solved by 62% of 18,402',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'Streak 14',
className: 'text-xs font-bold text-emerald-700 dark:text-emerald-400'
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Show a hint',
className: 'text-sm font-semibold text-center text-white dark:text-gray-900'
)
)
),
],
)
Stats
- Views
- 130
- Stars
- 0
- Revisions
- 1
- Size
- 14,125 chars
- Created
- Sep 21, 2026