How to Integrate a Travel Itinerary Planner in FlutterFlow

In FlutterFlow's API Manager, create an API Group named GooglePlaces with base URL https://maps.googleapis.com/maps/api/place. Add your Places API key to FlutterFlow Secrets (Settings → Secrets → PLACES_API_KEY). Add a first API Call named searchPlaces with method GET, path /textsearch/json, query parameters query (Variable) and key ([PLACES_API_KEY]). Add a second API Call named getPlaceDetails with method GET, path /details/json, query parameters place_id (Variable), fields (text: name,rating,formatted_address,photos,geometry,opening_hours,website), and key. Mark response fields: for searchPlaces mark results[].name, results[].place_id, results[].rating, results[].photos[0].photo_reference, results[].geometry.location.lat, results[].geometry.location.lng. For getPlaceDetails mark result.name, result.formatted_address, result.website, result.opening_hours.open_now.

Create a Cloud Function named searchFlights. It accepts origin, destination, departureDate, and returnDate as query parameters. The function calls the Amadeus Flight Offers Search API: POST https://test.api.amadeus.com/v2/shopping/flight-offers with an OAuth Bearer token obtained from Amadeus token endpoint first. Map the response to a simplified array of flight objects: airline, flightNumber, departureTime, arrivalTime, duration, stops, price, currency. Store your Amadeus client_id and client_secret in Cloud Function environment variables. Return the simplified flight array as JSON. In FlutterFlow's API Manager, add an API Group named FlightSearch pointing to your Cloud Function URL and add a call named getFlights with the required parameters.

Create a trips Firestore collection with documents: userId, destination (name and placeId), startDate, endDate, coverImageUrl, createdAt, status (planning / booked / completed). Under each trip, create a days subcollection: dayNumber (Integer), date (Timestamp). Under each day, create an activities subcollection: placeId, name, address, lat, lng, startTime, endTime, category (flight / hotel / activity / restaurant / transport), notes, orderIndex. In FlutterFlow, add these collections in the Firestore panel with appropriate field types. This nested structure lets you query all activities for a specific day efficiently without loading the entire trip.

Create a TripDetail page with a Page Parameter tripId (String). Add a Backend Query loading the trip document. Create a TabBar where each tab corresponds to a day of the trip — generate tabs dynamically by calculating the number of days between startDate and endDate. For each tab, add a Backend Query loading the activities subcollection for that day ordered by orderIndex. Display activities in a ReorderableListView (or standard ListView with up/down buttons to adjust orderIndex). Each activity row shows a category icon, name, time range, and a Delete button. Add an Add Activity button at the bottom of each day's tab that opens a Bottom Sheet with a Places search to find and add new activities.

Create a TripMap page that loads all activities across all days for the trip. Add a FlutterFlowGoogleMap widget. Use a Custom Function to build a list of MapMarker objects from the activities — each marker gets the activity's lat/lng, a color based on day number (day 1 = blue, day 2 = green, day 3 = orange), and a label showing the activity name. Set the map's initial camera to the destination's coordinates (stored on the trip document). Add a marker tap handler that opens a Bottom Sheet showing the activity details: name, address, category, and a button to open directions in Google Maps via Launch URL to https://maps.google.com/?q={lat},{lng}.