Media Player using Flutter

3 min readAug 5, 2020

This article aims at creating an app in Flutter with the following components:

A video player that has all the required controls, i.e. a slider, duration, play/pause button, mute button, and a fullscreen button. This video player can play videos from two sources: 1. The in-app assets. 2. From a URL.
A music player that has all the necessary controls, i.e, play/pause button, stop button, duration. This music player can play music from two sources: 1. The in-app assets. 2. From a URL.
A page view so that we can simply swipe to change from video to audio.
A button bar, so that if we don’t want to swipe, we can switch pages using the buttons.

Note: This tutorial assumes you know how to start a new project in Flutter.

Before we begin

There are a few things that we need to get done before we start coding. We need to create an “assets” folder inside the main project directory. Inside this folder, we need to create two more folders, “videos” and “audios” (Names for the folders can be anything as long as we remember what we have placed where). I will be placing the video files in the videos folder and the audio files in the audios folder.

Next, we need to go to the “pubspec.yaml” file. There we need to find the comment about assets, and there we add the following lines:

The Video Player

For the video player, we will be using the ‘chewie’ video player library. It comes packed with all the features we need, we just need to implement it.

We first create a new file, for example, chewie_code.dart.

We need to create a stateful widget class to be able to use the chewie video player.

The code:

The Music player

The music player is a little more work. I am using the assets_audio_player library. It was the library that had the simplest implementation and good documentation. But, it does not provide a quick GUI right off the bat, so we have to implement it.