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.
by Anılcan Çakır
97 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
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-blue-600 dark:bg-blue-500',
child: WIcon(
Icons.sports_esports,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Connect Four',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Mia vs Leo, game 5',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-yellow-100 dark:bg-yellow-900/40 px-3 py-1',
child: WText(
'Mia wins',
className: 'text-xs font-bold text-yellow-700 dark:text-yellow-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-4 h-4 rounded-full bg-yellow-400 dark:bg-yellow-400'
),
WText(
'Mia',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'3',
className: 'text-sm font-bold text-gray-900 dark:text-white ml-1'
),
]
),
WText(
'series',
className: 'text-[11px] text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'2',
className: 'text-sm font-bold text-gray-900 dark:text-white mr-1'
),
WText(
'Leo',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-red-500 dark:bg-red-500'
),
]
),
]
),
WDiv(
className: 'flex flex-row w-full mt-3',
children: [
WDiv(
className: 'w-[172px] h-[16px]'
),
WText(
'▼',
className: 'w-[34px] text-center text-sm text-yellow-500 dark:text-yellow-400'
),
]
),
WDiv(
className: 'flex flex-col gap-[6px] w-full rounded-2xl bg-blue-600 dark:bg-blue-700 p-[12px]',
children: [
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
]
),
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
]
),
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-white dark:border-white'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
]
),
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-white dark:border-white'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
]
),
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-white dark:border-white'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-blue-50 dark:bg-gray-900 border-blue-700 dark:border-blue-800'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
]
),
WDiv(
className: 'flex flex-row gap-[6px]',
children: [
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-white dark:border-white'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-red-500 dark:bg-red-500 border-red-600 dark:border-red-600'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
WDiv(
className: 'w-[34px] h-[34px] rounded-full border-4 bg-yellow-400 dark:bg-yellow-400 border-yellow-500 dark:border-yellow-500'
),
]
),
]
),
WDiv(
className: 'flex flex-row gap-2 w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'23',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Moves',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'12',
className: 'text-lg font-bold text-yellow-600 dark:text-yellow-400'
),
WText(
'Yellow',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col items-center w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'11',
className: 'text-lg font-bold text-red-600 dark:text-red-400'
),
WText(
'Red',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
]
),
]
),
WText(
'Diagonal four from column 2 to column 5',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-blue-600 dark:bg-blue-500 py-3 flex flex-row items-center justify-center',
child: WText(
'Play game 6',
className: 'text-sm font-semibold text-white'
)
)
),
]
)
Stats
- Views
- 97
- Stars
- 0
- Revisions
- 1
- Size
- 12,414 chars
- Created
- Oct 8, 2026