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.
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'
),
],
),
],
),
],
)
Benzer örnekler
-
Flutter Bookshelf Card with Book Spine Shelves and Reading Goal
A reading tracker card for Flutter book apps, built with Wind: two wooden shelves of book spines in varied heights, colours and foil bands, a flat stack, a bookmark ribbon on the current read, a reading challenge badge and a page progress bar. The spine counts match the goal it reports.
-
Flutter Restaurant Floor Plan Card with Table Occupancy Status
A Flutter restaurant floor plan card for host stand apps: round tops, banquette booths, a communal eight-top and a bar with stools, each table coloured free, seated or held. Every table is a div at a fixed pixel coordinate in wind_kit over WDynamic, no canvas, no image.
-
Flutter Hiking Trail Card with Elevation Profile and Waypoints
A Flutter hiking trail card for outdoor, trail running and cycling apps: a 34-step elevation profile with a ridge line, markers for trailhead, summit and lake, a distance axis, trip stat tiles, a snow advisory strip and a navigation button. Built with wind_kit className strings only.
