FLUTTER TASK 1

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Main Features of Flutter Framework:

Fast Development

Expressive and Flexible UI

Native Performance

Prerequisites:

FLUTTER SDK INSTALLED

ANDROID SDK INSTALLED

VS CODE (IDE)

ANY ANDROID DEVICE OR AVD

TASK DESCRIPTION:

1.Create a flutter app.

flutter create <app_name>

Then open the main.dart file and remove all the content, as we are going to built it from scratch.

Here I am creating the main.dart file and I am using the flutter_statusbarcolor: ^0.2.3 package for having a customized status bar, in order to install any package you just need to mention it in the pubspec.yaml file and sometimes need to run the command:

flutter pub get  

as pub is the package manager of flutter.

Then restart the IDE so as to load the packages it just had installed. Then we can import that package in our flutter code so as to access the functionalities offered by these packages.

Then create a home.dart file inside the lib folder where we write our main code.

2. Use assets (eg. audios and videos).

Create images folder under your flutter app root folder( having the same name as that of appname) , where we need to add the images we can use in our app.

And also update the pubspec.yaml file about the path for the assets.

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.

Let's start coding our basic music player app using Flutter:

Here I am creating a Stateful Widget because the internal State ie data inside the class or this Widget Tree need to be changed based on the older state and accordingly the Widgets need to be displayed.

First of all, I am importing the packages which I need in my app.

 audioplayers: ^0.14.2:

A Flutter plugin to play multiple simultaneous audio files works for Android, iOS, macOS, and web

 file_picker: ^1.5.0+2

A package that allows you to use a native file explorer to pick single or multiple absolute file paths, with extensions filtering support.

 flutter_spinkit: "^4.1.2"

A collection of loading indicators animated with flutter.

Then I am creating a Scaffold Widget which would provide us the basic page layout for our app. After that I have created the Audioplayer object which has methods like play, pause, stop, resume which I need to use in my app. I have declared isPlaying a boolean type of variable that I am going to use for storing the state, that the music is playing or not, and accordingly, I will display the Widgets.

I have used a ternary conditional operator :

(expression) ? (statement A) : (statement B)

if the expression evaluates to true, statement A will be executed otherwise the statement B will be executed and I have used this condition to do a conditional rendering of the Widgets based on the isPlaying variable.

At the end, I had created an asynchronous method ie non-blocking method call which would help in choosing the music file which the user wanted to pay in our basic music app.

Here is our basic music app, I will add more functionality and enhance the UI /UX part. But as a beginner, it seems to be a good start.

I am not sure why its showing video unavailable:😢

Please have a look at:

https://www.youtube.com/watch?v=MnHzeqWQdiM

I had also created a video player app with a layout similar to Youtube😊

Please Have a Look:

https://www.youtube.com/watch?v=5JDxExW-lUU