MediaDisplay
The MediaDisplay widget shows the image or video from the URL link. You could use this widget inside the scrollable widgets such as ListView (to display activity feeds) and GridView (to show all photos and videos together).

MediaDisplay widget
Let's build an example of using the MediaDisplay widget inside the ListView and display the photos and videos from the Firestore database.

MediaDisplay widget in a ListView
The steps to add and use the MediaDisplay are as follows:
The UI consists of the ListView and MediaDisplay widgets. Here is how you add it:
- First, remove the existing Column widget and drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Drag the MediaDisplay widget from the Base Elements tab and drop it inside the ListView. Change its width and height if you wish to.

Building UI
To add and display data from Firestore, ensure you incorporate all the mentioned prerequisites.
Your collection should look like the following:

collection schema

collection data
In this step, you will query a collection to get a list of documents from the Firestore collection and show them in the ListView.
To query a collection on a ListView:
- Select the ListView widget from the widget tree or the canvas area.
- Click on the Backend Query tab (on the right side of your screen).
- Set the Query Type to Query Collection.
- Scroll down to find the Collection dropdown and change it to your collection.
- Set the Query Type to List of Documents.
- Click Confirm.

Querying a collection on a ListView
To show an image and video from the URL stored in your Firestore document:
- Select the MediaDisplay Widget from the widget tree or the canvas area.
- Move to the properties panel and scroll down to the Media Path property.
- Click on the Set from Variable text. (This will open a new popup)
- Select the source as [collection_name] Document. This is displayed only after querying a collection.
- Select the field that holds the URL path from the Available Options list.

Showing data in UI elements
You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
Last modified 10mo ago