Flutter Archery Scoring Card with Target Face and Arrow Groupings
A precision sport scoring card that draws a full World Archery target face out of concentric Wind circles, plots where each of the end's six arrows landed, and reads the group back as end score, arrow average and running total. Every ring, arrow mark and stat tile is plain className utilities: no chart package, no canvas, no image asset.
by Anılcan Çakır
51 views
0 stars
1 week ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col 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',
children: [
WText(
'Recurve 70m',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Outdoor qualification round',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-emerald-100 dark:bg-emerald-900 px-3 py-1',
child: WText(
'End 6 of 12',
className: 'text-[10px] font-bold tracking-wide text-emerald-700 dark:text-emerald-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'relative w-[176px] h-[176px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[176px] h-[176px] rounded-full bg-gray-50 dark:bg-gray-100 border border-gray-200 dark:border-gray-300',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[142px] h-[142px] rounded-full bg-slate-800 dark:bg-slate-900',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[108px] h-[108px] rounded-full bg-sky-500 dark:bg-sky-600',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[74px] h-[74px] rounded-full bg-rose-500 dark:bg-rose-600',
child: WDiv(
className: 'flex flex-row items-center justify-center w-[40px] h-[40px] rounded-full bg-amber-400 dark:bg-amber-500',
child: WDiv(
className: 'w-[18px] h-[18px] rounded-full border-2 border-amber-700 dark:border-amber-800'
),
),
),
),
),
),
WDiv(
className: 'absolute left-[87px] top-[78px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
WDiv(
className: 'absolute left-[77px] top-[86px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
WDiv(
className: 'absolute left-[95px] top-[74px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
WDiv(
className: 'absolute left-[74px] top-[95px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
WDiv(
className: 'absolute left-[103px] top-[100px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
WDiv(
className: 'absolute left-[81px] top-[70px] w-[10px] h-[10px] rounded-full bg-white dark:bg-gray-100 border-2 border-gray-900 dark:border-gray-800'
),
],
),
),
WText(
'THIS END',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-5'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
child: WText(
'X',
className: 'text-base font-bold text-amber-700 dark:text-amber-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
child: WText(
'10',
className: 'text-base font-bold text-amber-700 dark:text-amber-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
child: WText(
'9',
className: 'text-base font-bold text-amber-700 dark:text-amber-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
child: WText(
'9',
className: 'text-base font-bold text-amber-700 dark:text-amber-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
child: WText(
'9',
className: 'text-base font-bold text-amber-700 dark:text-amber-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[50px] h-[38px] rounded-xl bg-rose-100 dark:bg-rose-900 border border-rose-300 dark:border-rose-700',
child: WText(
'8',
className: 'text-base font-bold text-rose-700 dark:text-rose-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'END',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'55',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'of 60',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'AVG',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'9.2',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'per arrow',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'TOTAL',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'328',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'6 ends',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 rounded-2xl bg-sky-50 dark:bg-sky-950 px-3 py-2',
children: [
WIcon(
Icons.trending_up,
className: 'text-base text-sky-600 dark:text-sky-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Group tightened to 42 mm',
className: 'text-[11px] font-semibold text-sky-800 dark:text-sky-200'
),
WText(
'Centre drifting high right, hold off one click',
className: 'text-[10px] text-sky-700 dark:text-sky-300'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Score end 7',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
WDiv(
className: 'ml-2',
child: WIcon(
Icons.arrow_forward,
className: 'text-base text-white dark:text-gray-900'
)
),
],
),
),
),
],
)
Stats
- Views
- 51
- Stars
- 0
- Revisions
- 1
- Size
- 8,745 chars
- Created
- Aug 31, 2026