Showing Data in UI Elements

This page guides on how to show the data retrieved from the Firestore and Supabase Database into the UI elements such as Text, TextField, Image, ListTile, etc.

Prerequisites

Ensure you have retrieved data from Firestore or Supabase.

The following can cause performance issues and should be avoided:

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. For example, set the max width to 1000 on upload.

To show data in the Text widget:

Select the Text widget, navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.
1. For Firebase, select Source as [collection_name] Document and Available Options to the field you wish to show.
2. For Supabase, select Source as [table_name] Row and Available Options to the Column you wish to show.
If you see Confirm button, click on it.

Showing field data in TextField

To show data in the TextField widget:

Select the TextField widget, navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.
If the data was queried on any widget or page, select Source as [collection_name] Document and Available Options to the field you wish to show.
To display data from the parameter, select the Source as the parameter name (that holds the document) and Document Properties to the field you wish to show.
If you see Confirm button, click on it.

Showing field data in Image

To show an image from the URL stored in your Firestore document:

Select the Image widget, move to the properties panel > path property, and click Set from Variable.
If the data was queried on any widget or page, select Source as [collection_name] Document and Available Options to the field that holds the image URL path.
To display data from the parameter, select the Source as the parameter name (that holds the document) and Document Properties to the field that has the image URL path.
If you see Confirm button, click on it.

Showing query data in ListTile (ListView)

To show data in the ListTile widget:

Select the ListTile widget, navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.
1. For Firebase, select Source as [collection_name] Document and Available Options to the field you wish to show.
2. For Supabase, select Source as [table_name] Row and Available Options to the Column you wish to show.
If you see Confirm button, click on it.

Showing List/Array field data in ListTile (ListView)

To show array data in the ListTile widget:

Select the widget (e.g., Text), navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.
Now select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
If you see Confirm button, click on it.

Showing field data in Expandable (ListView)

To show data in the Expandable widget:

Select the Expandable Widget from the widget tree or the canvas area.
Under the Header, select the Text widget, move to the properties panel and click on the Set from Variable text.
1. Select Source as [collection_name] Document and Available Options to the field you wish to show.
2. Click Confirm.
Similarly, set the field data for the other UI elements under the Collapsed View and Expanded View.

Showing field data in YoutubePlayer/VideoPlayer

To show the video from the URL stored in your Firestore document:

Select the YoutubePlayer or VideoPlayer widget, move to the properties panel > path property, and click Set from Variable.
If the data was queried on any widget or page, select Source as [collection_name] Document and Available Options to the field that holds the video URL path.
To display data from the parameter, select the Source as the parameter name (that holds the document) and Document Properties to the field with the video URL path.
If you see Confirm button, click on it.

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:

To play audio from the URL stored in your Firestore document:

Select the AudioPlayer widget, move to the properties panel > path property, and click Set from Variable.
If the data was queried on any widget or page, select Source as [collection_name] Document and Available Options to the field that holds the audio URL path.
To display data from the parameter, select the Source as the parameter name (that holds the document) and Document Properties to the field that has the audio URL path.
If you see Confirm button, click on it.