Skip to main content

MediaDisplay

The MediaDisplay widget in FlutterFlow automatically detects the type of media fetched from a URL and adjusts the widget accordingly. For instance, if the URL returns an image, the widget will behave as an Image widget.

This versatility allows you to easily present various types of media within your app. For example, it can be integrated into scrollable widgets like ListView for displaying activity feeds or GridView for presenting photos and videos together.

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.

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

  1. Add the MediaDisplay widget from the Base Elements tab and drop it inside the ListView.

  1. Create a collection and add data with some image and video URLs.
  2. Query a collection to get a list of documents from the Firestore collection and show them in the ListView.
  3. To display media inside the widget, move to the properties panel > Media Path > Set from Variable menu. Select the source as [collection_name] Document and select the field that holds the URL path from the Available Options list.

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 widget when image is displayed, refer here.

Customizing Video​

To customize the widget when video is displayed, refer here.