Simple Audio & Video Player using Flutter

‼️ *Task1: Flutter App Development*‼️

1.Create a flutter app.

2. Use assets (eg. 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.

In this article, I am going to show how to create a “Simple Audio & video Player using Flutter”. This audio player has the functionality of playing audio from a local path and also has the capability of playing audio online through the Github Repo.

First, we start by creating an app through the command line. We will create our app inside the projects folder which is inside the Flutter folder. We have to go inside the projects folder through the command line.

flutter create {app name}

This is the command we use for creating an app through the command line. In my case, I have created an app by the name ‘Task1flutter_app’.

After this, we will load our app folder in VS code. Now, we have to install some packages inside ‘pubspec.yaml’ file because by default flutter SDK doesn't have support for playing audio/music. To install any packages just add package name and version of that package and then save it. Flutter will automatically install it. After installation restart your IDE in my case it is Visual Studio Code.

This app uses audio player package to play files and file_picker to pick audio files from the local path and url_launcher for launching URL through mobile app and video player for accessing video.

Now, Let's start making our App.

We will start by importing the packages that we have installed. I have created the ‘HTTP’ method to launch some URL. We have used the ‘async’ keyword. This is just a way of telling the dart that my plan is to use ‘await’ keyword there. We have used ‘await’ keyword just before the function that needs to wait for and if there is some error in URL it will through an error. We have created this ‘HTTP’ which is to be used for redirecting you to the GitHub in Google play store when you click the play button. We have created two icons ‘play icon’ and ‘pause icon’ and did a few customization. We will use this icons 'play and pause icons’ under the widgets of row under card.

Here I am creating a Stateless Widget because the data inside the class or this Widget Tree need not to be changed based on the older state or current state and accordingly the Widgets need not to be displayed. Further, I have created the appbar and did few customizations there. Then I have created a Scaffold Widget which would provide us the basic page layout for our app.

Now we have used the Audio cache library to pick the audio file from the local path when pressed. To make onpressed() functional we have created a string filepath that will use the file picker dependency to pick the file from the local path. So, we have used await keyword here and since we have used await keyword here we need to use ‘async’ keyword here. Further, for the body part of the app, We have used a container widget. To use multiple widgets inside the container, we have used children widgets and these widgets will be added in a column in the body through column class. Further, we did a few customizations in the container widget.

Now we used card class, A widget that clips its child using a rounded rectangle. we have used borderRaidus(The border radius of the rounded corners) and then we have used child widget for loading the image through URL and did few customizations.

Now we have added multiple texts in column widget. Below texts, we have used a slider widget. After that, we have created a Row widget under which I have created few icons(pause, play, and stop)in Row widget and using ‘MainAxisAlignment.spacearound’ for space between icons.

In starting lines of our code we have created the Audioplayer object which has methods like play, pause, stop, resume which I need to use in my app. I have declared isPlaying a boolean type of variable that I am going to use for storing the state, that the music is playing or not, and accordingly, I will display the Widgets.

I can also play video form our local PC and with not more than 40 lines. The above code is the example of that. For playing video we have to import video_player library then we have to draw a list and then we have to put videos one by one using video player library.

This above block of code use for playing Video form internet. In my case i upload on Github and then i access form there.

The output of the app is below.

For video and for code access below link.