Flutter Poker Hand Odds Card with Board Cards and Equity Bar
A poker hand odds card built with Wind: heads-up hole cards with suit glyphs, a felt-green flop with empty turn and river slots, a split win and lose equity bar, and every out laid out as mini cards. The numbers are exact, enumerated over all 990 turn and river run-outs. Pure Tailwind-style className utilities, ready for poker trainers, card game and odds calculator apps.
by Anılcan Çakır
104 views
0 stars
3 weeks 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: [
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'
),
],
)
Stats
- Views
- 104
- Stars
- 0
- Revisions
- 1
- Size
- 14,051 chars
- Created
- Oct 4, 2026