Flutter Trip Itinerary Day Card with Booking Codes
A daily travel itinerary card listing timed stops with category icons, confirmation codes, and booking status badges. Great for trip planners and travel concierge apps.
WDiv(
className: 'mx-auto 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',
children: [
WText(
'Tuesday, May 12',
className: 'text-base font-bold text-gray-900 dark:text-white',
),
WText(
'Day 3 · Lisbon',
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-teal-100 dark:bg-teal-500/20',
children: [
WIcon(
Icons.calendar_today,
className: 'text-teal-600 text-sm dark:text-teal-300',
),
WText(
'3 stops',
className: 'text-xs font-bold text-teal-700 dark:text-teal-300',
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-sky-100 dark:bg-sky-500/20',
child: WIcon(
Icons.schedule,
className: 'text-sky-600 text-lg dark:text-sky-300',
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Train to Sintra',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
WText(
'09:15 · Rossio Station',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WText(
'SE-2241',
className: 'text-xs font-bold tracking-wide text-sky-600 dark:text-sky-300',
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20',
child: WIcon(
Icons.location_on,
className: 'text-violet-600 text-lg dark:text-violet-300',
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Pena Palace tour',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
WText(
'11:00 · skip-the-line',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-2 py-1 bg-emerald-100 dark:bg-emerald-500/20',
children: [
WIcon(
Icons.check,
className: 'text-emerald-600 text-xs dark:text-emerald-300',
),
WText(
'Booked',
className: 'text-[10px] font-bold text-emerald-700 dark:text-emerald-300',
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-500/20',
child: WIcon(
Icons.star,
className: 'text-amber-500 text-lg dark:text-amber-300',
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Dinner at Belcanto',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
WText(
'20:00 · 2 Michelin stars',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WText(
'Table 7',
className: 'text-xs font-bold text-amber-600 dark:text-amber-300',
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-2 w-full rounded-2xl px-4 py-3 bg-teal-600 dark:bg-teal-500',
children: [
WText(
'View full itinerary',
className: 'text-sm font-bold text-white dark:text-white',
),
WIcon(
Icons.arrow_forward,
className: 'text-white text-base dark:text-white',
),
],
),
],
)
Benzer örnekler
-
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.
