diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/media-display-overview.svg b/docs/resources/ui/widgets/built-in-widgets/imgs/media-display-overview.svg new file mode 100644 index 00000000..436dccbd --- /dev/null +++ b/docs/resources/ui/widgets/built-in-widgets/imgs/media-display-overview.svg @@ -0,0 +1,78 @@ + + How the MediaDisplay widget displays images and videos + A variable containing a media URL is connected to Media Path through Set from Variable. MediaDisplay detects the media type and displays either an image or a video. + + + + How MediaDisplay chooses what to show + A media URL flows from a variable into the widget + + + + + + + Variable source + + DATABASE FIELD + + + record.media_url + + API RESPONSE + + + response.mediaPath + + APP OR PAGE STATE + + + selectedMedia + + + + + SET VARIABLE + + + + + + + + MediaDisplay + + MEDIA PATH + + Set from Variable + record.media_url + + + + Media Path must come from a variable + + + + + + + + + + + + Image + + DISPLAYED + + + + + + + + + Video + + DISPLAYED + diff --git a/docs/resources/ui/widgets/built-in-widgets/media-display.md b/docs/resources/ui/widgets/built-in-widgets/media-display.md index a1b5763e..0e3118f2 100644 --- a/docs/resources/ui/widgets/built-in-widgets/media-display.md +++ b/docs/resources/ui/widgets/built-in-widgets/media-display.md @@ -3,55 +3,33 @@ title: MediaDisplay slug: media-display tags: [Components, Base Elements] keywords: [Media, Image, Video, Widget, Base Elements] -description: Learn how to add MediaDisplay widget in your FlutterFlow app. +description: Learn how to add and customize a MediaDisplay widget in your FlutterFlow app. --- + # 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](../../widgets/composing-widgets/list-grid.md#listview-widget) for displaying activity feeds or [GridView](../../widgets/composing-widgets/list-grid.md#gridview-widget) for presenting photos and videos together. +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. -## Adding MediaDisplay widget +For example, you can add it to a [ListView](../../widgets/composing-widgets/list-grid.md#listview-widget) to create an activity feed or to a [GridView](../../widgets/composing-widgets/list-grid.md#gridview-widget) to show images 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. +![A variable supplies the media URL to MediaDisplay, which detects whether to display an image or video.](imgs/media-display-overview.svg) -
- -
-

+## Adding a MediaDisplay Widget -The steps to add and use the MediaDisplay are as follows: +1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette.md) and add the **MediaDisplay** widget from **Base Elements**. +2. Select the widget and open the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel). +3. Under **Media Path**, select **Set from Variable**, then choose the variable that contains the image or video URL. -1. Add the **MediaDisplay** widget from the **Base Elements** tab and drop it inside the **ListView**. +The following walkthrough demonstrates how to add and configure the widget:
-
-

-2. Create a collection and add data with some image and video URLs. -3. Query a collection to get a list of documents from the Firestore collection and show them in the ListView. -4. 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. +### 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 -You can customize the appearance and behavior of the widget using the various properties available under the properties panel. +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](../../widgets/basic-widgets/image.md#common-image-properties) for details. -### Customizing Image +### Customizing Videos -To customize the widget when image is displayed, refer [here](../../widgets/basic-widgets/image.md#common-image-properties). +When **Media Path** points to a video, use the video settings to control playback and appearance. See [VideoPlayer](../../../../ff-concepts/file-handling/displaying-media.md#videoplayer) for details. -### Customizing Video +## Best Practices -To customize the widget when video is displayed, refer [here](../../../../ff-concepts/file-handling/displaying-media.md#videoplayer). \ No newline at end of file +- 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.