Hybrid Media Player in Flutter

Photo by Dalibor Bosnjakovic on Unsplash

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:

  1. assets_audio_player
  2. video_player
  3. fluttertoast
  4. flutter_statusbarcolor

Add these packages as the dependencies in the pubspec.yaml file.

Dependencies/packages in 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.

Hybrid Media Player — Home page

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.

Music Player - Home

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.

Playing song from the assets

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.

Notification of the currently playing song

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.

Playing music on the internet

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.

List of available videos
Play 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.

Playing video on the internet

App Demo Video:

Go through this video see how the app works.

Application Source Code:

https://github.com/cankush625/Music-Player

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ankush Chavan

Ankush Chavan

Tech blogger, researcher and integrator