Flutter Beat Sequencer Card with 16 Step Track Grid

A drum machine pattern grid where instrument tracks run down the left and 16 steps run across the top, so every cell is a step you can read at a glance. Six tracks, downbeat markers on 1, 5, 9 and 13, and a transport button, all built from fixed-size Wind divs.
by Anılcan Çakır 41 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Beat Sequencer Card with 16 Step Track Grid preview
main.dart
WDiv(
  className: 'flex flex-col w-full max-w-sm rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-lg',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              'Beat Sequencer',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Pattern A, 128 BPM',
              className: 'text-xs text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
        WButton(
          className: 'flex flex-row items-center justify-center w-9 h-9 rounded-full bg-indigo-600 dark:bg-indigo-500',
          child: WIcon(
            Icons.play_arrow,
            className: 'text-lg text-white'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-4',
      children: [
        WDiv(
          className: 'w-[36px]'
        ),
        WDiv(
          className: 'flex flex-row items-center justify-start w-[68px]',
          child: WText(
            '1',
            className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-start w-[68px]',
          child: WText(
            '5',
            className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-start w-[68px]',
          child: WText(
            '9',
            className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-start w-[68px]',
          child: WText(
            '13',
            className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Kick',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Snare',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-amber-500 dark:bg-amber-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-amber-500 dark:bg-amber-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-amber-500 dark:bg-amber-400'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Hat',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-sky-500 dark:bg-sky-400'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Clap',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-violet-500 dark:bg-violet-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-violet-500 dark:bg-violet-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Tom',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full gap-2 mt-1',
      children: [
        WDiv(
          className: 'w-[36px]',
          child: WText(
            'Perc',
            className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-slate-500 dark:bg-slate-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-slate-500 dark:bg-slate-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-slate-500 dark:bg-slate-400'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
            WDiv(
              className: 'w-[14px] h-[14px] rounded-sm bg-gray-200 dark:bg-gray-800'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'w-full border-t border-gray-200 dark:border-gray-800 mt-4'
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-3',
      children: [
        WText(
          '16 steps, 6 tracks',
          className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Swing 12%',
          className: 'text-[10px] font-semibold text-indigo-600 dark:text-indigo-400'
        ),
      ],
    ),
  ],
)
Stats
Views: 41
Stars: 0
Revisions: 1
Size: 18,470 chars
Created: Aug 10, 2026