All snippets
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.
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: [
WText(
'♠',
className: 'w-10 h-10 rounded-xl bg-emerald-700 dark:bg-emerald-600 text-center text-2xl text-white pt-[3px]'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Hand odds',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Heads-up, No-Limit Hold’em',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-emerald-50 dark:bg-emerald-900 px-3 py-1',
child: WText(
'Flop',
className: 'text-xs font-bold text-emerald-700 dark:text-emerald-300'
)
),
]
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-4',
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 gap-1',
children: [
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'A',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'♠',
className: 'text-base text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'K',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'♠',
className: 'text-base text-gray-900 dark:text-white'
)
]
)
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'You',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Nut flush draw',
className: 'text-xs text-gray-500 dark:text-gray-400'
)
]
),
]
),
WText(
'51.7%',
className: 'text-xl font-bold text-emerald-600 dark:text-emerald-400'
),
]
),
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 gap-1',
children: [
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'Q',
className: 'text-base font-bold text-rose-600 dark:text-rose-400'
),
WText(
'♦',
className: 'text-base text-rose-600 dark:text-rose-400'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'J',
className: 'text-base font-bold text-rose-600 dark:text-rose-400'
),
WText(
'♦',
className: 'text-base text-rose-600 dark:text-rose-400'
)
]
)
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Seat 4',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Top pair, jack kicker',
className: 'text-xs text-gray-500 dark:text-gray-400'
)
]
),
]
),
WText(
'48.3%',
className: 'text-xl font-bold text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-[10px] mt-4',
children: [
WDiv(
className: 'w-[154px] h-[10px] rounded-l-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[10px] bg-white dark:bg-gray-900'
),
WDiv(
className: 'w-[142px] h-[10px] rounded-r-full bg-gray-300 dark:bg-gray-600'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-1',
children: [
WText(
'Win 51.7%',
className: 'text-[11px] font-semibold text-emerald-600 dark:text-emerald-400'
),
WText(
'Tie 0.0%',
className: 'text-[11px] text-gray-400 dark:text-gray-500'
),
WText(
'Lose 48.3%',
className: 'text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col items-center w-full rounded-2xl bg-emerald-700 dark:bg-emerald-900 p-3 mt-4',
children: [
WText(
'BOARD',
className: 'text-[10px] font-bold tracking-wide text-emerald-100 dark:text-emerald-300'
),
WDiv(
className: 'flex flex-row gap-2 mt-2',
children: [
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'Q',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'♠',
className: 'text-base text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'7',
className: 'text-base font-bold text-rose-600 dark:text-rose-400'
),
WText(
'♦',
className: 'text-base text-rose-600 dark:text-rose-400'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
children: [
WText(
'2',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'♠',
className: 'text-base text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-gray-100 dark:bg-gray-800 border border-dashed border-gray-300 dark:border-gray-600',
child: WText(
'TURN',
className: 'text-[9px] font-semibold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'flex flex-col items-center justify-center w-[40px] h-[54px] rounded-lg bg-gray-100 dark:bg-gray-800 border border-dashed border-gray-300 dark:border-gray-600',
child: WText(
'RIVER',
className: 'text-[9px] font-semibold text-gray-400 dark:text-gray-500'
)
)
]
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'Your outs',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'15 of 45 cards',
className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-full mt-2',
children: [
WText(
'Flush',
className: 'w-[44px] text-[11px] text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'3♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'4♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'5♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'6♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'7♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'8♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'9♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'10♠',
className: 'w-[28px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'J♠',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
)
]
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-full mt-1',
children: [
WText(
'Pair',
className: 'w-[44px] text-[11px] text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'K♥',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-rose-600 dark:text-rose-400'
),
WText(
'K♦',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-rose-600 dark:text-rose-400'
),
WText(
'K♣',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
),
WText(
'A♥',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-rose-600 dark:text-rose-400'
),
WText(
'A♦',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-rose-600 dark:text-rose-400'
),
WText(
'A♣',
className: 'w-[24px] h-[22px] rounded-md bg-gray-100 dark:bg-gray-800 text-center text-[11px] font-semibold pt-[3px] text-gray-900 dark:text-white'
)
]
),
]
),
WText(
'Exact equity over all 990 turn and river run-outs.',
className: 'text-xs text-gray-400 dark:text-gray-500 mt-3'
),
],
)
363 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 Speedcube Timer Card with Unfolded Scramble Net
A Flutter speedcube timer card for puzzle and hobby apps: an unfolded cube net showing the exact state of a 20-move scramble in WCA notation, the last five solves with dropped times, best, average-of-five and solve count tiles and a start-inspection action. Built with wind_kit.
