Wingora | Flutter Flight Booking App UI Kit

Wingora is a complete flight booking app UI kit for Flutter — 26 screens covering search, results, an interactive cabin seat map, fare comparison, checkout, trips and boarding passes, in light and dark. Every screen runs on bundled mock data, so the whole flow works the moment you press run: no backend, no API keys, nothing to sign up for.

You can have it running in about five minutes: unzip, flutter pub get, flutter run, and the first thing you see is a finished booking flow rather than a build error. Every color lives in one app_colors.dart file with light and dark side by side, so re-skinning it to your brand is an afternoon, not a rewrite. And the screens flight apps usually skip are the ones this kit is built around: the cabin seat map, the flexible-dates price graph, the fare comparison table and the live trip arc.

What’s in the package

• Full Flutter app source code — 26 screens across 16 modules, 99 Dart files, null-safe, zero analyzer issues
• Light and dark themes, defined side by side in a single app_colors.dart file
• Three typefaces bundled as static font assets — Familjen Grotesk, Instrument Sans and B612 Mono, with their SIL Open Font License files; nothing is downloaded at runtime
• Two runtime dependencies — get and cupertino_icons. No map SDK, no charting package, no barcode package: the aircraft cabin, the flight arc and the boarding-pass barcode are drawn with CustomPainter
• A deterministic mock data layer — no DateTime.now(), no Random(), so every screen renders the same on every run
• Three service classes with Future-based signatures, written to be replaced — swap the bodies for HTTP calls and no screen changes
• Offline HTML documentation — first-run setup, a terminal command glossary, a screen tour with animated figures of the two signature interactions, a re-skinning guide, connecting your API (including auth headers and error handling), the project structure, and troubleshooting
• Tests included — widget tests plus an integration walkthrough that drives all 26 screens

Who is this for

• Flutter developers building a flight booking or travel front end who want the hard screens — the seat map, the fare logic, the boarding pass — already solved
• Freelancers and agencies with a travel client: re-skin one theme file, connect the client’s API and hand it over
• Travel startups that need a demo-ready booking flow this week, not this quarter
• Product teams at airlines, OTAs and agencies who want a modern reference UI to build on

The screens that make this kit

Pick a seat on the real cabin — a top-down aircraft plan drawn with CustomPainter (fuselage, wings, exit doors) with a 3-3 grid split by the aisle. Free, occupied, exit-row and extra-legroom seat states, multi-passenger assignment at one tap each, and a sticky summary that re-prices as seats are picked. No map SDK, no API key, no bundled artwork.

The cheap day, before you search — fares drawn as a scrollable bar graph instead of a month grid, so the cheapest day is visible at a glance. Bar height is the fare and the cheapest day carries the amber marker; the graph opens centered on the selected departure date, and tapping a bar updates the search form above it. Pure Flutter — no charting dependency.

Light, Standard or Flex — the trade-off between fares as one table instead of three paragraphs of small print: cabin bag, checked bag, seat choice, date changes and refunds, compared perk by perk. The selected column is tracked through the whole booking, and a perk added to the model shows up on every card automatically.

The trip, while it is happening — the journey drawn as an arc with the aircraft parked at its current progress, flown portion solid and the rest dashed, above a day-of-travel timeline: check-in opens, gate announced, boarding, departure, arrival. Terminal, gate and seat are set in the monospaced data face. Wire it to your operations feed and it goes live.

Search to payment, without a backend — every screen runs on bundled mock data, so the whole booking flow works the moment you press run: results with sort chips and filters, a stop-by-stop itinerary with layovers, fare cards, seat selection and a demo checkout that itemizes fare, seats and taxes into one consistent total.

Boarding passes that look printed — a notched ticket shape, dashed perforation and a barcode drawn from the booking reference. Trips are split into upcoming and past, each traveller’s pass swipes horizontally, and confirmation hands straight over to the pass.

One palette, two themes

Both themes are defined side by side in a single file — re-skin the whole app by editing three colors. The stock palette is a calm, confident evergreen: deep green #0F3D2E on cloud white, one amber accent reserved for the cheapest fare and live states, and B612 Mono — an aviation instrument typeface — for every flight number, airport code, time and price, so the data reads like a departures board.

Features

Screens (26)

Splash · Onboarding (3) · Sign in · Sign up · OTP · Search · Airport picker · Results · Filters · Flight detail · Fare comparison · Cabin seat map · Traveller details · Payment · Confirmation · Trips · Trip detail · Boarding pass · Explore · Price watchlist · Saved travellers · Profile · Settings — with light and dark variants of the hero screens.

Architecture

• Clean GetX layering — View to Controller to Service to Model, with lazy bindings per route
• Views never touch the mock data directly — everything goes through the three service classes, which is what makes the API swap clean
• The booking flow (detail, seats, traveller details, payment, confirmation) shares one state object, so nothing gets lost between steps
• AirlineMark is the single rendering point for carrier logos — give it a logoUrl and real logos appear everywhere, with an automatic glyph fallback

Code quality and platforms

• flutter analyze reports zero issues
• One Flutter codebase for Android and iOS; Android compileSdk and targetSdk 36
• Deterministic demo data — screenshots, tests and the live preview all render identically

Built to be handed over

Clean architecture, one-file theming, and a data layer written to be replaced by your API — the kit is designed for the day you hand it to a client, not just the day you buy it.

Get it running in 5 minutes

1. Unzip the package 2. cd flight_ui_kit 3. flutter pub get 4. flutter run

That’s it — the app opens on the search screen with bundled data, and the whole booking flow works offline. Open flight_ui_kit/documentation/index.html for the full walkthrough: first-run setup, a terminal command glossary for non-CLI users, re-theming, connecting your API, and troubleshooting.

Try it before you buy

Use the Live Preview button on this page to open the app in your browser and click through the real screens — the cabin seat map, the flexible-dates price graph and the fare comparison table are all live, running the same code that ships in the package.

Requirements

Flutter 3.29 or newer (Dart 3.7+), with Android Studio or VS Code and the Flutter and Dart plugins. Builds for Android and iOS from one codebase.

What’s not included

Being straight with you up front, so there are no surprises after purchase:

• No backend and no flight-data API. This is a front-end UI kit with a mock data layer. The three service classes expose Future signatures so swapping in your own API is a body swap, not a refactor — but the server side, and a flight data provider, are yours to bring.
• The demo data covers one route. Singapore to Tokyo with five flights, seat maps, fares and trips — enough to walk every screen; it is not a route database.
• Carrier logos are glyph placeholders. AirlineMark takes a logoUrl for real logos; sourcing and licensing real airline logos is the buyer’s responsibility.
• The payment screen is a demo. No payment SDK is bundled and no card details leave the device.
• The notification toggles are UI. Price alerts, gate changes and check-in reminders in Settings are switches ready to be wired — no push service is connected.
• English only — no localization files or RTL support in this version.
• No stock photography anywhere — that one is deliberate. Every visual is typography, Material icons and CustomPainter drawing, which is why the package stays small, there are no image licenses to inherit, and re-skinning it to a brand does not mean replacing someone else’s photos.

Support and updates

• Questions go through the Comments tab on this page or my Envato profile contact form.
• I aim to reply within 1 to 2 business days on working days.
• Support covers setup problems, bugs and questions about how the included code works.
• Support does not cover custom feature development, backend implementation or third-party integration work — those are separate projects.
• Bug fixes and Flutter compatibility updates are free for existing buyers.

Third-party services and costs

Wingora is a front-end UI kit. It does not include a backend, a flight-search API subscription, a payment provider, an account with any airline or aggregator, or server hosting. Connecting the app to live services — a flight data provider, a payment gateway, push notifications, analytics or crash reporting — means signing up with those providers, and they charge their own fees, which are separate from and not included in the price of this item. Their pricing, availability and terms are outside our control. The payment screen is a demo: no payment SDK is bundled and no card details leave the device. Carrier logos are glyph placeholders — sourcing and licensing real airline logos is the buyer’s responsibility.

Changelog

Version 1.0 — initial release.