# MediaDisplay

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/resources/ui/widgets/built-in-widgets/media-display

Learn how to add and customize a MediaDisplay widget in your FlutterFlow Studio app.

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](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/list-grid#listview-widget) to create an activity feed or to a [GridView](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/list-grid#gridview-widget) to show images and videos together.

A variable supplies the media URL to MediaDisplay, which detects whether to display an image or video.

## Adding a MediaDisplay Widget

1. Open the [Widget Palette](https://docs.flutterflow.io/flutterflow-ui/widget-palette) and add the **MediaDisplay** widget from **Base Elements**.
2. Select the widget and open the [Properties Panel](https://docs.flutterflow.io/flutterflow-ui/builder#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:

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe
        src="https://demo.arcade.software/yDefo5KtJnxvDotpOSbn?embed&show_copy_link=true"
        title="Add and configure a MediaDisplay widget"
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>

### 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](https://docs.flutterflow.io/resources/ui/widgets/image#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](https://docs.flutterflow.io/concepts/file-handling/displaying-media#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.