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:
The following can cause performance issues and should be avoided:
Firestore Queries on a Column/Row if there are more than 15 documents
ShrinkWrap on a ListView that has Firestore Queries
Nested queries where you load multiple documents for an item in a list (for example querying and loading comments inside of an item of a feed which itself is a query)
Resizing your images on upload. You can for e.g. set the max width to 1000 on upload
Showing field data in Text widget
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
Showing field data in AudioPlayer
First, ensure you can access the Firestore document. To access the single Firestore document, find the instruction here.
A record/document must contain a field with the Audio Path data type. See the example below:
Field with Audio Path Data Type
To play audio from the URL stored in your Firestore document:
Select the AudioPlayer Widget from the widget tree or the canvas area.
Move to the properties panel 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 audio URL path.