Step-by-Step Understanding of Data Connection in Flutterflow

6 min readFeb 12, 2025

The point of this article is to break the data handling in Flutterflow into the simplest steps, because I find the videos slightly too cumbersome. My info is based the Flutterflow video mentioned below, but even that beginner’s video makes the classic mistake of including extraneous details… which not only adds time but in effect hides the core elements of comprehension.

I won’t describe creating a database because there are already plenty of good explanations, and no matter which explanation you read or watch you still might have to connect the dots yourself :) .

Level 1, Just Connecting a Field

This section is based on this official Flutterflow tutorial video: https://www.youtube.com/watch?v=hkBWVwr7yXQ

This will show the simplest possible steps to clarify the mechanisms.

High-Level Summary (for reminding you later)

Add a container, and use Query Collection on it to get the table data into your instance.
Add a text item, and use Set From Variable to point to the specific data field.

Detailed Steps

Here’s my super-simple database, with two fields, “word” and “concept,” but all we’ll demonstrate is retrieving “word.”

Add a container object to your page, any object that can contain other objects. Although a column is shown in the FF video, “ListView” is more appropriate, and has features intended for data lists.
Select the ListView object and use Backend Query>Add Query>Query Collection>and choose your database collection name.

Then choose List of Documents for the Query Type.
Now add a text field inside the ListView:

Select the Text item and in the Properties panel click the orange Set From Variable button>choose your collection>choose your field (“word”):

Click the Test button and your list appears:

A Side Note on Flutterflow Complexity… Why Level 2 Is So Hard

I’m a newbie at FF but I see a theme. For something like data connection, FF’s user interface is not ‘discoverable’ at all. (Some use the word ‘intuitive’ but that’s the wrong expectation.) It seems that as with another system I learned to love, Justinmind simulation software, FF implements nearly the entire world of interaction and coding possibilities in a point-and-click interface. As such, it’s a LOT more intricate than Adalo, for instance, which I used… just long enough to conclude that Adalo simply can’t achieve what I believe to be the relatively simple coding goal I have in mind. So… I recommend you persevere with FF beyond your first few slip-and-falls as you climb its steep learning curve. And maybe in a few months they’ll improve its ‘progressive disclosure’ and add more automated steps for the simplest data flow.

Level 2, Passing a Record to Another Screen, and Displaying a Field

High-Level Summary (for reminding you later)

Perform the Level 1 procedure above to make a column or other container (with a Backend Query to your table), and a text item with Set From Variable pointing to a field in the table.
Sending page: in the navigation action for the text item, Define a Parameter. This takes you to the…
Receiving page: define it as a Document Reference parameter, citing your collection. This takes you to the…
Sending page: use the “Pass” button to configure what you’re passing as a “Reference,” again citing your collection.
Receiving page: on a container, define a DOCUMENT FROM REFERENCE query, using your passed parameter.
Then on the text field, use Set From Variable, and choose your collection, then the desired field.

Detailed Steps

Create a second page, such as “Item” (for one record at a time).
In the default column on the page, add a Text widget.
Back on the list page, select the first item in the list and create the navigation action: Actions tab > Define Action > On Tap>Navigate to: second page.
And the big step: in the Parameters section below the action, click +Define:

You’ll be taken to the destination page, your item page.
In the right-side panel, click Add Parameter.
In the Type field, select DocumentReference.
In the Collection Type field (is it really a ‘type’?!)… select your collection.
I’ve put in the parameter name “parW3DocRef” to help me understand later, what exactly I’m choosing to complete the configuration:

When you confirm you’ll be taken back to the list page, still on the item on which you placed the action.
In the Parameters section click the Pass button.
Your parameter (“parW3DocRef”) name will be autofilled. Click on it to configure what’s sent.
Set the value (of the parameter data being sent) to <your collection> “Reference.”

Go back to the item page. (Now we’ll do another query, but this time just for the one record that was clicked, not the whole table.)
On the column or other container, add a backkend query but this time make it a DOCUMENT FROM REFERENCE, and use your parameter (as the reference):

In the Widget Tree/scaffold panel on the left, observe which widget in your page has the orange query icon. Only from some context within this object can you retrieve the passed record:

Select the text field in the column and, click Set From Variable.
Select the collection and field. Make sure not to select the parameter itself (I think that just contains internal data, not your user data):

Run it and the data will be passed. Woohoo!

Level 3, CRUD: Create, Read, Update, and Deleting Data Records

I’ll be adding another section to this, to implement the full CRUD features, based on this video:

https://www.youtube.com/watch?v=ZSsg_EAaLJQ&t=3113s

Preview, Diagramatically

First let’s take a preview of the steps we’ll show in the demonstration:

As shown in the image, we’ll use one new page for Create, and another page that accomplishes Read/Update/Delete. Here’s a little more detail:

Script

<<<Incomplete. Just enough to plot out my Youtube video.>>>

As before I’ve got a very simple database:

First we’ll emphasize the point that “Create” has no dependencies on retrieving or passing data, just the existence of the DB by making a simple Create page:

Then we’ll make a list page, with a query on the column container, and Set From Variable on the text item (and set our Create button on the previous page to go to it):