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).

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

The steps to add and use the MediaDisplay are as follows:

1. Building UI

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.

2. Adding photos and videos to the collection

To add and display data from Firestore, ensure you incorporate all the mentioned prerequisites.

Be familiar with Structuring the Firebase Database.
Complete all steps in the Firebase Setup section for your project.
Create a Collection with the schema that contains a field with an Image Path data type.
Add Data to the Collection with some image and video URLs.

Your collection should look like the following:

3. Querying a collection on a ListView

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.

4. Showing data in UI elements

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)
1. Select the source as [collection_name] Document. This is displayed only after querying a collection.
2. Select the field that holds the URL path from the Available Options list.