Flutter Punch Card Grid with Dot Size Encoded Busy Hours

A weekday by hour punch card where the dot diameter carries the value instead of a colour ramp, so the evening ridge and the weekend midday bulge read at a glance. Forty two sized dots placed on a fixed pixel lattice, pure Wind className strings.

Anılcan Çakır by Anılcan Çakır 9 views 0 stars 1 day ago Rev 1
Open in Playground Fork
Flutter Punch Card Grid with Dot Size Encoded Busy Hours preview
main.dart 
WDiv(
  className: 'flex flex-col w-[340px] p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800',
  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-xl bg-indigo-500 dark:bg-indigo-400',
              child: WIcon(
                Icons.schedule,
                className: 'text-xl text-white dark:text-gray-900'
              ),
            ),
            WDiv(
              className: 'flex flex-col ml-3',
              children: [
                WText(
                  'Riverside Gym',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Main floor, last 8 weeks',
                  className: 'text-[11px] text-gray-500 dark:text-gray-400'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'rounded-full bg-amber-100 dark:bg-amber-900 px-2 py-1',
          child: WText(
            'PEAK THU 6PM',
            className: 'text-[10px] font-bold tracking-wide text-amber-700 dark:text-amber-200'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-5',
      children: [
        WText(
          'BUSY HOURS',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WText(
          'DOT SIZE IS VISITS',
          className: 'text-[9px] font-bold tracking-widest text-indigo-500 dark:text-indigo-400'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-3',
      children: [
        WDiv(
          className: 'w-[34px] h-[12px]'
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '7a',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '10a',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '12p',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '3p',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '6p',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center w-[40px]',
          child: WText(
            '9p',
            className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-start w-full mt-1',
      children: [
        WDiv(
          className: 'flex flex-col w-[34px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'MON',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'TUE',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'WED',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'THU',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'FRI',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'SAT',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
            WDiv(
              className: 'flex flex-row items-center justify-end w-[34px] h-[32px] pr-2',
              child: WText(
                'SUN',
                className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
              ),
            ),
          ],
        ),
        WDiv(
          className: 'relative w-[240px] h-[224px]',
          children: [
            WDiv(
              className: 'absolute left-[12px] top-[8px] w-[15px] h-[15px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[55px] top-[11px] w-[9px] h-[9px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[94px] top-[10px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[134px] top-[10px] w-[11px] h-[11px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[168px] top-[4px] w-[24px] h-[24px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[213px] top-[9px] w-[14px] h-[14px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[13px] top-[41px] w-[14px] h-[14px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[56px] top-[44px] w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[94px] top-[42px] w-[11px] h-[11px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[134px] top-[42px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[168px] top-[36px] w-[23px] h-[23px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[213px] top-[41px] w-[13px] h-[13px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[11px] top-[71px] w-[17px] h-[17px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[55px] top-[75px] w-[9px] h-[9px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[94px] top-[74px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[134px] top-[74px] w-[11px] h-[11px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[169px] top-[69px] w-[21px] h-[21px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[214px] top-[74px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[13px] top-[105px] w-[13px] h-[13px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[56px] top-[108px] w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[94px] top-[106px] w-[11px] h-[11px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[134px] top-[106px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[167px] top-[99px] w-[25px] h-[25px] rounded-full bg-amber-500 dark:bg-amber-400'
            ),
            WDiv(
              className: 'absolute left-[212px] top-[104px] w-[15px] h-[15px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[12px] top-[136px] w-[15px] h-[15px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[55px] top-[139px] w-[9px] h-[9px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[93px] top-[137px] w-[13px] h-[13px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[133px] top-[137px] w-[14px] h-[14px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[170px] top-[134px] w-[19px] h-[19px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[216px] top-[140px] w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[14px] top-[170px] w-[11px] h-[11px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[51px] top-[167px] w-[18px] h-[18px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[89px] top-[165px] w-[21px] h-[21px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[131px] top-[167px] w-[17px] h-[17px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[175px] top-[171px] w-[9px] h-[9px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[217px] top-[173px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[16px] top-[204px] w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[52px] top-[200px] w-[15px] h-[15px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[90px] top-[198px] w-[20px] h-[20px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[133px] top-[201px] w-[14px] h-[14px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[176px] top-[204px] w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
            WDiv(
              className: 'absolute left-[217px] top-[205px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-4 p-3 rounded-xl bg-gray-50 dark:bg-gray-800',
      children: [
        WDiv(
          className: 'w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
        ),
        WDiv(
          className: 'w-[14px] h-[14px] rounded-full ml-2 bg-indigo-500 dark:bg-indigo-400'
        ),
        WDiv(
          className: 'w-[24px] h-[24px] rounded-full ml-2 bg-indigo-500 dark:bg-indigo-400'
        ),
        WDiv(
          className: 'ml-3',
          child: WText(
            '40 to 210 check ins per hour',
            className: 'text-[11px] font-medium text-gray-600 dark:text-gray-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'w-full mt-4',
      child: WButton(
        className: 'flex flex-row items-center justify-center w-full py-3 rounded-xl bg-gray-900 dark:bg-white',
        child: WText(
          'Book a quiet slot',
          className: 'text-sm font-bold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)
Stats
Views
9
Stars
0
Revisions
1
Size
13,405 chars
Created
Sep 13, 2026