Flutter Golf Scorecard Card with Birdie Circles and Bogey Squares
A back nine scorecard card for Flutter golf apps, built with Wind utility classes: hole and par rows, your strokes marked the way golfers read them (circles under par, a double ring for the eagle, squares over par), a round total against par, and a post-to-handicap button. Pure className styling with dark-mode pairs, ready to drop into a round tracker.
by Anılcan Çakır
117 views
0 stars
3 weeks ago
Rev 1
main.dart
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'
)
)
),
],
)
Stats
- Views
- 117
- Stars
- 0
- Revisions
- 1
- Size
- 13,333 chars
- Created
- Oct 6, 2026