All snippets
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.
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-emerald-600 dark:bg-emerald-500',
child: WIcon(
Icons.flag,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Harbour Links',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Back nine, blue tees',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-rose-50 dark:bg-rose-900/40 px-3 py-1',
child: WText(
'-2 IN',
className: 'text-xs font-bold text-rose-600 dark:text-rose-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-end gap-2',
children: [
WText(
'71',
className: 'text-5xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-col pb-2',
children: [
WText(
'strokes',
className: 'text-xs font-medium text-gray-500 dark:text-gray-400'
),
WText(
'OUT 37 / IN 34',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
]
),
]
),
WDiv(
className: 'flex flex-col items-end pb-2',
children: [
WText(
'-1',
className: 'text-2xl font-extrabold text-rose-600 dark:text-rose-400'
),
WText(
'to par 72',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-4 rounded-2xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-100 dark:border-emerald-900 px-[4px] py-3',
children: [
WDiv(
className: 'flex flex-row items-center w-full pb-1',
children: [
WText(
'HOLE',
className: 'w-[28px] text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'10',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'11',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'12',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'13',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'14',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'15',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'16',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'17',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'18',
className: 'w-[25px] text-center text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'IN',
className: 'w-[30px] text-center text-[11px] font-bold text-gray-700 dark:text-gray-200'
)
]
),
WDiv(
className: 'flex flex-row items-center w-full pb-2 border-b border-gray-200 dark:border-gray-700',
children: [
WText(
'PAR',
className: 'w-[28px] text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'4',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'4',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'3',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'4',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'5',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'4',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'4',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'3',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'5',
className: 'w-[25px] text-center text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'36',
className: 'w-[30px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-200'
)
]
),
WDiv(
className: 'flex flex-row items-center w-full pt-2',
children: [
WText(
'YOU',
className: 'w-[28px] text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WText(
'4',
className: 'text-[13px] font-semibold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[22px] h-[22px] rounded-full border border-rose-500 dark:border-rose-400',
child: WText(
'3',
className: 'text-[13px] font-bold text-rose-600 dark:text-rose-400'
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WText(
'3',
className: 'text-[13px] font-semibold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[22px] h-[22px] rounded-[3px] border border-slate-700 dark:border-slate-300',
child: WText(
'5',
className: 'text-[13px] font-bold text-slate-800 dark:text-slate-100'
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[25px] rounded-full border border-rose-500 dark:border-rose-400',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[19px] h-[19px] rounded-full border border-rose-500 dark:border-rose-400',
child: WText(
'3',
className: 'text-[13px] font-bold text-rose-600 dark:text-rose-400'
)
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WText(
'4',
className: 'text-[13px] font-semibold text-gray-900 dark:text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[25px] rounded-[3px] border border-slate-700 dark:border-slate-300',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[19px] h-[19px] rounded-[2px] border border-slate-700 dark:border-slate-300',
child: WText(
'6',
className: 'text-[13px] font-bold text-slate-800 dark:text-slate-100'
)
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[22px] h-[22px] rounded-full border border-rose-500 dark:border-rose-400',
child: WText(
'2',
className: 'text-[13px] font-bold text-rose-600 dark:text-rose-400'
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[25px] h-[30px]',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[22px] h-[22px] rounded-full border border-rose-500 dark:border-rose-400',
child: WText(
'4',
className: 'text-[13px] font-bold text-rose-600 dark:text-rose-400'
)
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[30px] h-[30px]',
child: WText(
'34',
className: 'text-base font-extrabold text-rose-600 dark:text-rose-400'
)
)
]
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[16px] h-[16px] rounded-full border border-rose-500 dark:border-rose-400',
child: WDiv(
className: 'w-[10px] h-[10px] rounded-full border border-rose-500 dark:border-rose-400'
)
),
WText(
'Eagle',
className: 'text-[11px] text-gray-600 dark:text-gray-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-[14px] h-[14px] rounded-full border border-rose-500 dark:border-rose-400'
),
WText(
'Birdie',
className: 'text-[11px] text-gray-600 dark:text-gray-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-[14px] h-[14px] rounded-[2px] border border-slate-700 dark:border-slate-300'
),
WText(
'Bogey',
className: 'text-[11px] text-gray-600 dark:text-gray-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[16px] h-[16px] rounded-[2px] border border-slate-700 dark:border-slate-300',
child: WDiv(
className: 'w-[10px] h-[10px] rounded-[1px] border border-slate-700 dark:border-slate-300'
)
),
WText(
'Double',
className: 'text-[11px] text-gray-600 dark:text-gray-300'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-emerald-600 dark:bg-emerald-500 py-3 flex flex-row items-center justify-center',
child: WText(
'Post round to handicap',
className: 'text-sm font-semibold text-white'
)
)
),
],
)
357 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 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.
-
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.
