Wingora | Flutter Flight Booking App UI Kit

LIVE PREVIEWBUY FOR $24

Wingora is a whole flight reserving app UI equipment for Flutter — 26 screens overlaying search, outcomes, an interactive cabin seat map, fare comparability, checkout, journeys and boarding passes, in mild and darkish. Each display screen runs on bundled mock information, so the entire circulation works the second you press run: no backend, no API keys, nothing to enroll in.

You may have it working in about 5 minutes: unzip, flutter pub get, flutter run, and the very first thing you see is a completed reserving circulation moderately than a construct error. Each coloration lives in a single app_colors.dart file with mild and darkish aspect by aspect, so re-skinning it to your model is a day, not a rewrite. And the screens flight apps often skip are those this equipment is constructed round: the cabin seat map, the flexible-dates worth graph, the fare comparability desk and the stay journey arc.

What’s within the package deal

• Full Flutter app supply code — 26 screens throughout 16 modules, 99 Dart information, null-safe, zero analyzer points
• Mild and darkish themes, outlined aspect by aspect in a single app_colors.dart file
• Three typefaces bundled as static font belongings — Familjen Grotesk, Instrument Sans and B612 Mono, with their SIL Open Font License information; nothing is downloaded at runtime
• Two runtime dependencies — get and cupertino_icons. No map SDK, no charting package deal, no barcode package deal: the plane cabin, the flight arc and the boarding-pass barcode are drawn with CustomPainter
• A deterministic mock information layer — no DateTime.now(), no Random(), so each display screen renders the identical on each run
• Three service lessons with Future-based signatures, written to get replaced — swap the our bodies for HTTP calls and no display screen adjustments
• Offline HTML documentation — first-run setup, a terminal command glossary, a display screen tour with animated figures of the 2 signature interactions, a re-skinning information, connecting your API (together with auth headers and error dealing with), the undertaking construction, and troubleshooting
• Exams included — widget checks plus an integration walkthrough that drives all 26 screens

Who is that this for

• Flutter builders constructing a flight reserving or journey entrance finish who need the onerous screens — the seat map, the fare logic, the boarding cross — already solved
• Freelancers and businesses with a journey shopper: re-skin one theme file, join the shopper’s API and hand it over
• Journey startups that want a demo-ready reserving circulation this week, not this quarter
• Product groups at airways, OTAs and businesses who desire a fashionable reference UI to construct on

The screens that make this equipment

Choose a seat on the true cabin — a top-down plane plan drawn with CustomPainter (fuselage, wings, exit doorways) with a 3-3 grid break up by the aisle. Free, occupied, exit-row and extra-legroom seat states, multi-passenger project at one faucet every, and a sticky abstract that re-prices as seats are picked. No map SDK, no API key, no bundled paintings.

A budget day, earlier than you search — fares drawn as a scrollable bar graph as an alternative of a month grid, so the most affordable day is seen at a look. Bar peak is the fare and the most affordable day carries the amber marker; the graph opens centered on the chosen departure date, and tapping a bar updates the search kind above it. Pure Flutter — no charting dependency.

Mild, Normal or Flex — the trade-off between fares as one desk as an alternative of three paragraphs of small print: cabin bag, checked bag, seat selection, date adjustments and refunds, in contrast perk by perk. The chosen column is tracked via the entire reserving, and a perk added to the mannequin reveals up on each card robotically.

The journey, whereas it’s taking place — the journey drawn as an arc with the plane parked at its present progress, flown portion strong and the remaining dashed, above a day-of-travel timeline: check-in opens, gate introduced, boarding, departure, arrival. Terminal, gate and seat are set within the monospaced information face. Wire it to your operations feed and it goes stay.

Search to cost, and not using a backend — each display screen runs on bundled mock information, so the entire reserving circulation works the second you press run: outcomes with kind chips and filters, a stop-by-stop itinerary with layovers, fare playing cards, seat choice and a demo checkout that itemizes fare, seats and taxes into one constant whole.

Boarding passes that look printed — a notched ticket form, dashed perforation and a barcode drawn from the reserving reference. Journeys are break up into upcoming and previous, every traveller’s cross swipes horizontally, and affirmation arms straight over to the cross.

One palette, two themes

Each themes are outlined aspect by aspect in a single file — re-skin the entire app by enhancing three colours. The inventory palette is a relaxed, assured evergreen: deep inexperienced #0F3D2E on cloud white, one amber accent reserved for the most affordable fare and stay states, and B612 Mono — an aviation instrument typeface — for each flight quantity, airport code, time and worth, so the info reads like a departures board.

Options

Screens (26)

Splash · Onboarding (3) · Register · Join · OTP · Search · Airport picker · Outcomes · Filters · Flight element · Fare comparability · Cabin seat map · Traveller particulars · Fee · Affirmation · Journeys · Journey element · Boarding cross · Discover · Worth watchlist · Saved travellers · Profile · Settings — with mild and darkish variants of the hero screens.

Structure

• Clear GetX layering — View to Controller to Service to Mannequin, with lazy bindings per route
• Views by no means contact the mock information immediately — all the things goes via the three service lessons, which is what makes the API swap clear
• The reserving circulation (element, seats, traveller particulars, cost, affirmation) shares one state object, so nothing will get misplaced between steps
• AirlineMark is the only rendering level for provider logos — give it a logoUrl and actual logos seem in all places, with an computerized glyph fallback

Code high quality and platforms

• flutter analyze experiences zero points
• One Flutter codebase for Android and iOS; Android compileSdk and targetSdk 36
• Deterministic demo information — screenshots, checks and the stay preview all render identically

Constructed to be handed over

Clear structure, one-file theming, and an information layer written to get replaced by your API — the equipment is designed for the day you hand it to a shopper, not simply the day you purchase it.

Get it working in 5 minutes

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

That’s it — the app opens on the search display screen with bundled information, and the entire reserving circulation works offline. Open flight_ui_kit/documentation/index.html for the complete walkthrough: first-run setup, a terminal command glossary for non-CLI customers, re-theming, connecting your API, and troubleshooting.

Attempt it before you purchase

Use the Stay Preview button on this web page to open the app in your browser and click on via the true screens — the cabin seat map, the flexible-dates worth graph and the fare comparability desk are all stay, working the identical code that ships within the package deal.

Necessities

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 entrance, so there are not any surprises after buy:

• No backend and no flight-data API. This can be a front-end UI equipment with a mock information layer. The three service lessons expose Future signatures so swapping in your individual API is a physique swap, not a refactor — however the server aspect, and a flight information supplier, are yours to deliver.
• The demo information covers one route. Singapore to Tokyo with 5 flights, seat maps, fares and journeys — sufficient to stroll each display screen; it isn’t a route database.
• Service logos are glyph placeholders. AirlineMark takes a logoUrl for actual logos; sourcing and licensing actual airline logos is the customer’s duty.
• The cost display screen is a demo. No cost SDK is bundled and no card particulars go away the system.
• The notification toggles are UI. Worth alerts, gate adjustments and check-in reminders in Settings are switches able to be wired — no push service is related.
• English solely — no localization information or RTL assist on this model.
• No inventory pictures anyplace — that one is deliberate. Each visible is typography, Materials icons and CustomPainter drawing, which is why the package deal stays small, there are not any picture licenses to inherit, and re-skinning it to a model doesn’t imply changing another person’s pictures.

Help and updates

• Questions undergo the Feedback tab on this web page or my Envato profile contact kind.
• I purpose to answer inside 1 to 2 enterprise days on working days.
• Help covers setup issues, bugs and questions on how the included code works.
• Help doesn’t cowl customized function growth, backend implementation or third-party integration work — these are separate tasks.
• Bug fixes and Flutter compatibility updates are free for current consumers.

Third-party providers and prices

Wingora is a front-end UI equipment. It does not embody a backend, a flight-search API subscription, a cost supplier, an account with any airline or aggregator, or server internet hosting. Connecting the app to stay providers — a flight information supplier, a cost gateway, push notifications, analytics or crash reporting — means signing up with these suppliers, and they cost their very own charges, that are separate from and never included within the worth of this merchandise. Their pricing, availability and phrases are exterior our management. The cost display screen is a demo: no cost SDK is bundled and no card particulars go away the system. Service logos are glyph placeholders — sourcing and licensing actual airline logos is the customer’s duty.

Changelog

Model 1.0 — preliminary launch.

Source