A Simple Audio And Video Player App Using Flutter
Task Description
In this task, I’ve created an App that plays audio and video from assets as well as from the network using flutter.
Now Let’s move on to the task. In this task I’ll show you how to make simple Audio and Video Player Using Dart Language.
Pre-requisites
- Flutter Installed in our Base Operating System
- Dart SDK Installed
- Virtual Studio Code with Flutter and Dart Extensions Installed
- Android Studio to launch the emulator and we can use our mobile as well.
First, we will create the workspace for our app, using the pre-created test app which comes with the flutter software.
flutter create task1_appRunning the above command will create our environment followed by downloading all the environmental requirements for an app. Our main code will be in the main.dart file inside the lib folder. I will be creating the UI of the app using files written inside the UI folder of lib. The audio and video will be placed in a sub-folder named audios inside folder assets. The assets folder will also contain any image files if we use them like other assets. The following files will be used to create a GUI for this App.
1. Add the following dependencies to your pubspec.yaml file
After downloading our package we need to update the same in our pubspec.yaml file as demonstrated below
2. main.dart file
The main function acts as an entry point for the entire code.
run-app() method is used to run our entire code on the emulator. As we can see inside the run app method, MyApp has been passed to which the code of our home page has been passed corresponding to the ‘home’ key.
3. Creation of the First page
On the Homepage, respective icons have been created on the top of a background. Corresponding to each icon a button has been created which acts as a link to different pages. Let us have a look at the homepage for our reference. The entire code of the first page has been uploaded in my GitHub repo for your reference. we have to import the files of all the pages which are linked to our homepage.
This whole code is written inside a container with a stack as its child. Stack has been chosen as its child because it can have more than one child and also we can have overlapping children which are a requirement for this homepage.
The first child of the stack is a container that consists of a background image. Its second child is a column which again has a row as its child. This row contains the icon and the button. Likewise, for each row of icons and buttons, a new row as a child has been created.
codes have been written in home.dart
4. Page with Audio plays from Assets
First page
This file consists of the code for the creation of background, the text, and the link to the page consisting of audios. This page consists of a container with the stack as its child which further has another container which consists of the background image and column as its children. All the remaining texts and the link to another page consisting of Audiolocal.dart code is incorporated under column. When we click the first icon with ‘flute’ written on the top of it, we are landed on a new page consisting of an Audio. Here this audio has been taken through the asset.
codes for this page have written first.dart and audiolocal.dart
5. Page with video plays from Assets
Second Page
When we click the icon with ‘guitar’ written on the top of it, we are landed on a new page consisting of a video. Here this video has been taken through the creation of an asset. Let us have a look at the page for our reference. This file consists of the code for the creation of background, the text, and the link to the page consisting of videos. This page consists of a container with the stack as its child which further has another container which consists of the background image and column as its children. All the remaining texts and the link to another page consisting of video code is incorporated under column. videolocal.dart file consists of the entire code required to run a video.The name of our video file and its folder has been passed inside ‘VideoPlayerController.asset’.
Codes have been written in second.dart and videolocal.dart
6. Page with Audio plays from the network
Third Page
This file consists of the code for the creation of background, the text, and the link to the page consisting of audios. This file too follows the same code structure as mentioned in the above files. This page is linked to audionet.dart. which contains the code to play audio from Network. In my case I have uploaded the audio from Amazon S3 bucket.
Codes have written in third.dart and audionet.dart
7. Page with video plays from Network
Fourth Page
This file consists of the code for the creation of background , the text, and the link to the page consisting of video. This file follows the same code structure as mentioned in the file named FirstScreen.dart.When clicked on Piano Raised button it takes to another screen which contains a video. This Video plays from the network and in my case video has took from my Amazon s3 bucket
Code has written in fourth.dart and videonet.dart
You can find the entire code in my GitHub repo
