Flutter Typing Heatmap Card with Colour Coded QWERTY Keys

A typing analytics card that draws a real staggered QWERTY layout, tinting every key by how often it was pressed, from a cold grey Z to a hot rose E. Built with Wind utility classes over WDynamic: 26 keycaps, a space bar and a five step legend, all plain divs with no canvas and no image assets.

Anılcan Çakır by Anılcan Çakır 90 views 0 stars 3 weeks ago Rev 1
Open in Playground Fork
Flutter Typing Heatmap Card with Colour Coded QWERTY Keys 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-gray-900 dark:bg-gray-100',
          child: WIcon(
            Icons.keyboard,
            className: 'text-xl text-white dark:text-gray-900'
          ),
        ),
        WDiv(
          className: 'flex flex-col ml-3',
          children: [
            WText(
              'Typing heatmap',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Last 30 days, 412,880 keys',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center ml-4 rounded-full bg-indigo-100 dark:bg-indigo-900 px-2 py-1',
          child: WText(
            'US QWERTY',
            className: 'text-[9px] font-bold tracking-wide text-indigo-700 dark:text-indigo-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              '68 WPM',
              className: 'text-2xl font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'AVERAGE SPEED',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
          child: WText(
            '+4 vs Aug',
            className: 'text-[10px] font-bold text-emerald-700 dark:text-emerald-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-5',
      children: [
        WText(
          'KEY HEATMAP',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WText(
          'PRESS COUNT',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row gap-[3px] mt-[3px]',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'Q',
            className: 'text-[11px] font-bold text-gray-400 dark:text-gray-500'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'W',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-500 dark:bg-rose-600 border border-gray-200 dark:border-gray-700',
          child: WText(
            'E',
            className: 'text-[11px] font-bold text-white dark:text-white'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-300 dark:bg-rose-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'R',
            className: 'text-[11px] font-bold text-gray-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-500 dark:bg-rose-600 border border-gray-200 dark:border-gray-700',
          child: WText(
            'T',
            className: 'text-[11px] font-bold text-white dark:text-white'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'Y',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-amber-200 dark:bg-amber-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'U',
            className: 'text-[11px] font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-300 dark:bg-rose-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'I',
            className: 'text-[11px] font-bold text-gray-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-500 dark:bg-rose-600 border border-gray-200 dark:border-gray-700',
          child: WText(
            'O',
            className: 'text-[11px] font-bold text-white dark:text-white'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'P',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row ml-[16px] gap-[3px] mt-[3px]',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-500 dark:bg-rose-600 border border-gray-200 dark:border-gray-700',
          child: WText(
            'A',
            className: 'text-[11px] font-bold text-white dark:text-white'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-300 dark:bg-rose-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'S',
            className: 'text-[11px] font-bold text-gray-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-amber-200 dark:bg-amber-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'D',
            className: 'text-[11px] font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'F',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'G',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-300 dark:bg-rose-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'H',
            className: 'text-[11px] font-bold text-gray-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'J',
            className: 'text-[11px] font-bold text-gray-400 dark:text-gray-500'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'K',
            className: 'text-[11px] font-bold text-gray-400 dark:text-gray-500'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-amber-200 dark:bg-amber-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'L',
            className: 'text-[11px] font-bold text-gray-900 dark:text-amber-100'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row ml-[46px] gap-[3px] mt-[3px]',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'Z',
            className: 'text-[11px] font-bold text-gray-400 dark:text-gray-500'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'X',
            className: 'text-[11px] font-bold text-gray-400 dark:text-gray-500'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-amber-200 dark:bg-amber-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'C',
            className: 'text-[11px] font-bold text-gray-900 dark:text-amber-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'V',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'B',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-rose-300 dark:bg-rose-800 border border-gray-200 dark:border-gray-700',
          child: WText(
            'N',
            className: 'text-[11px] font-bold text-gray-900 dark:text-rose-100'
          )
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[27px] h-[30px] rounded-md bg-indigo-100 dark:bg-indigo-900 border border-gray-200 dark:border-gray-700',
          child: WText(
            'M',
            className: 'text-[11px] font-bold text-gray-700 dark:text-indigo-200'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center w-full mt-[3px]',
      child: WDiv(
        className: 'flex flex-row items-center justify-center w-[168px] h-[24px] rounded-md bg-rose-500 dark:bg-rose-600 border border-gray-200 dark:border-gray-700',
        child: WText(
          'space',
          className: 'text-[10px] font-bold text-white dark:text-white'
        )
      ),
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-4',
      children: [
        WText(
          'LESS',
          className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
        ),
        WDiv(
          className: 'w-[18px] h-[10px] rounded-sm bg-gray-100 dark:bg-gray-800 ml-2'
        ),
        WDiv(
          className: 'w-[18px] h-[10px] rounded-sm bg-indigo-100 dark:bg-indigo-900 ml-1'
        ),
        WDiv(
          className: 'w-[18px] h-[10px] rounded-sm bg-amber-200 dark:bg-amber-800 ml-1'
        ),
        WDiv(
          className: 'w-[18px] h-[10px] rounded-sm bg-rose-300 dark:bg-rose-800 ml-1'
        ),
        WDiv(
          className: 'w-[18px] h-[10px] rounded-sm bg-rose-500 dark:bg-rose-600 ml-1'
        ),
        WText(
          'MORE',
          className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 ml-2'
        ),
      ],
    ),
    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(
              '41.2k',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'E KEY',
              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(
              '7.4%',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'BACKSPACE',
              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(
              '98.1%',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'ACCURACY',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
      ],
    ),
    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(
          'Open the full report',
          className: 'text-sm font-semibold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)
Stats
Views
90
Stars
0
Revisions
1
Size
14,411 chars
Created
Sep 16, 2026