Flutter Ride Fare Receipt Card with Fare Breakdown
A ride-hailing fare receipt built with Wind: a completed-trip header, a driver row with star rating, pickup and dropoff stops, an itemized fare breakdown for base, distance, time, booking fee, and tip, a bold total, and the payment method. Dark-mode ready.
WDiv(
className: 'mx-auto w-full max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Trip Receipt',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Mar 14, 2025 at 8:24 PM',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-emerald-50 dark:bg-emerald-950',
children: [
WIcon(
Icons.check,
className: 'text-sm text-emerald-600 dark:text-emerald-400'
),
WText(
'Completed',
className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl p-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-11 h-11 rounded-full bg-indigo-100 dark:bg-indigo-900',
children: [
WText(
'DM',
className: 'text-sm font-bold text-indigo-600 dark:text-indigo-300'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Daniel Meyer',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Toyota Prius · 7XYZ123',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-2.5 py-1 bg-white dark:bg-gray-900',
children: [
WIcon(
Icons.star,
className: 'text-sm text-amber-400 dark:text-amber-400'
),
WText(
'4.9',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-start gap-3',
children: [
WDiv(
className: 'w-2.5 h-2.5 mt-1 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'PICKUP',
className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'Market St & 5th',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start gap-3',
children: [
WDiv(
className: 'w-2.5 h-2.5 mt-1 rounded-full bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'DROPOFF',
className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'SFO International, Terminal 2',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800',
children: [],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Base fare',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$8.00',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Distance (14.2 mi)',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$14.20',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Time (24 min)',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$6.40',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Booking fee',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$2.50',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Tip',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$7.50',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full border-t border-gray-100 pt-3 dark:border-gray-800',
children: [
WText(
'Total',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'$38.60',
className: 'text-xl font-black text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-center px-2 py-1 rounded-md bg-indigo-600 dark:bg-indigo-500',
children: [
WText(
'VISA',
className: 'text-xs font-black tracking-wide text-white dark:text-white'
),
],
),
WText(
'•••• 4242',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
],
),
],
)
More like this
-
Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A Flutter navigation lights card for boating and marine apps: a night panel with a top-down hull ringed by the COLREGs Rule 21 arcs, red port and green starboard sidelights at 112.5 degrees, a 225 degree masthead ring, a 135 degree sternlight and Rule 22 visibility ranges. Built with wind_kit.
-
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point
A Flutter runway markings card for aviation and flight training apps: the approach end of runway 27 drawn to scale, with eight threshold stripes, the designator from a 268 degree heading, a dashed centreline and twin aiming point bars, each called out. Absolute positioning in wind_kit.
-
Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A Flutter container ship bay plan card for logistics and terminal apps: a row-by-tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover, a tapered hold, slots coloured by discharge port, plugged reefers and a stowage legend. Built with wind_kit.
