Flutter Starting XI Lineup Card with Pitch and Player Chips

A matchday team sheet that actually looks like a pitch. Halfway line, penalty boxes and centre spot are drawn markings, and all eleven players are chips positioned at fixed coordinates, so any formation is a coordinate table away. Bench pills and a captain callout finish it, all in Wind utility classes with full dark mode pairs.

Anılcan Çakır by Anılcan Çakır 4 views 0 stars 3 hours ago Rev 1
Open in Playground Fork
Flutter Starting XI Lineup Card with Pitch and Player Chips preview
main.dart 
WDiv(
  className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-10 h-10 rounded-2xl bg-emerald-50 dark:bg-emerald-950',
              child: WIcon(
                Icons.flag,
                className: 'text-xl text-emerald-600 dark:text-emerald-400'
              ),
            ),
            WDiv(
              className: 'flex flex-col ml-3',
              children: [
                WText(
                  'Northgate United',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Matchday 8, home to Ashfield',
                  className: 'text-[11px] text-gray-500 dark:text-gray-400'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
          child: WText(
            '4-3-3',
            className: 'text-[9px] font-bold tracking-wide text-emerald-700 dark:text-emerald-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WText(
          'STARTING XI',
          className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
        ),
        WText(
          'KICK OFF 15:00',
          className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'relative w-[300px] h-[270px] rounded-2xl bg-emerald-600 dark:bg-emerald-900 mt-2',
      children: [
        WDiv(
          className: 'absolute left-[0px] top-[134px] w-[300px] h-[2px] bg-white/40 dark:bg-white/30'
        ),
        WDiv(
          className: 'absolute left-[146px] top-[130px] w-[8px] h-[8px] rounded-full bg-white/50 dark:bg-white/40'
        ),
        WDiv(
          className: 'absolute left-[75px] top-[226px] w-[150px] h-[44px] rounded-t-sm border-t-2 border-l-2 border-r-2 border-white/40 dark:border-white/30'
        ),
        WDiv(
          className: 'absolute left-[75px] top-[0px] w-[150px] h-[44px] rounded-b-sm border-b-2 border-l-2 border-r-2 border-white/40 dark:border-white/30'
        ),
        WDiv(
          className: 'absolute left-[124px] top-[223px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '1',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Varga',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[18px] top-[175px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '2',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Adeyemi',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[88px] top-[175px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '5',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Haas',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[160px] top-[175px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '4',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Mbeki',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[230px] top-[175px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '3',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Lindqvist',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[46px] top-[110px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '8',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Rocha',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[124px] top-[142px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '6',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Ferrier',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[202px] top-[110px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '14',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Sato',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[34px] top-[51px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '11',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Traore',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[124px] top-[36px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-amber-300 dark:bg-amber-400',
              child: WText(
                '9',
                className: 'text-[11px] font-bold text-amber-900 dark:text-amber-950'
              ),
            ),
            WText(
              'Okafor',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[214px] top-[51px] flex flex-col items-center w-[52px] h-[42px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-[26px] h-[26px] rounded-full bg-white dark:bg-gray-900',
              child: WText(
                '7',
                className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
              ),
            ),
            WText(
              'Kaneko',
              className: 'text-[9px] font-bold text-white dark:text-gray-200'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-4',
      children: [
        WDiv(
          className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1',
          child: WText(
            '12 Boateng',
            className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1 ml-2',
          child: WText(
            '18 Crncevic',
            className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1 ml-2',
          child: WText(
            '21 Osei',
            className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1 ml-2',
          child: WText(
            '+6',
            className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-3 rounded-2xl bg-amber-50 dark:bg-amber-950 px-3 py-2',
      children: [
        WIcon(
          Icons.star,
          className: 'text-base text-amber-500 dark:text-amber-400'
        ),
        WDiv(
          className: 'ml-2',
          child: WText(
            'Okafor captains for the first time.',
            className: 'text-[11px] font-medium text-amber-800 dark:text-amber-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 px-4 py-3',
        child: WText(
          'Open the full team sheet',
          className: 'text-sm font-bold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)
Stats
Views
4
Stars
0
Revisions
1
Size
11,264 chars
Created
Sep 14, 2026