Hybrid Media Player in Flutter
This blog is all about how to create a simple media player app that contains an audio player as well as a video player. To create this app I'd used the cross-platform app development framework called Flutter.
Hybrid Media Player App features:
1. Audio Player
2. Video Player
3. Play Audio and Video from both local storage as well as on the internet
Let’s start building the app.
Flutter Packages:
To extend the capability of Flutter to do more things, we required to install the app-specific packages. For this app, we required the following packages:
- assets_audio_player
- video_player
- fluttertoast
- flutter_statusbarcolor
Add these packages as the dependencies in the pubspec.yaml file.
Run the flutter pub get command to install these packages.
Now, we have all of the required packages.
Project Structure:
The lib/main.dart is the entry point of our application. This file will return a Material app and inside this Material app, we had declared routes for the application.
The assets/ folder contains the audio, video, and image files to be used in the application.
The Home/home.dart is the file that contains the code for the home screen of the app. When the application runs, this file will be called initially.
This app provides two media players. One is the Audio player and another is the Video player.
The Audio/Music Player:
The Audio/ folder contains all of the code for creating the Audio/Music player. Now, let's take a look at what each file does.
Audio/audioHome.dart
When we click on the Music Player option on the home screen, this file will be called and load the available local(from assets) music/audio files.
Playing music/audio from the assets:
When we click on the play button in front of the song, this will start playing the song and gives the options to pause/play and stop the song.
Also, it will show the notification of the playing song along with the options to play/pause and stop the song. Also, it will show the song details like song name, artist, album, song length, etc.
Playing Songs on the internet:
There is one button in the top right corner in the app bar on the audio home. This button will play the songs on the internet. The Audio/playOnline.dart file contains the code for this feature.
The Video Player:
The second option on the home screen gives a way to open the Video Player. This Video Player will play the videos from the local(assets) files or on the internet.
Video/videoHome.dart
This file has the code for the video player home. This will display the list of the available videos. After clicking the play video button, the video will be played. It will give options to play/pause the video.
Video/playOnlineVideo.dart:
This file enables us to play the video on the internet.
There is a button in the top right corner on the app bar that will give us a way to play the video online.
App Demo Video:
Go through this video see how the app works.
Application Source Code:
Thanks for reading this blog.
If you liked this article, please applaud it.
You can also follow me on Twitter at @cankush625 or find me on LinkedIn.
Note: All of the assets are used only for educational purposes.
