Flutter Flash Sale Countdown Timer Card

A high-urgency flash sale card with a lightning badge, a discount pill, product pricing with a struck-through original price, and a live HH:MM:SS countdown over a warm gradient. Built with Wind UI utility classes and dark mode pairs.

Anılcan Çakır by Anılcan Çakır 23 views 0 stars 1 week ago Rev 1
Open in Playground Fork
Flutter Flash Sale Countdown Timer Card preview
main.dart 
WDiv(
  className: '''
    relative mx-auto w-[400px] overflow-hidden rounded-3xl p-6
    bg-gradient-to-br from-rose-600 via-orange-600 to-amber-500
    dark:from-rose-700 dark:via-orange-700 dark:to-amber-600
    shadow-2xl shadow-black/40 dark:shadow-black/60
  ''',
  children: [
    WDiv(
      className: 'absolute -top-12 -right-10 w-44 h-44 rounded-full bg-white/15 dark:bg-white/10',
    ),
    WDiv(
      className: 'flex flex-col gap-5',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between',
          children: [
            WDiv(
              className: '''
                inline-flex flex-row items-center gap-1
                rounded-full px-3 py-1
                bg-white/20 dark:bg-white/15
              ''',
              children: [
                WIcon(
                  Icons.bolt,
                  className: 'text-base text-white dark:text-white',
                ),
                WText(
                  'FLASH SALE',
                  className: 'text-xs font-bold tracking-widest text-white dark:text-white',
                ),
              ],
            ),
            WDiv(
              className: 'rounded-full px-3 py-1 bg-black/25 dark:bg-black/40',
              child: WText(
                '-40%',
                className: 'text-sm font-extrabold text-white dark:text-white',
              ),
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-4',
          children: [
            WDiv(
              className: '''
                w-16 h-16 rounded-2xl
                bg-white/25 dark:bg-white/15
                border border-white/30 dark:border-white/20
                flex flex-row items-center justify-center
              ''',
              child: WIcon(
                Icons.favorite,
                className: 'text-2xl text-white dark:text-white',
              ),
            ),
            WDiv(
              className: 'flex-1 flex flex-col gap-1',
              children: [
                WText(
                  'Aurora Wireless Buds',
                  className: 'text-lg font-bold text-white dark:text-white',
                ),
                WDiv(
                  className: 'flex flex-row items-center gap-2',
                  children: [
                    WText(
                      '$59',
                      className: 'text-xl font-extrabold text-white dark:text-white',
                    ),
                    WText(
                      '$99',
                      className: 'text-sm font-medium line-through text-white/60 dark:text-white/60',
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center gap-3',
          children: [
            WDiv(
              className: '''
                w-20 h-20 rounded-2xl
                bg-white/15 dark:bg-white/10
                border border-white/25 dark:border-white/15
                flex flex-col items-center justify-center
              ''',
              children: [
                WText(
                  '02',
                  className: 'text-3xl font-extrabold text-white dark:text-white',
                ),
                WText(
                  'HRS',
                  className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
                ),
              ],
            ),
            WText(
              ':',
              className: 'text-2xl font-extrabold text-white/70 dark:text-white/70',
            ),
            WDiv(
              className: '''
                w-20 h-20 rounded-2xl
                bg-white/15 dark:bg-white/10
                border border-white/25 dark:border-white/15
                flex flex-col items-center justify-center
              ''',
              children: [
                WText(
                  '45',
                  className: 'text-3xl font-extrabold text-white dark:text-white',
                ),
                WText(
                  'MIN',
                  className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
                ),
              ],
            ),
            WText(
              ':',
              className: 'text-2xl font-extrabold text-white/70 dark:text-white/70',
            ),
            WDiv(
              className: '''
                w-20 h-20 rounded-2xl
                bg-white/15 dark:bg-white/10
                border border-white/25 dark:border-white/15
                flex flex-col items-center justify-center
              ''',
              children: [
                WText(
                  '19',
                  className: 'text-3xl font-extrabold text-white dark:text-white',
                ),
                WText(
                  'SEC',
                  className: 'text-xs font-semibold tracking-wider text-white/70 dark:text-white/70',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: '''
            w-full rounded-2xl py-4
            bg-white dark:bg-white
            flex flex-row items-center justify-center gap-2
          ''',
          children: [
            WIcon(
              Icons.bolt,
              className: 'text-lg text-rose-600 dark:text-rose-700',
            ),
            WText(
              'Grab the deal',
              className: 'text-base font-bold text-rose-600 dark:text-rose-700',
            ),
          ],
        ),
      ],
    ),
  ],
)
Stats
Views
23
Stars
0
Revisions
1
Size
5,631 chars
Created
Jun 12, 2026