How to Use FlutterFlow Data Binding to Connect UI to Data

Data binding begins with a data source. The most common source is a Backend Query — a database read operation attached to a widget or page. To add one: select the page (click the page name in the widget tree, not a widget on the page) → in the Properties Panel on the right, scroll to Backend Query → click Add Query. Choose Firestore (or Supabase if connected) → select your collection → set Query Type to List of Documents if you want multiple records, or Single Document for one record. Set your filters, ordering, and limit. Click Confirm. The Backend Query is now attached to the page — its result is available to every widget that is a descendant of the page in the widget tree. This is the core data scoping rule: Backend Query results flow DOWNWARD in the widget tree. A query on the page is available to all widgets on that page. A query on a Column is only available to widgets inside that Column. A query on a ListView is only available inside the ListView's child template. Understanding this hierarchy prevents the most common data binding errors.

With a Backend Query in place, you can bind any widget property to the query result. Select a Text widget on the page. In the Properties Panel → Text → click the orange lightning bolt icon (or the Set from Variable option) next to the text value. This opens the Variable Picker. Under Source, select Backend Query Record → your collection name → select the field you want (e.g., title, name, email). The text widget now displays the value of that field from the query result. The orange bolt icon appears on properties that are currently bound to a variable — static values show a plain text input. You can bind almost every widget property: Text value, Image URL (network image path), Color (using a Hex Code stored in Firestore), Visibility (a Boolean field), Width, Height, Padding. Try binding an Image widget's Network Path to a field storing an image URL — click the image widget → Network Image → Set from Variable → Backend Query → your imageUrl field. The image now loads the URL stored in your database.

When your Backend Query returns a list (Query Type: List of Documents), you need to render one child widget per item in the list. The Generate Dynamic Children feature handles this. First add a ListView widget to your page (not a Column — ListView handles scrolling and is the correct choice for database-backed lists). Select the ListView. In Properties Panel, click Generate Dynamic Children. The picker asks: what list should generate the children? Select Backend Query Result → your collection → this creates one child widget per document. Now select the auto-generated child Column inside the ListView. Inside this child Column, add a Text widget and an Image widget. When you use Set from Variable on these child widgets, the Variable Picker shows the fields for a single list item — e.g., 'Current Document in List'. Select Current Document in List → title for the Text, Current Document in List → imageUrl for the Image. FlutterFlow will render one Card per document, automatically populating each with that document's data. The ListView scrolls as needed and FlutterFlow adds pagination support through Backend Query limit and loadMore settings.

Page State variables store temporary data that exists only while the user is on that page — selected filter, toggle state, counter value, selected item from a list. They are not stored in the database. To add one: select the page → Properties Panel → State Variables → Add Field. Name it (e.g., selectedTab, isFilterOpen, selectedItemId) and choose a type (String, Integer, Boolean, Document Reference, etc.). Give it an initial value. Now you can bind widget properties to Page State: click a widget property → Set from Variable → Page State → your variable name. To update Page State: add an Action to a button → Update Page State → select the variable → set a new value. Example: a ChoiceChips filter widget with three options (All, Active, Inactive). On selection change → Update Page State selectedStatus = selected chip value. The Backend Query on the page has a filter: status == selectedStatus Page State variable. When the user taps a chip, the Backend Query re-runs with the new filter, and the ListView updates — all without any server-side code.

1// Page State variables for a filtered product listing page
2// Add these in Properties Panel → State Variables:
3//
4// selectedCategory: String   Initial: 'All'
5// isLoading: Boolean         Initial: false
6// selectedProductId: String  Initial: ''
7// sortOrder: String          Initial: 'newest'
8//
9// Backend Query on the page:
10// Collection: products
11// Filter: IF selectedCategory != 'All'
12//           THEN category == selectedCategory (Page State)
13// OrderBy: createdAt Descending (when sortOrder == 'newest')
14//          price Ascending (when sortOrder == 'price_asc')
15// Note: use Conditional Value for dynamic orderBy:
16//   if sortOrder == 'newest' → createdAt
17//   else → price
18//
19// ChoiceChips binding:
20//   Options: ['All', 'Electronics', 'Clothing', 'Books']
21//   Initial Selected: selectedCategory (Page State)
22//   On Selection Change → Update Page State selectedCategory = selectedOption

Conditional Value lets you return different data based on a condition — it is a ternary expression you build visually in FlutterFlow without writing code. Click a widget property → Set from Variable → Conditional Value. Set: if [condition] → value A, else → value B. Example: a status badge on an order card. Color: if orderStatus == 'delivered' → Color(0xFF4CAF50) green, else → Color(0xFFFF9800) orange. Text: if orderStatus == 'pending' → 'Awaiting payment', else if orderStatus == 'shipped' → 'On the way', else → 'Delivered'. App State variables work like Page State but persist across all pages and remain as long as the app is running. Add App State variables: Settings → App State → Add Field. Common uses: current user's cart items (List of JSON), notification count (Integer), selected theme (String). Bind any widget to App State the same way as Page State — Set from Variable → App State → field name. Update App State with an Action: Update App State. A common pattern: when the user adds an item to their cart on a ProductDetail page, Update App State cartCount += 1, and the cart icon in the AppBar shows a Badge bound to App State cartCount.

FlutterFlow Components are reusable widget groups — a ProductCard, a UserAvatar, a NotificationItem. When you create a Component and place it on multiple pages, each instance needs different data. Component Parameters let the parent pass data down to the component. To add a parameter: open the Component → Properties Panel → Parameters → Add Parameter. Name it (productName, imageUrl, price) and choose a type. Inside the component, bind the Text widget to Component Parameters → productName. Now on any page where you use this Component, you see a parameter input area in the Properties Panel: set productName = Current Document in List → title. Each instance of the component displays different data from the list. This is the correct way to build list items — create a Component with parameters, place it as the Generate Dynamic Children template, and pass list item fields as parameters. Components also accept Document Reference parameters: pass the entire document reference to the component, then inside the component run a separate Backend Query using that reference to fetch the full document.