Flutter Music And Video Player.

Sparsh
3 min readAug 4, 2020

Task 1: Flutter App Development

1.Create a flutter app.

2. Use assets (. audios and videos).

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

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

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

Link for Github : https://github.com/sparsh308/simple_flutter_Music_and_video_app

Now, Lets make a 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 finalised audioplayers package for audio and flick_video_payer for video playback.

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

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

Here i have used stateless widget with build widget to enable 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 App bar widget with 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 audio player, and passed this as a fixedPlayer 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

Note : Online music and video assets are deployed on Git hub And used for educational purposes only.

Future scope

this app will be the addition of Youtube player functionality with a list view of songs available in phone memeory and and server.

Thank you . l

--

--