How to Build Music Player Application Using Flutter?
Last Updated :
31 Jul, 2023
Music can inspire and motivate us, it makes every person feel enthusiastic and relaxed. 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 supported by Google to build and deploy hybrid applications easily.
Tools Required
To build this app, you require the following tools on your machine :
- Visual Studio Code (Recommended IDE)
- Android Emulator / Original Device for testing.
- Flutter SDK
- Flutter Plugin for VS Code.
Create a New Project
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.

- Select Application from the drop down and it will open in the current folder you are in.

- Now name your app as per your choice, We are naming mine with musicplayer (Use lowercase convention).
Step-by-Step Implementation
Step 1:
After the initial setup of the project, you get a folder structure like this.

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.
- just_audio: (For audio streaming)
- audio_video_progress_bar: (For progress bar UI)

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 created file.
import 'package:flutter/material.dart';
Import the below files for the working of the application.
import 'package:just_audio/just_audio.dart';
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
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.
<uses-permission android:name="android.permission.INTERNET" />
Step 6:
Open application-level build.gradle file which is available under the android/app folder and change the minSdkVersion to 21.
minSdkVersion 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 played.
Step 9:
Add the following Dart code into the Stateful Widget above the build method. Add required 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.
Dart
String musicUrl = ""; // Insert your music URL
String thumbnailImgUrl = ""; // Insert your thumbnail URL
var player = AudioPlayer();
bool loaded = false;
bool playing = false;
void loadMusic() async {
await player.setUrl(musicUrl);
setState(() {
loaded = true;
});
}
void playMusic() async {
setState(() {
playing = true;
});
await player.play();
}
void pauseMusic() async {
setState(() {
playing = false;
});
await player.pause();
}
@override
void initState() {
loadMusic();
super.initState();
}
@override
void dispose() {
player.dispose();
super.dispose();
}