Flutter Word Game Card with Letter Tile Rack and Premium Squares

A word duel card showing a live board row with triple word, double word and letter premium squares, a scoring play sitting on the pink double word, and a seven tile rack where every tile carries its own point value. Built with Wind utility classes over WDynamic, tiles and squares are plain divs, so there is no canvas and no image assets.

Anılcan Çakır by Anılcan Çakır 93 views 0 stars 3 weeks ago Rev 1
Open in Playground Fork
Flutter Word Game Card with Letter Tile Rack and Premium Squares 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 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-[38px] h-[38px] rounded-2xl bg-amber-500 dark:bg-amber-600',
          child: WIcon(
            Icons.emoji_events,
            className: 'text-xl text-white dark:text-white'
          ),
        ),
        WDiv(
          className: 'flex flex-col ml-3',
          children: [
            WText(
              'Word duel',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Round 7, Mira to follow',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center ml-5 rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
          child: WText(
            'YOUR TURN',
            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: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              '+48',
              className: 'text-2xl font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'THIS WORD SCORES',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center rounded-full bg-indigo-100 dark:bg-indigo-900 px-2 py-1',
          child: WText(
            '31 ahead',
            className: 'text-[10px] font-bold text-indigo-700 dark:text-indigo-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-5',
      children: [
        WText(
          'BOARD ROW 8',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WText(
          'TILE BAG 34',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row gap-[2px] w-full mt-2',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-rose-500 dark:bg-rose-600',
          child: WText(
            'TW',
            className: 'text-[8px] font-bold tracking-wide text-white dark:text-white'
          )
        ),
        WDiv(
          className: 'w-[25px] h-[34px] rounded-[3px] bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-rose-200 dark:bg-rose-900',
          child: WText(
            'DW',
            className: 'text-[8px] font-bold tracking-wide text-rose-800 dark:text-rose-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-sky-200 dark:bg-sky-900',
          child: WText(
            'DL',
            className: 'text-[8px] font-bold tracking-wide text-sky-800 dark:text-sky-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'Q',
            className: 'text-base font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'U',
            className: 'text-base font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'A',
            className: 'text-base font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'R',
            className: 'text-base font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'T',
            className: 'text-base font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-rose-200 dark:bg-rose-900 border border-rose-500 dark:border-rose-400',
          child: WText(
            'Z',
            className: 'text-base font-bold text-rose-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[25px] h-[34px] rounded-[3px] bg-blue-400 dark:bg-blue-700',
          child: WText(
            'TL',
            className: 'text-[8px] font-bold tracking-wide text-white dark:text-white'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-3',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'w-[12px] h-[12px] rounded-[3px] bg-rose-500 dark:bg-rose-600'
            ),
            WText(
              'TW',
              className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400 ml-1'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center ml-4',
          children: [
            WDiv(
              className: 'w-[12px] h-[12px] rounded-[3px] bg-rose-200 dark:bg-rose-900'
            ),
            WText(
              'DW',
              className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400 ml-1'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center ml-4',
          children: [
            WDiv(
              className: 'w-[12px] h-[12px] rounded-[3px] bg-blue-400 dark:bg-blue-700'
            ),
            WText(
              'TL',
              className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400 ml-1'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center ml-4',
          children: [
            WDiv(
              className: 'w-[12px] h-[12px] rounded-[3px] bg-sky-200 dark:bg-sky-900'
            ),
            WText(
              'DL',
              className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400 ml-1'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-5',
      children: [
        WText(
          'YOUR RACK',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WText(
          'DRAG TO PLAY',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center gap-[4px] w-full mt-2',
      children: [
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'E',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '1',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'N',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '1',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'D',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '2',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'I',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '1',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'O',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '1',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          children: [
            WText(
              'S',
              className: 'text-lg font-bold text-gray-900 dark:text-amber-100 mb-1'
            ),
            WText(
              '1',
              className: 'text-[9px] font-bold text-gray-500 dark:text-amber-300 mb-2'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-center w-[34px] h-[38px] rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700',
          child: WText(
            'blank',
            className: 'text-[8px] font-bold tracking-wide text-amber-600 dark:text-amber-400 mb-3'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 py-3',
          children: [
            WText(
              '214',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'YOU',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 py-3',
          children: [
            WText(
              '183',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'MIRA',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 py-3',
          children: [
            WText(
              '62',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'BEST',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-4',
      children: [
        WIcon(
          Icons.bolt,
          className: 'text-base text-indigo-500 dark:text-indigo-400'
        ),
        WText(
          'The Z lands on the double word square.',
          className: 'text-[11px] text-gray-600 dark:text-gray-300 ml-2'
        ),
      ],
    ),
    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: WText(
          'Play QUARTZ for 48',
          className: 'text-sm font-semibold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)
Stats
Views
93
Stars
0
Revisions
1
Size
13,534 chars
Created
Sep 16, 2026