# 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`, `WText`, `WIcon`, `WButton`

```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'
              )
            ),
          ],
        ),
      ),
    ),
  ],
)
```