Skip to content
Türkçe
All snippets

Flutter Boarding Pass Card with Perforated Stub and Barcode

A polished airline boarding pass built with Wind: an indigo header with the SFO to NRT route and flight code, a perforated dotted tear line, a passenger plus gate, seat, and boarding key-value grid, and a scannable barcode strip. Dark-mode ready.

  • WDiv
  • WText
  • WIcon
preview
ni0en9jc.dart 
WDiv(
  className: 'mx-auto w-full max-w-sm overflow-hidden rounded-3xl bg-white border border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-col gap-5 bg-indigo-600 p-6 dark:bg-indigo-600',
      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 flex-row items-center justify-center w-9 h-9 rounded-xl bg-indigo-500 dark:bg-indigo-500',
                  children: [
                    WText(
                      'AZ',
                      className: 'text-sm font-bold text-white dark:text-white'
                    ),
                  ],
                ),
                WText(
                  'Azure Air',
                  className: 'text-sm font-semibold text-white dark:text-white'
                ),
              ],
            ),
            WText(
              'BOARDING PASS',
              className: 'text-xs font-semibold tracking-widest text-indigo-100 dark:text-indigo-100'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-col gap-1',
              children: [
                WText(
                  'SFO',
                  className: 'text-3xl font-black text-white dark:text-white'
                ),
                WText(
                  'San Francisco',
                  className: 'text-xs text-indigo-100 dark:text-indigo-100'
                ),
              ],
            ),
            WIcon(
              Icons.arrow_forward,
              className: 'text-xl text-indigo-200 dark:text-indigo-200'
            ),
            WDiv(
              className: 'flex flex-col items-end gap-1',
              children: [
                WText(
                  'NRT',
                  className: 'text-3xl font-black text-white dark:text-white'
                ),
                WText(
                  'Tokyo',
                  className: 'text-xs text-indigo-100 dark:text-indigo-100'
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'wrap items-center justify-between gap-1.5 w-full px-6 py-3 bg-white dark:bg-gray-900',
      children: [
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
        WDiv(
          className: 'w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-5 p-6 pt-3',
      children: [
        WDiv(
          className: 'flex flex-row items-start justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-col gap-1',
              children: [
                WText(
                  'PASSENGER',
                  className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
                ),
                WText(
                  'Anıl Çakır',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-col items-end gap-1',
              children: [
                WText(
                  'FLIGHT',
                  className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
                ),
                WText(
                  'AZ 288',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-start justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-col gap-1',
              children: [
                WText(
                  'GATE',
                  className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
                ),
                WText(
                  'B12',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-col items-center gap-1',
              children: [
                WText(
                  'SEAT',
                  className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
                ),
                WText(
                  '14A',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-col items-end gap-1',
              children: [
                WText(
                  'BOARDING',
                  className: 'text-xs tracking-wide text-gray-400 dark:text-gray-500'
                ),
                WText(
                  '09:45',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-end justify-between w-full h-12 gap-0.5 pt-2',
          children: [
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-2 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-2 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-2 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-2 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-1.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-0.5 h-10 bg-gray-900 dark:bg-gray-100'
            ),
            WDiv(
              className: 'w-2 h-10 bg-gray-900 dark:bg-gray-100'
            ),
          ],
        ),
      ],
    ),
  ],
)
288 lines Open in the playground

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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton