How to Design a Real Estate Listing App in FlutterFlow

Create a properties collection with fields: title (String), price (double), propertyType (String: house, apartment, condo), bedrooms (int), bathrooms (int), sqft (int), address (String), lat (double), lng (double), images (String array of URLs), description (String), agentId (String), status (String: active, pending, sold), listedAt (Timestamp). Create a users/{uid}/saved_properties subcollection with fields: propertyId (String), savedAt (Timestamp). Add 8-10 sample property documents with varied types, prices, and locations for testing.

Create a SearchPage. Add Page State: viewMode (String, default 'list'). At the top, place a Row with filter icons and a toggle IconButton that switches viewMode between 'list' and 'map'. Use Conditional Visibility to show either a FlutterFlowGoogleMap or a ListView based on viewMode. For the map, bind markers to the properties Backend Query using lat and lng fields, with a snippet showing price. For the list, display property cards with the first image, title, price, bedrooms, and bathrooms in a compact Row layout.

Add a filter panel as a Bottom Sheet. Include: propertyType ChoiceChips (House, Apartment, Condo, All), a price range Slider with min and max handles, a bedrooms DropDown (Any, 1+, 2+, 3+, 4+), and a sort DropDown (Price Low to High, Price High to Low, Newest, Largest). Store selections in Page State activeFilters Map. On Apply, compose the Firestore query with chained where clauses: propertyType equals selected (or skip if All), price >= min, price <= max, bedrooms >= selected, ordered by the chosen sort field. Add a Reset button that clears all filter values.

Create a PropertyDetailPage with Route Parameter propertyId. Query the property document by ID. At the top, add a PageView bound to the images array, with dot indicators showing the current image index. Below, display a specs Row with icon-label pairs for bedrooms, bathrooms, and sqft. Show the full description in a Text widget. Add an agent card Container with the agent name, photo, phone, and email fetched from an agents collection using agentId. Include a Schedule Tour button that navigates to a booking form or creates an appointment document directly.

On the property card and detail page, add a heart IconButton. On tap, check if a document exists in users/{uid}/saved_properties with the matching propertyId. If it does not exist, create one with propertyId and savedAt timestamp. If it already exists, delete it to unsave. Use Conditional Styling to fill the heart icon red when saved. Create a SavedPage that queries the saved_properties subcollection and joins each propertyId back to the properties collection to display the saved listing cards.