Oriel - Real Estate App UI Kit for Flutter

Oriel is a real estate app UI kit for buying and renting homes, built in Flutter for iOS and Android. It runs on mock data and a drawn map with no API key, so you can open it, explore every screen, and then connect your own backend and map provider.

It covers the whole buyer and renter journey: onboarding and sign-in, a home screen with featured and recently viewed homes, search on a map with price pins and clusters, a list view, filters with a price histogram, drawing an area on the map, and saved searches with alerts. Listings have a photo gallery with a full-screen viewer, a floor plan drawn from room data, a tour frame, features, nearby places, price history, and similar homes. There is a mortgage estimate with a monthly breakdown and a payment-over-time chart, a side-by-side comparison of up to three homes, viewing requests, chat with agents, saved homes with private notes, agent and agency profiles with reviews, a six-step flow for listing a property, and My listings with performance charts. The main screens have loading, empty, error, and offline states.

Screens read from 11 repository interfaces through Riverpod providers, and the map sits behind a MapProvider interface. Mock implementations with realistic, clearly fictional data are bound in one file; replace them with your own API classes, and plug in Google Maps, Apple Maps, Mapbox, or OpenStreetMap, without changing the screens. Price pins and clusters are drawn by the app, so they keep their look on any map. The documentation walks through both swaps.

The design system has light and dark themes, three brand presets, and a palette file for your own colors. English and Arabic are included with a full right-to-left layout, and you can add languages with .arb files. Currency, area unit (m² or ft²), number format, date format, and 12/24-hour time are settings. Property photos, portraits, the map, and illustrations are original drawings made for the kit, so there are no stock images to license.

Not included: a backend, real payments, real chat, push notifications, a maps SDK, an agent app, or an admin dashboard. Mortgage figures are labeled as estimates and are not financial advice. Filters and sample copy describe the property, never who should live there.

Features

- Flutter project for iOS and Android (estate_kit) - 79 screens and 13 loading, empty, error, and offline states - Map search with price pins and clusters, a list view, sorting, and drawing an area - Filters: price with a histogram, type, bedrooms, bathrooms, floor area, features, furnishing, listing age, keywords - Listing: photo gallery, full-screen viewer, floor plan, tour frame, features, nearby places, price history, similar homes - Mortgage estimate with a monthly breakdown and payment-over-time chart; compare up to three homes - Viewing requests (in person or video), chat with agents, viewings list - Saved homes with notes, saved searches with alerts, recently viewed homes - Agent and agency profiles with listings and reviews - Six-step sell flow with photo uploads and a price guide; My listings with performance stats - Light and dark themes, three brand presets (Oxblood, Slate, Graphite) - English and Arabic (666 strings each) with right-to-left layout - 11 repository interfaces, mock implementations, and one binding file - MapProvider interface with a keyless demo map - Component gallery screen - Unit and widget tests - HTML documentation: setup, architecture, API and map swap guides, theming, localization, deep links, asset licenses, changelog - Guests can browse; saving, contacting, booking, and listing ask to sign in and return to the same screen

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, intl. No API keys or accounts are needed to run the demo.

Instructions

1. Unzip the download and open a terminal in OrielRealEstateUIKit/estate_kit. 2. Run "flutter pub get", then "flutter run" with an iOS simulator or Android emulator selected. 3. The app opens on onboarding. Tap Skip to browse as a guest, or "I already have an account" and then Sign in (the demo credentials are filled in). 4. To connect your backend, implement the interfaces in lib/data/repositories/repositories.dart and bind your classes in lib/data/providers.dart. No screen changes are needed. 5. To use a real map, implement MapProvider (lib/map/map_provider.dart) with the map package you choose and return it from mapProviderProvider. 6. To rebrand, change the brand colors in lib/core/theme/palette.dart and the app name in the iOS Info.plist and Android manifest. 7. Documentation/index.html covers setup, architecture, the API and map swap guides, theming, localization, deep links, testing, and asset licenses.