Audio Player in Flutter Avatar

Audio Player in Flutter:Music can inspire and motivate us, it makes every person feel enthusiastic and relax. In this article, we will explain how to build a Music Player application step by step with some basic functionalities like pause, play, and seek in Flutter from a music URL. Flutter is an open-source framework developed and support by Google to build and deploy hybrid applications easily.

Follow these steps to create a brand new project to make building the app.

  • Create and name a folder of your choice.
  • Open VS Code and open the newly created folder in it.
  • Open the command palette by pressing CTRL + SHIFT + P and type Flutter. Choose Flutter: New Project from the listed options.
Step-by-Step Implementation
Step 1:

After the initial setup of the project,

Open main.dart file from the lib folder.

Step 2:

Add the following required packages in the pubspec.yaml file just below the dependencies section which we are going to use in our app.

Step 3:

Create a new file named player_screen.dart in the lib folder.

Step 4:

Import the material file using the following statement in the newly create file.

import 'package:flutter/material.dart';

Import the below files for the working of the application.

Step 5:

Open the AndroidManifest.xml file which is available under the android/app/src/main folder.

Add the following line above the <application> tag to give the app internet permission for loading music.

Step 6:

Open application-level build.gradle file which is available under the android/app folder and change the minSdkVersion to 21.

Step 7:

Create a StateFul Widget named PlayerScreen in the player_screen.dart file.

Step 8:

Get an audio file URL that you want to play in the app. Ensure that the URL contains a valid music extension format like mp3. Also, get an image URL for showing the thumbnail image of the song that is being play.

Step 9:

Add the following Dart code into the Stateful Widget above the build method. Add requires URLs.

  • loadMusic() function is used to load the specified music file from the internet.
  • playMusic() function is used to play the music.
  • pauseMusic() function is used to pause the music.

Step 10:

Now we will design the UI of the music player. Here are the steps in designing each Widget. The equivalent Dart code is mentioned below the steps.

  • An AppBar is add with the titleĀ Music Player.
  • A Column Widget is add and under children below widgets is add.
  • A Network Image to load the thumbnail image mention from the URL .
  • Below it after a Spacer, a ProgressBar is add to show the music progress and use it as a slider for seeking forward and backward.
  • ProgressBar is wrap with StreamBuilder to get stream updates from the music player and update the current progress of music play.
  • A Row Widget is take and the following children are add to it.
  • An IconButton is add in the middle of the row for Pausing/Playing the music.
  • Two Seek buttons are add at both sides of the Pause button to seek backward and forward. Currently, music is see for 10 seconds, you can update it as per your preference.

Full Code:Audio Player in Flutter

Audio Player in Flutter

For more: To know about Webview in Flutter

Tagged in : Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts