Flutter Focus Timer Card with Radial Minute Dial

A deep-work session card that turns the remaining minutes into a ring of 25 dots, one per minute, with the countdown in the middle. Round pills track the pomodoro cycle and two tiles summarise focused time and streak. Built with Wind className utilities, so the whole dial is plain divs.

Anılcan Çakır by Anılcan Çakır 34 views 0 stars 1 week ago Rev 1
Open in Playground Fork
Flutter Focus Timer Card with Radial Minute Dial preview
main.dart 
WDiv(
  className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-6',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WText(
          'FOCUS SESSION',
          className: 'text-[10px] font-bold tracking-wide text-indigo-500 dark:text-indigo-400'
        ),
        WDiv(
          className: 'flex flex-row items-center rounded-full bg-indigo-50 dark:bg-indigo-500/20 px-3 py-1',
          children: [
            WIcon(
              Icons.bolt,
              className: 'text-sm text-indigo-500 dark:text-indigo-400'
            ),
            WDiv(
              className: 'ml-1',
              child: WText(
                'Deep work',
                className: 'text-[11px] font-semibold text-indigo-600 dark:text-indigo-300'
              ),
            ),
          ],
        ),
      ],
    ),
    WText(
      'Write the launch announcement',
      className: 'text-lg font-semibold text-gray-900 dark:text-white w-full mt-1'
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center w-full mt-3',
      child: WDiv(
        className: 'relative w-[184px] h-[184px]',
        children: [
          WDiv(
            className: 'absolute left-[86px] top-[8px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[105px] top-[10px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[124px] top-[18px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[139px] top-[29px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[152px] top-[44px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[160px] top-[62px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[164px] top-[81px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[163px] top-[101px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[157px] top-[119px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[146px] top-[136px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[132px] top-[149px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[115px] top-[159px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[96px] top-[163px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[76px] top-[163px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[57px] top-[159px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[40px] top-[149px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[26px] top-[136px] w-[12px] h-[12px] rounded-full bg-indigo-500 dark:bg-indigo-400'
          ),
          WDiv(
            className: 'absolute left-[13px] top-[117px] w-[16px] h-[16px] rounded-full bg-indigo-600 dark:bg-indigo-300'
          ),
          WDiv(
            className: 'absolute left-[9px] top-[101px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[8px] top-[81px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[12px] top-[62px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[20px] top-[44px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[33px] top-[29px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[48px] top-[18px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[67px] top-[10px] w-[12px] h-[12px] rounded-full bg-gray-200 dark:bg-gray-700'
          ),
          WDiv(
            className: 'absolute left-[32px] top-[64px] flex flex-col items-center w-[120px]',
            children: [
              WText(
                '07:18',
                className: 'text-3xl font-bold text-gray-900 dark:text-white'
              ),
              WText(
                'minutes left',
                className: 'text-[11px] text-gray-500 dark:text-gray-400 mt-1'
              ),
            ],
          ),
        ],
      ),
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center w-full mt-5',
      children: [
        WDiv(
          className: 'w-[46px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
        ),
        WDiv(
          className: 'w-[46px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400 ml-2'
        ),
        WDiv(
          className: 'w-[46px] h-[6px] rounded-full bg-indigo-300 dark:bg-indigo-600 ml-2'
        ),
        WDiv(
          className: 'w-[46px] h-[6px] rounded-full bg-gray-200 dark:bg-gray-700 ml-2'
        ),
        WDiv(
          className: 'ml-3',
          child: WText(
            'Round 3 of 4',
            className: 'text-[11px] font-medium text-gray-500 dark:text-gray-400'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-start w-full mt-5',
      children: [
        WDiv(
          className: 'flex flex-col w-[158px] rounded-2xl bg-gray-50 dark:bg-gray-800 p-3',
          children: [
            WText(
              'Focused today',
              className: 'text-[10px] font-semibold tracking-wide text-gray-500 dark:text-gray-400'
            ),
            WText(
              '2h 15m',
              className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col w-[158px] rounded-2xl bg-gray-50 dark:bg-gray-800 p-3 ml-2',
          children: [
            WText(
              'Streak',
              className: 'text-[10px] font-semibold tracking-wide text-gray-500 dark:text-gray-400'
            ),
            WDiv(
              className: 'flex flex-row items-center mt-1',
              children: [
                WText(
                  '6 days',
                  className: 'text-lg font-bold text-gray-900 dark:text-white'
                ),
                WDiv(
                  className: 'ml-1',
                  child: WIcon(
                    Icons.local_fire_department,
                    className: 'text-base text-orange-500 dark:text-orange-400'
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'w-full mt-5',
      child: WButton(
        className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
        child: WDiv(
          className: 'flex flex-row items-center',
          children: [
            WIcon(
              Icons.pause,
              className: 'text-base text-white dark:text-gray-900'
            ),
            WDiv(
              className: 'ml-2',
              child: WText(
                'Pause session',
                className: 'text-sm font-semibold text-white dark:text-gray-900'
              ),
            ),
          ],
        ),
      ),
    ),
  ],
)
Stats
Views
34
Stars
0
Revisions
1
Size
8,346 chars
Created
Aug 14, 2026