Skip to main content

MediaDisplay

The MediaDisplay widget displays an image or video using a media URL supplied from a variable. It automatically detects the media type and uses the appropriate image or video behavior, making it useful when the same part of your app can contain either type of media.

For example, you can add it to a ListView to create an activity feed or to a GridView to show images and videos together.

Adding a MediaDisplay Widget​

  1. Open the Widget Palette and add the MediaDisplay widget from Base Elements.
  2. Select the widget and open the Properties Panel.
  3. Under Media Path, select Set from Variable, then choose the variable that contains the image or video URL.

The following walkthrough demonstrates how to add and configure the widget:

Using Dynamic Media​

You can set Media Path from a database field, API response, state variable, or another variable that contains a media URL. This is useful when each item in a repeating widget displays different media.

To display dynamic media in a ListView or GridView:

  1. Create a data field that stores the media URL for each record.
  2. Add a backend query to the ListView or GridView that returns those records.
  3. Place the MediaDisplay widget inside the repeating item.
  4. Select the MediaDisplay widget and choose Media Path > Set from Variable.
  5. Select the current record, then choose the field that contains its media URL.

Customizing​

The settings available for the MediaDisplay widget depend on the type of media it displays.

Customizing Images​

When Media Path points to an image, use the image settings to control its dimensions, fit, alignment, border, and other appearance options. See Common Image Properties for details.

Customizing Videos​

When Media Path points to a video, use the video settings to control playback and appearance. See VideoPlayer for details.

Best Practices​

  • Use consistent dimensions or aspect ratios when displaying mixed media in a list or grid.
  • Test the widget with every media type your data can provide.
  • Make sure dynamically supplied URLs are valid and accessible to your app's users.
  • Decide how the surrounding layout should handle an empty or invalid media path.
  • Test loading and scrolling performance when displaying many media items.