Flutter Cafe Loyalty Stamp Card with Reward Progress
A digital coffee-shop loyalty card built with Wind for Flutter: a fill-the-grid stamp collection, a stamps-earned counter chip, and a redeem call to action. Shows how to build retail rewards UI with Tailwind-style className utilities and dark-mode-ready color pairs.
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Bean & Brew',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Loyalty Card',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
child: WText(
'6 / 9',
className: 'text-sm font-bold text-amber-700 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
WDiv(
className: 'w-16 h-16 rounded-full bg-amber-500 dark:bg-amber-600 flex flex-row items-center justify-center',
child: WIcon(
Icons.restaurant,
className: 'text-white text-lg'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-16 h-16 rounded-full border-2 border-amber-200 dark:border-gray-700 bg-amber-50 dark:bg-gray-800'
),
WDiv(
className: 'w-16 h-16 rounded-full border-2 border-amber-200 dark:border-gray-700 bg-amber-50 dark:bg-gray-800'
),
WDiv(
className: 'w-16 h-16 rounded-full border-2 border-amber-200 dark:border-gray-700 bg-amber-50 dark:bg-gray-800'
),
],
),
],
),
WDiv(
className: 'w-full mt-6',
child: WText(
'Just 3 more stamps until your next free coffee',
className: 'text-sm text-gray-600 dark:text-gray-300 text-center'
),
),
WButton(
className: 'w-full mt-4 rounded-2xl bg-amber-500 dark:bg-amber-600 py-3',
child: WText(
'View My Rewards',
className: 'text-white text-center font-semibold text-sm'
),
),
],
)
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.
