FlutterFlow Docs
Search…
⌃K

AudioPlayer

The AudioPlayer widget plays audio from uploaded assets or the URL link.
AudioPlayer

Adding AudioPlayer to your project

Here's how you can add the AudioPlayer widget to your project:
  • Drag the AudioPlayer widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
  • Find the Title property and enter the value to display the audio title. You can also set this from the variable such as the local state variable, API response variable, Firestore document, and more. To do so, click on the Set from Variable.
  • Find the Path property and enter the URL for the new audio file.
By default, every AudioPlayer widget added to the project will show sample audio from the internet.
Adding AudioPlayer

Changing audio type

By default, the widget is set to play audio from the internet. However, you can change this to use the audio uploaded directly to your app.
Here's how you can change the audio type:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
  • Find the Audio Type dropdown and select Asset.
  • Now, find the Asset Audio property, click the Upload Audio button, select the audio and upload it.
Changing audio type
Once you upload the audio, you can use it throughout your app. You can manage your uploaded audios with the Project Media Asset Manager.
To use the uploaded audio:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
  • Find the Audio Type dropdown and select Asset.
  • Click on No asset select (inside the dropdown) and choose the audio.
Using uploaded audio

Playing audio from Firestore Data

To play an audio file from the Firestore data, ensure you:

Customization

You can customize the appearance of this widget using the various properties available under the properties panel.

Changing colors

To change the audio tile colors:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Audio Player Properties section.
  • To change the background color of the tile, Find the Fill Color property click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
  • Similarly, you can change the Playback Button Color (play and pause button) and Active Track Color (the bar color that shows the progress of the currently playing audio).
Changing colors

Set color dynamically

See how to set a color from variable to any color property of this widget.

Changing elevation

To change the elevation (depth or Z-axis) of the audio tile:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Audio Player Properties section.
  • Find the Elevation input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, whereas the 0 value removes the shadow.
Changing elevation

Styling title text

To change the title text style:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Title Text Style section.
  • Find the Theme Text Style property and change the style as per instructions here.
Styling title text

Styling playback duration text

To change the playback duration text style:
  • Select the AudioPlayer widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Playback Duration Text Style section.
  • Find the Theme Text Style property and change the style as per instructions here.
Styling playback duration text

Show/Hide widget

Please find the instructions to show/hide the widget here.