Building Real Web Apps using Google AI Studio

 I would like to watch this later.

Display Firebase & Collection Data in FlutterFlow with ListView

Passing a document reference from a ListView to a Details page is the standard, most efficient way to handle "Read" operations in FlutterFlow when using Firebase. Instead of passing every single field (like name, price, etc.) individually, you pass a single Document Reference (ID), and the details page uses that reference to fetch the latest data.

Here is exactly how to set this up for your courses collection.

---

Step 1: Set up the Details Page Parameter

Before the list page can send the data, the details page needs a "mailbox" to receive it.

1. Navigate to your Course Details Page.
2. On the right-side properties panel, click on Page Parameters (top icon) and click + Add Parameter.
3. Configure the parameter:

• Parameter Name: courseRef
• Type: Doc Reference
• Collection: courses

4. Click Confirm.

---

Step 2: Set up the Document Query on the Details Page

Now that the details page has the reference, it needs to use it to read the course fields (course, description, hours, price).

1. Select the outermost widget of your details page (usually the Page or Scaffold widget).
2. Go to the Backend Query tab on the right panel.
3. Click Add Query and set:

• Query Type: Document from Reference
• Collection: courses
• Source: Select your page parameter courseRef.

4. Click Save.

💡 Now, any widget inside this page can access the specific course's fields directly from this document query.

---

Step 3: Pass the Reference from the List Page

Next, configure the trigger on your main list page so it actually sends the reference when a user taps a course.

1. Go to your Courses List Page and locate your ListView (which should already be querying the courses collection).
2. Select the widget representing the row or card (e.g., a Container, ListTile, or Card) inside the ListView.
3. Open the Action Flow Editor from the right panel.
4. Add a On Tap action:

• Action Type: Maps To
• Destination: Select your Course Details Page.

5. Under the destination dropdown, an In Action Parameters section will appear, listing your courseRef parameter. Click Pass.
6. For the value, select the courses Document (from your ListView row query) and choose Reference (or id).

---

Step 4: Display the Data on the Details Page

The pipeline is complete. The final step is binding your UI text elements on the details page to the Firebase data.

1. Select the Text widget meant for the course title.
2. Click the Set from Variable icon (orange button in the properties panel).
3. Select your courses Document (fetched via the page-level query from Step 2).
4. Choose the course field.
5. Repeat this exact process for the remaining fields:

• Description Text: Bind to description.
• Hours Text: Bind to hours (format as a number or string as needed).
• Price Text: Bind to price (you can use FlutterFlow's Number Format options here to display it automatically as currency, e.g., $10.00).

Quick Architecture Check

​

[ List Page: ListView Query ]
│
(User Taps Card) ──> Action: Navigate To (Passes course Document Reference)
│
▼
[ Details Page: Receives courseRef Parameter ]
│
└──> Document from Reference Query ──> Displays fields (course, price, etc.)

This workflow ensures that if a course's price or description changes in your Firebase database while the user is navigating, the details page will always show the most up-to-date information.

The following video tutorial is very useful.