You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ff-concepts/file-handling/displaying-media.md
+9-4Lines changed: 9 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,7 @@ keywords: [Media Files, Media Management, Assets, Network, Display Media, Media
11
11
12
12
Displaying media efficiently is crucial for enhancing user experience in your FlutterFlow app. Whether you're working with images, audio, video, or PDFs, FlutterFlow provides flexible options for integrating and managing media. This guide covers how to set media sources, customize playback settings, and implement best practices like lazy loading, caching, and BlurHash to optimize performance.
13
13
14
+
## Media Types
14
15
To display media on widgets, navigate to the **Properties Panel** and specify the media source under the **[Media] Type** option (e.g., ImageType, AudioType, VideoType). Here are the available options:
15
16
16
17
### Network
@@ -39,13 +40,17 @@ Use this option to upload media from your computer or select previously uploaded
39
40
40
41
### Uploaded File
41
42
42
-
Selecting this option allows for the dynamic handling of media within your app, accommodating media uploaded by users during app usage. For example, if you simply wish to display an image within your app without uploading it anywhere, or if you'd like to preview the image before sending it to your server through an API, you can achieve this by setting the source as**Widget State -> Uploaded Local File**.
43
+
You can access media files within your app without uploading them anywhere. For example, if you'd like to preview an image before sending it to cloud storage, you can do so by setting the source to**Widget State -> Uploaded Local File**.
The **AudioPlayer** widget allows you to integrate audio playback into your apps. You can play audio from both uploaded assets and external URLs. Refer to the [**Displaying Media**](#) section for more details on accessing media.
49
+
The **AudioPlayer** widget allows you to integrate audio playback into your apps. You can play audio from both uploaded assets and external URLs. Refer to the [**Displaying Media**](#media-types) section for more details on accessing media.
50
+
51
+
:::tip[Generated Code]
52
+
The AudioPlayer in FlutterFlow is powered by the [**assets_audio_player**](https://pub.dev/packages/assets_audio_player) package for mobile and [**assets_audio_player_web**](https://pub.dev/packages/assets_audio_player_web) for web.
53
+
:::
49
54
50
55
### Customization Options
51
56
@@ -177,7 +182,7 @@ This action only works if you have added a [**Play Sound**](#play-sound-action)
177
182
178
183
## VideoPlayer
179
184
180
-
The **VideoPlayer** widget is used to show a video from uploaded assets or the URL link. The VideoPlayer widget can play various video formats such as MP4, MOV, WAV, MPEG, and JPEG motion photos. Refer to the [**Displaying Media**](#) section for more details on accessing media.
185
+
The **VideoPlayer** widget is used to show a video from uploaded assets or the URL link. The VideoPlayer widget can play various video formats such as MP4, MOV, WAV, MPEG, and JPEG motion photos. Refer to the [**Displaying Media**](#media-types) section for more details on accessing media.
181
186
182
187
### Customization Options
183
188
@@ -207,7 +212,7 @@ The **YouTubePlayer** widget in FlutterFlow allows you to seamlessly integrate
207
212
208
213
## PdfViewer
209
214
210
-
In FlutterFlow, the **PdfViewer** widget enables you to display PDF files within your app, supporting both network URLs and locally uploaded assets. Refer to the [**Displaying Media**](#) section for more details.
215
+
In FlutterFlow, the **PdfViewer** widget enables you to display PDF files within your app, supporting both network URLs and locally uploaded assets. Refer to the [**Displaying Media**](#media-types) section for more details.
0 commit comments