Audio And Video Player Application Using Flutter

Sathvika Kolisetty
4 min readSep 8, 2021

--

Pre-requisites

  • Flutter Installed in our Base Operating System
  • Dart SDK Installed
  • Android Studio installed
  • Launch the emulator or we can use our mobile.

Step 1:

Let’s begin the task by creating a new workspace for the application. use the below command to create. I named my app as media.

flutter create media

Step 2:

after creating now we have installed some plugins in pubspec.YAML file

Add these plugins in our pubspec.YAML file

pubspec.yaml file

Step 3:

main. dart file code

This is the main code of your flutter app it will run and create our whole app

This main page calls the page1() & page2()

main.dart

Step 4:

next, we have to create UI pages I will give the source code in the below link

This is the first page of the application it shows music and video buttons. we have to select either Music or Video. if we press the Music button it will navigate to Page2.dart mention in step5. or if we press the Viedo button it will navigate to Page5.dart mention in step 8.

page1.dart

Step 5:

After doing the above step we have to select offline or Online. if we click on the offline it will navigate to page3.dart mention in step6 or if we click on the online it will navigate to page4.dart mention in step7

page2.dart

Step 6:

Here we can play the offline song. here we have a play button, pause button, and stop button it takes the song from the assets file

page3.dart

Step 7:

Here we can play the Online song. here we have a play button, pause button, and stop button it takes the song from the online player. I uploaded in AWS cloud

page4.dart

Step 8:

we have to select offline or Online. if we click on the offline it will navigate to page6.dart mention in step9 or if we click on the online it will navigate to page7.dart mention in step10

page5.dart

Step 9:

After clicking on the offline button.Here we can play offline videos. here we have a play button, mute button, and full-screen option.it takes video from assets.

page6.dart

Step 10:

Here we can play Online videos. here we have a play button, mute button, and full-screen option. I uploaded the mp4 video in the AWS cloud. it will take from AWS

page7.dart

You can find the entire code in my GitHub

https://github.com/satvikakolisetty/Flutter_Media_Player_App

--

--