FlutterFlow Docs
Search…
FlutterFlow Docs
Introduction
FlutterFlow Introduction
Project Dashboard
Navigation Menu
UI Builder
Build Your First App
Settings and Integrations
Change App & Package Name
General Settings
Project Setup
App Settings
In App Purchases & Subscriptions
Integrations
Building UI
UI & Layout 101
UI Elements / Widgets
Animations
Actions
Actions
Data and Backend
Firebase
Adding Indexes
Searching Data
Backend Query
API Calls
Local State
Showing Data in UI Elements
Customizing Your App 🖌️
Custom Functions
Custom Widgets
Custom Components
Custom Actions
Manage Custom Code In GitHub
Advanced Functionality 🤖
Conditional Visibility
Payments
Global Properties
Deep & Dynamic Linking
Deploying Your App 📱
Testing Your App
App Store Deployment with Codemagic
Google Play Store Deployment with Codemagic
Troubleshooting ❓
Basic Troubleshooting Guide
Collections & Indexes
Widgets
Gray Screen
Run Mode
Test Mode
APKs
GitHub
Testing Your App
Authentication
Content Manager
Push Notifications
Deployment & CodeMagic
Miscellaneous
Account & Billing ♟️
Account Management
Plans & Pricing
Subscriptions
Payments & Billing
Referral Program
Privacy And Terms Of Service
Miscellaneous 😃
Customer Support Policy
FlutterFlow Release Tracker
FlutterFlow Experts
Additional Resources To Get Help
Available Sample Apps
Design Resources
Application & Data Ownership
FlutterFlow Status - Is FlutterFlow Down?
Powered By
GitBook
Showing Data in UI Elements
This page describes how to show the data retrieved from your Firestore collection and document into the UI elements such as Text, TextField, Image, ListTile, etc.
Prerequisites
Before getting started with this section, ensure you:
Understand
structuring the Firebase Database
.
Completed all steps in the
Firebase Setup
section for your project.
Retrieved data
from either collection or document.
Showing field data in Text
To show data in the Text widget:
Select the
Text
Widget from the widget tree or from the canvas area.
Move to the property editor and scroll down to the
Text
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the source.
If the data was queried on ListView, select the
[collection] Record (from ListView)
.
For showing data queried on Page, select the
[collection] Record (from [pagename])
.
For showing data from the Parameter, select the
Parameter Name
which holds the record.
Under the
Available Options
, click on
Unset
and select the field that you wish to show.
Click
Save
.
Showing field data in Text
Showing field data in TextField
To show data in the TextField widget:
Select the
TextField
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
Initial Value
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the source.
For showing data queried on Page, select the
[collection] Record (from [pagename])
.
For showing data from the Parameter, select the
Parameter Name
which holds the record.
Under the
Available Options
, click on
Unset
and select the field that you wish to show.
Click
Save
.
Showing field data in TextField
Showing field data in Image
To show an image from the URL stored in your Firestore document:
Select the
Image
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
path
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the source.
For showing data queried on Page, select the
[collection] Record (from [pagename])
.
For showing data from the Parameter, select the
Parameter Name
which holds the record.
Under the
Available Options
, click on
Unset
and select the field that holds the image URL path.
Click
Save
.
Showing field data in Image
Showing field data in ListTile (ListView)
To show data in the ListTile widget:
Select the
ListTile
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
Text
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the
[collection] Record (from ListView)
from the list.
Under the
Available Options
, click on
Unset
and select the field that you wish to show.
Click
Save
.
Showing field data in ListTile (ListView)
Showing List/Array field data in ListTile (ListView)
To show array data in the ListTile widget:
Select the
ListTile
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
Text
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the
[variable name] [fieldname] (datatype)
from the list.
Under the
Available Options
, click on
Unset
and select the field that you wish to show.
Click
Save
.
Showing List/Array field data in ListTile (ListView)
Showing field data in Expandable (ListView)
To show data in the Expandable widget:
Select the
Expandable
Widget from the widget tree or from the canvas area.
Under the
Header
, select the
Text
widget, move to property editor and click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the
[collection] Record (from ListView)
from the list.
Under the
Available Options
, click on
Unset
and select the field that you wish to show.
Click
Save
.
Similarly, set the field data for the other UI elements under the
Collapsed View
and
Expanded View
.
Showing field data in Expandable (ListView)
Showing field data in YoutubePlayer
To show the video from the URL stored in your Firestore document:
Select the
YoutubePlayer
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
path
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the source.
For showing data queried on Page, select the
[collection] Record (from [pagename])
.
For showing data from the Parameter, select the
Parameter Name
which holds the record.
Under the
Available Options
, click on
Unset
and select the field that holds the video URL path.
Click
Save
.
Showing field data in YoutubePlayer
Showing field data in VideoPlayer
To show the video from the URL stored in your Firestore document:
Select the
VideoPlayer
Widget from the widget tree or from the canvas area.
Move to property editor and scroll down to the
path
property.
Click on the
Set from Variable
text. (This will open a new panel)
Find the
Source
dropdown, click on
unset
and select the source.
For showing data queried on Page, select the
[collection] Record (from [pagename])
.
For showing data from the Parameter, select the
Parameter Name
which holds the record.
Under the
Available Options
, click on
Unset
and select the field that holds the video URL path.
Click
Save
.
Showing field data in VideoPlayer
Data and Backend - Previous
Local State
Next - Customizing Your App 🖌️
Custom Functions
Last modified
1mo ago
Copy link
Contents
Showing field data in Text
Showing field data in TextField
Showing field data in Image
Showing field data in ListTile (ListView)
Showing List/Array field data in ListTile (ListView)
Showing field data in Expandable (ListView)
Showing field data in YoutubePlayer
Showing field data in VideoPlayer