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.

Anılcan Çakır by Anılcan Çakır 43 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Boarding Pass Card with Perforated Stub and Barcode preview
main.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'
            ),
          ],
        ),
      ],
    ),
  ],
)
Stats
Views
43
Stars
0
Revisions
1
Size
9,441 chars
Created
Jul 10, 2026