FlutterFlow Docs
Search…
⌃K

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

Adding 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:

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.
Building UI

2. Adding photos and videos to the collection

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

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.
Querying a collection on a ListView

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

Customizing

You can customize the appearance and behavior of the widget using the various properties available under the properties panel.

Customizing Image

To customize the image, please follow the instructions here.

Customizing Video

To customize the image, please follow the instructions here.

Show/hide widget

Please find the instructions to show/hide the widget here.
Last modified 4mo ago