Music And Video Player Using Flutter

Suraj Kala
3 min readDec 8, 2020

--

Task 1: Flutter App Development

1.Create a flutter app.

2. Use assets (. audios and videos).

3. App will have to play these audios and videos from Assets.

4. Also add Features to play audio and video from the Internet(Network).

5. Create buttons like play, pause, and stop for audio and video.

Now, Let's make an App

After discovering the Flutter SDK doesn’t have support for playing audio/music I searched through all of the available packages which were music-related on pub.dev and finalized the audio player's package for audio and flick_video_payer for video playback.

Step 1: Update the pubspec.yaml file with required dependencies.

Step 2: Make the main.dart file which will be the entry point for the app.

Here I have used a stateless widget with a build widget to enable the hot reload functionality of the app.

Step 3: Make home.dart file which will return a material App.

Home.dart returns the material app, which has a home set as default Tab controller for Tab functionality, then the child of the DefaultTabController widget is Scaffold which has an App bar widget with the black background color.

The body of the scaffold includes 2 tabs for offline and online music and video functionality.

Now for the Music player.

AudioCache

In order to play Local Assets, you must use the AudioCache class.

Flutter does not provide an easy way to play audio on your assets, but this class helps a lot. It actually copies the asset to a temporary folder in the device, where it is then played as a Local File.

It works as a cache because it keeps track of the copied files so that you can replay them without delay.

You can find the full documentation for this class here.

AudioPlayer audioPlayer = new AudioPlayer();
var ap = new AudioCache(fixedPlayer: audioPlayer);

Then I made an instance of the audio player and passed this as a fixed player in AudioCache which will help us to access all the functionality like play, pause, and stop from AudioCache Instance.

Now for playing music online it includes a function playonline .

playonline() async {
ap.clearCache();await audioPlayer.play('https://raw.githubusercontent.com/sparsh308/sample_musics/master/Alan%20Walker%20-%20Faded.mp3');
}

Now for playing music offline it includes a function PlayOffline.

playlocal() {
ap.clearCache();
ap.play('note.wav');
}

for Pause and stop functionality.

pause() {
audioPlayer.pause();
}
stop() {
audioPlayer.stop();
}

Video player Setup

Thank You.

--

--

Suraj Kala
Suraj Kala

No responses yet