Journio - Travel and Social Flutter UI Kit

Journio is a Flutter UI kit for a travel app that books stays, flights and things to do, keeps them on one trip timeline, and lets travelers share the trip as Moments. It runs on iOS and Android and has 102 screens in seven groups: start and sign-in, Explore, stays, flights, things to do, Moments, and trips and account. Everything runs on built-in sample data, so every screen works before you connect a backend.

Stays go from search to voucher: destination, dates and guests with child ages, results as a list or on a map, filters with a live count, the stay page with photos, reviews and policies, rooms and rates side by side, guest details, extras, promo codes, a full price breakdown, payment, and a voucher with a QR code. Date changes are priced before anything changes, and cancellation works out the refund from the stay's policy.

Flights cover return and one-way trips: an airport picker with nearby airports, results with a date strip and connections, filters, fares compared item by item, passengers, a seat map with extra-legroom rows and a list view for screen readers, bags and extras, checkout, and a boarding pass for each flight. Times are shown in each airport's local time, with a note when the time zones differ. Bookings can be managed or cancelled under the fare rules.

Things to do suggests activities that fit the free time in the trip. Time slots show the seats left, participants are priced by age, add-ons are optional, the voucher shows the meeting point, and a sold-out time offers a waitlist.

The Explore home follows the trip: destination postcards while planning, a countdown once booked, today's plan while traveling, and a review prompt after. The trip timeline shows every booking in local time, and trips can be copied and shared. A demo simulator in the app moves the sample trip between these phases.

Moments is the social part: a postcard feed with Following and For you tabs, stories, comments, saved lists, a profile with a passport of stamps, copying someone's trip, and following a friend's trip live by their progress on the plan, never their location. Reviews can only be written for finished bookings and carry a "Stayed here" or "Went here" mark. Report, block, mute, hidden words and removed-content screens cover what the App Store and Google Play ask of apps with user content.

Prices are kept in minor units and shown all-in with taxes by default, in four display currencies. Screens read data through five repository interfaces with Riverpod providers; replace the mock implementations with classes that call your API and no screen needs to change. Payment, photos, calendar, sharing and notifications are interfaces with stand-ins. English and Arabic are included (983 strings each) with a full right-to-left layout, along with three brand presets and light and dark themes. Data screens have loading, empty, error and offline states.

Not included: a backend or booking API, real travel inventory, payment processing (checkout runs through a stand-in payment service), a maps SDK (the maps are drawn placeholders), photo storage, or push notifications. Travelers, Moments and reviews are sample data.

Features

- 102 screens in seven groups: start and sign-in, Explore, stays, flights, things to do, Moments, trips and account - Stays from search to voucher: list and map results, filters, rooms and rates, extras, promo codes, price breakdown, payment, QR voucher - Date changes priced before they apply, and cancellation with the refund worked out from the policy - Flights: return or one way, nearby airports, date strip, connections, fares compared item by item, seat map, bags, boarding passes - Local times for every place, with time-zone notes and daylight-saving changes - Things to do matched to free time in the trip: time slots with seats left, participants by age, add-ons, a waitlist - One trip timeline; the Explore home changes with the trip: planning, booked, traveling, back home - Moments: postcard feed, stories, comments, saved lists, a passport of stamps, copy a trip, live trip sharing by plan progress - Reviews only from finished bookings, marked "Stayed here" or "Went here" - Report, block, mute, hidden words and removed-content screens for the app stores' user-content rules - Money in minor units, all-in prices with taxes, four display currencies - English and Arabic interface (983 strings each) with a full right-to-left layout - Three brand presets, each in light and dark - Five repository interfaces and five service interfaces with mock implementations - Loading, empty, error, offline and sold-out states - Screen index, design system gallery and demo simulator inside the app - 484 unit and widget tests; HTML docs with Android and iOS release and reskin steps

Requirements

Flutter 3.44 or later (Dart 3.12). Xcode 16 or later for iOS (deployment target iOS 13). Android Studio with an Android SDK for Android. Packages: flutter_riverpod, go_router, flutter_svg, qr_flutter, intl. No API keys or accounts are needed to run the app.

Instructions

1. Unzip the download. It contains a Journio-UI-Kit folder; open a terminal in the JournioUI project folder inside it (the one with pubspec.yaml). 2. Run "flutter pub get", then "flutter run" with an iOS simulator or Android emulator selected. 3. The app opens on the welcome screens. Any email signs in, and any six-digit code works (000000 shows the wrong-code state). 4. You, then UI kit, lists every screen by its design ID, opens the design system with brand and theme switches, and opens the demo simulator, which moves the sample trip between booked, traveling and back home. 5. You, then Currency and units, switches the currency, all-in prices, language (Arabic shows the right-to-left layout) and appearance. 6. The sample data is in assets/mock (catalog.json, account.json, social.json); MOCK_DATA.md documents every field. 7. To connect your backend, implement the interfaces in lib/data/repositories.dart and override the providers in lib/data/providers.dart. No screen changes are needed. 8. Documentation/index.html covers setup, rebranding (name, colours, fonts, pictures), Android and iOS release steps, connecting an API, payments, maps, moderation, localization and testing.