Flutter Weather Forecast Card with Hourly Strip

A vibrant weather card on a sky gradient: city and date, an oversized current temperature, a one-line conditions summary, and a frosted hourly forecast strip with per-hour icons and temps. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.

by Anılcan Çakır 20 views 0 stars 1 week ago Rev 1

Open in Playground Fork

Flutter Weather Forecast Card with Hourly Strip preview

main.dart

WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gradient-to-br from-sky-400 to-indigo-500 shadow-xl dark:from-sky-700 dark:to-indigo-900',
  children: [
    WDiv(
      className: 'flex flex-row items-start justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              'San Francisco',
              className: 'text-lg font-bold text-white'
            ),
            WText(
              'Tuesday, 11 June',
              className: 'text-sm text-sky-100 dark:text-sky-200'
            ),
          ],
        ),
        WIcon(
          Icons.light_mode,
          className: 'text-amber-300 text-4xl dark:text-amber-300'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-start gap-1',
      children: [
        WText(
          '23',
          className: 'text-6xl font-extrabold text-white'
        ),
        WText(
          '°C',
          className: 'text-2xl font-bold text-sky-100 dark:text-sky-200'
        ),
      ],
    ),
    WText(
      'Sunny with a light breeze, humidity 58%',
      className: 'text-sm text-sky-50 dark:text-sky-100'
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-col items-center gap-2 rounded-2xl px-3 py-3 bg-white/15 dark:bg-white/10',
          children: [
            WText(
              'Now',
              className: 'text-xs font-medium text-sky-50'
            ),
            WIcon(
              Icons.light_mode,
              className: 'text-amber-300 text-lg'
            ),
            WText(
              '23°',
              className: 'text-sm font-bold text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-2 rounded-2xl px-3 py-3 bg-white/15 dark:bg-white/10',
          children: [
            WText(
              '13:00',
              className: 'text-xs font-medium text-sky-50'
            ),
            WIcon(
              Icons.cloud,
              className: 'text-white text-lg'
            ),
            WText(
              '22°',
              className: 'text-sm font-bold text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-2 rounded-2xl px-3 py-3 bg-white/15 dark:bg-white/10',
          children: [
            WText(
              '14:00',
              className: 'text-xs font-medium text-sky-50'
            ),
            WIcon(
              Icons.water_drop,
              className: 'text-sky-100 text-lg'
            ),
            WText(
              '20°',
              className: 'text-sm font-bold text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-2 rounded-2xl px-3 py-3 bg-white/15 dark:bg-white/10',
          children: [
            WText(
              '15:00',
              className: 'text-xs font-medium text-sky-50'
            ),
            WIcon(
              Icons.air,
              className: 'text-white text-lg'
            ),
            WText(
              '21°',
              className: 'text-sm font-bold text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-2 rounded-2xl px-3 py-3 bg-white/15 dark:bg-white/10',
          children: [
            WText(
              '16:00',
              className: 'text-xs font-medium text-sky-50'
            ),
            WIcon(
              Icons.dark_mode,
              className: 'text-indigo-100 text-lg'
            ),
            WText(
              '18°',
              className: 'text-sm font-bold text-white'
            ),
          ],
        ),
      ],
    ),
  ],
)

Stats

Views: 20
Stars: 0
Revisions: 1
Size: 3,860 chars
Created: Jun 11, 2026