All snippets
Flutter Domino Score Card with Pip Tile Rack
A Flutter domino score card for board game and party apps: a tile rack with pip faces, the playable double highlighted, a boneyard draw tile, a head-to-head score strip with a race-to-150 bar and round stats. Absolutely positioned pips with wind_kit utility classes.
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'
),
],
),
),
),
],
)
345 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.
