Flutter Music and Video Player(Task 1)

Vaibhavnavani
3 min readDec 8, 2020

--

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.

Now let’s make the app

The flutter SDK doesn’t have the support for playing audio I searched for the packages in pub.dev (package website for flutter). I found “Assests” package for playing local or network audios.

Step 1: update the pubspec.yaml file with required dependencies. Refer to this package.

pubspec.yaml

Step 2: There is a file in lib folder main.dart which will be the entry point of the app. For enabling the hot reload functionality in flutter I have used the Stateless widget.

main.dart

Step 3: Return type of the main.dart file will be material app.

For transitioning through different pages/screens in the app I have used the Route parameter instead of Home, body etc parameters. For smooth transition and back to the previous I have used Named Navigation.

As the initial Route is set to the Home.dart containing the MyHome() function. it will go to Home.dart and return the Scaffold on which we have build our first screen.

Home.dart and its output

Now for the music player.

I have build the music player that runs the music locally and from the network in the same screen. You can use Tab Functionality that comes with flutter.

For using the asset package first make the assets folder in the directory where the project is saved(like assets folder below the android folder on the left side).

Then after creating the folder, update in the pubspec.yaml file that you are going to use the audio or video from this folder.

pubspec.yaml
audio.dart containing Myaudio()

In order to play the audio locally we have to make ab object of AssetsAudioPlayer() class.

Then using different functions of AssetsAudioPlayer() class and associating them with different RaisedButtons we can create the different music player buttons for play, pause, stop.

play, pause and stop function of AssetsAudioPlayer() class

Now for playing the music online AssetsAudioPlayer() class has audio.Network(‘url’) function.

Playing the music from network

Video player setup

Homepage of Video Section

Using Assets

Video using Assets

Using Network

Video using Network

Note:- The video and audio are uploaded to the personal github account for the task.

Thank You.

--

--

No responses yet