Flutter Flight Booking Summary Card
A boarding-pass style flight card: airline header with a plane badge and cabin pill, a departure-to-arrival route with airport codes, times and duration, a divider, and a footer of seat and gate chips with a live boarding countdown. 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-white shadow-xl dark:bg-gray-900',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-xl bg-teal-600 dark:bg-teal-500',
child: WIcon(
Icons.flight,
className: 'text-white text-lg'
),
),
WText(
'SkyJet Airways',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'rounded-full px-3 py-1 bg-teal-50 dark:bg-teal-950',
child: WText(
'Business',
className: 'text-xs font-semibold text-teal-700 dark:text-teal-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col items-start gap-1',
children: [
WText(
'LHR',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'London',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'06:45',
className: 'text-sm font-semibold text-gray-700 dark:text-gray-300'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WIcon(
Icons.flight,
className: 'text-teal-500 text-xl dark:text-teal-400'
),
WText(
'7h 10m',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
WText(
'Nonstop',
className: 'text-xs font-medium text-teal-600 dark:text-teal-400'
),
],
),
WDiv(
className: 'flex flex-col items-end gap-1',
children: [
WText(
'DXB',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'Dubai',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'18:55',
className: 'text-sm font-semibold text-gray-700 dark:text-gray-300'
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700',
child: WSpacer(
className: 'h-0'
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'rounded-lg px-2 py-1 bg-gray-100 dark:bg-gray-800',
child: WText(
'Seat 4A',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
),
WDiv(
className: 'rounded-lg px-2 py-1 bg-gray-100 dark:bg-gray-800',
child: WText(
'Gate B12',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-teal-600 dark:bg-teal-500',
children: [
WIcon(
Icons.schedule,
className: 'text-white text-sm'
),
WText(
'Boards 2h 14m',
className: 'text-xs font-bold text-white'
),
],
),
],
),
],
)
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.
