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.

Anılcan Çakır by Anılcan Çakır 24 views 0 stars 1 week ago Rev 1
Flutter Flight Booking Summary Card preview
main.dart
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'
            ),
          ],
        ),
      ],
    ),
  ],
)
Stats
Views
24
Stars
0
Revisions
1
Size
3,978 chars
Created
Jun 11, 2026