Flutter Real Estate Property Listing Card with Photo Header
A real estate property listing card with a gradient photo header, price overlay, location, beds, baths, and area stats, plus a details call to action. Responsive Wind layout with dark mode.
WDiv(
className: 'mx-auto max-w-sm flex flex-col rounded-3xl overflow-hidden bg-white border border-gray-100 shadow-xl dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'w-full h-40 bg-gradient-to-br from-sky-400 to-indigo-500 flex flex-col justify-between p-4',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'rounded-full px-3 py-1 bg-white/90 dark:bg-white/90',
child: WText(
'For Sale',
className: 'text-xs font-bold text-indigo-600 dark:text-indigo-600'
),
),
WDiv(
className: 'w-9 h-9 rounded-full bg-white/25 dark:bg-white/25 flex flex-row items-center justify-center',
child: WIcon(
Icons.favorite,
className: 'text-base text-white dark:text-white'
),
),
],
),
WText(
'$625,000',
className: 'text-3xl font-extrabold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-4 p-5 w-full',
children: [
WDiv(
className: 'flex flex-col gap-1 w-full',
children: [
WText(
'Maple Ridge Townhouse',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.location_on,
className: 'text-sm text-gray-400 dark:text-gray-500'
),
WText(
'428 Elmwood Ave, Portland',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col items-center gap-0.5 rounded-2xl bg-gray-50 dark:bg-gray-800 px-5 py-3',
children: [
WText(
'3',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Beds',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-0.5 rounded-2xl bg-gray-50 dark:bg-gray-800 px-5 py-3',
children: [
WText(
'2',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Baths',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-0.5 rounded-2xl bg-gray-50 dark:bg-gray-800 px-5 py-3',
children: [
WText(
'1,450',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Sq Ft',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl py-3.5 bg-indigo-600 dark:bg-indigo-500 shadow-lg flex flex-row items-center justify-center',
child: WText(
'View details',
className: 'text-sm font-bold text-white dark: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.
