All snippets
Flutter Archery Scoring Card with Target Face and Arrow Groupings
A Flutter archery scoring card for sport apps: a full World Archery target face drawn from concentric circles, the six arrows of the end plotted where they landed, with end score, arrow average and running total. Plain wind_kit className utilities, no chart package, canvas or image asset.
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'
)
),
],
),
),
),
],
)
225 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 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.
