Making a Media Player Using Flutter
What is Flutter?
It’s a toolkit developed by Google meant for creating simple yet elegant mobile applications . Besides Mobile applications it is aiming to cover other domains like web and desktop applications as well (currently running in beta or other test phases). Flutter provides us every functionality in the form of “widgets” ( which includes : navigation menu , tabs, scrolling functionality , icons, font types and many more as it’s improved daily by the community at https://pub.dev/packages
A key feature of flutter is the use of Hot Reload .This is a life saver! As in , it helps us to quickly run the app on making small changes so that we can fix bugs and experiment around efficiently .
Flutter is actually a Framework for Dart , which is also made by Google
Dart is a client-optimized language.
You might have a question in mind “What’s a Client-Optimized language?”
To quote the Devs who made it:
“A programming language optimized for building user interfaces with features such as the spread operator for expanding collections, and collection if for customizing UI for each platform” ~dart.dev
The Devs at Google went so far as to creating an online compiler for their users and named it “ DartPad ” .
Task Objectives:
🔹Create a flutter app.
🔹Use Assets (eg. Audios and Videos).
🔹App will have to play this audios and videos from Assets.
🔹Also add Features to play audio and video from Internet(Network).
🔹Create buttons like play, pause and stop for audio and video both.
Procedure:
In order to build an application with multiple tabs and functionalities we may need to use a few third party packages , for that we may need to consult and use new sources presented by pub.dev
List of required packages to import / list in “pubspec.yml” file:
audioplayers: ^0.10.0
youtube_player_flutter: ^7.0.0+7
video_player: ^0.10.11+2These are the libraries to list under the dependencies section
Note: be careful with the spacing as it may lead to errors since it's a YAML file .
So follow the format while entering.And once installing is done, we my import them by typing:
import ‘package:audioplayers/audio_cache.dart’;
import ‘package:audioplayers/audioplayers.dart’;
import 'package:video_player/video_player.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';Main Design:
I went for a simple design, with two tabs consisting of a them of teal blue colour and white to compliment it
I made sure all the buttons are properly responsive inorder to avoid glitches or dual play
This is a demo for PLAY , PAUSE , STOP:
This is a demo for Fast forward button:
It may look like it but, I’ve made sure all the other buttons work that way:
The previous song button works in the same way:
As I’ve mentioned before , there are two tabs so we can either swipe or tap on the next tab to switch from Audio to Video and vice versa.
Now for the next tab , which is Video Player:
I gave my users the option to pick between a local player or a YouTube video player just to add a tad bit more functionality :
Here’s a demo for Local video play:
Inorder to design a youtube video player we need extra permissions so i recommend you add this to your:
Android>app>src>debug>AndroidManifest.xml
Enter:
<uses-permission android:name="android.permission.INTERNET"/></manifest>
And once that’s over we have internet permission prompt enabled!
Next we can use the Flutter library: youtube_player_flutter
This gives us functionalities like: play ,pause , progress bar (for picking your favourite timestamp ) and so on
Here’s a demo of how to use it:
You enter the link in the above text field
Next hit “Play Video” and enjoy the content!
Here’s two Demos
I had to post the second demo as well ,Since the first one couldn’t show where i was tapping on my screen ( please ignore the bad audio quality it’s due to the day of recording being windy).
My GitHub URL:
In conclusion..
It may not look or sound easy to build a flutter app but trust me it is as , I built a media player using Flutter framework
Thank you for the time…