Flutter Domino Score Card with Pip Tile Rack
A game night score card for board game and party apps: a rack of real domino tiles with dice style pip faces and a bisecting line, the playable double highlighted, a draw tile for the boneyard, a head to head score strip with a race to 150 bar and round stats. Built with Wind utility classes and absolute pixel positioned pips.
by Anılcan Çakır
11 views
0 stars
6 days ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col items-start 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 items-start',
children: [
WText(
'GAME NIGHT',
className: 'text-[11px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
),
WText(
'Round 4 of 7',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-indigo-100 dark:bg-indigo-900 px-2 py-1',
children: [
WIcon(
Icons.bolt,
className: 'text-indigo-600 dark:text-indigo-300 text-xs'
),
WText(
'Your turn',
className: 'text-[10px] font-bold text-indigo-700 dark:text-indigo-200 ml-1'
),
],
),
],
),
WText(
'YOUR HAND',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-4'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 mt-2',
children: [
WDiv(
className: 'flex flex-col items-center w-[48px] h-[100px] rounded-lg bg-white dark:bg-gray-100 border-2 border-gray-200 dark:border-gray-300',
children: [
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[5px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[5px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
WDiv(
className: 'w-[36px] h-[2px] rounded-full bg-gray-300 dark:bg-gray-400'
),
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[18px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
],
),
WDiv(
className: 'flex flex-col items-center w-[48px] h-[100px] rounded-lg bg-white dark:bg-gray-100 border-2 border-indigo-500 dark:border-indigo-400',
children: [
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[32px] top-[6px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[18px] top-[19px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[5px] top-[32px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
]
),
WDiv(
className: 'w-[36px] h-[2px] rounded-full bg-indigo-300 dark:bg-indigo-400'
),
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[32px] top-[6px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[18px] top-[19px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[5px] top-[32px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-indigo-600 dark:bg-indigo-500'
),
]
),
],
),
WDiv(
className: 'flex flex-col items-center w-[48px] h-[100px] rounded-lg bg-white dark:bg-gray-100 border-2 border-gray-200 dark:border-gray-300',
children: [
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[5px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
WDiv(
className: 'w-[36px] h-[2px] rounded-full bg-gray-300 dark:bg-gray-400'
),
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[18px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
],
),
WDiv(
className: 'flex flex-col items-center w-[48px] h-[100px] rounded-lg bg-white dark:bg-gray-100 border-2 border-gray-200 dark:border-gray-300',
children: [
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
WDiv(
className: 'w-[36px] h-[2px] rounded-full bg-gray-300 dark:bg-gray-400'
),
WDiv(
className: 'relative w-[44px] h-[46px]',
children: [
WDiv(
className: 'absolute left-[5px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[6px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[5px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[19px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[5px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[32px] top-[32px] w-[7px] h-[7px] rounded-full bg-gray-800 dark:bg-gray-900'
),
]
),
],
),
WButton(
className: 'flex flex-row items-center justify-center w-[48px] h-[100px] rounded-lg bg-gray-100 dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600',
child: WIcon(
Icons.add,
className: 'text-gray-400 dark:text-gray-400 text-xl'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-900 dark:bg-white px-4 py-3 mt-3',
children: [
WDiv(
className: 'flex flex-col items-start',
children: [
WText(
'YOU',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'87',
className: 'text-2xl font-bold text-white dark:text-gray-900'
),
],
),
WDiv(
className: 'flex flex-col items-center',
children: [
WText(
'FIRST TO',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'150',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'MARCO',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'74',
className: 'text-2xl font-bold text-white dark:text-gray-900'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-gray-100 dark:bg-gray-800 mt-3',
child: WDiv(
className: 'h-2 w-[196px] rounded-full bg-indigo-600 dark:bg-indigo-400'
),
),
WDiv(
className: 'flex flex-row items-start w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3',
children: [
WText(
'BONEYARD',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'9',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'tiles left',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'DOUBLES',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'2',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'in hand',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'BEST ROUND',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'32',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'points',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 px-4 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.play_arrow,
className: 'text-white dark:text-white text-base'
),
WText(
'Play double five',
className: 'text-sm font-bold text-white dark:text-white ml-2'
),
],
),
),
),
],
)
Stats
- Views
- 11
- Stars
- 0
- Revisions
- 1
- Size
- 13,368 chars
- Created
- Aug 19, 2026