Flutter App


                         


Task1: Flutter App Development



  1. Create a flutter app.

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

     3. The app will have to play these audios and videos from Assets.

     4. Also, add Features to play audio and video from the Internet(Network).

     5. Create buttons like play, pause, and stop for audio and video both.


FLUTTER- Flutter is an open-source framework that is used to make a cross-platform app. It is created by Google. It used Dart Language.

So first we need to set up all Softwares:

  1. Install flutter and give the path in the environment variables.

  2. Install android studio and make AVD from AVD Manager.

  3. Install Dart and give its path in environment variables.

  4. Install Visual Studio for coding and install plugins there for flutter and dart.

So now let’s create a flutter app as flutter provide one test app.

To create a test app write the command in command line - “flutter create app_name”


See it is created-


Now write your code on “main.dart” and if want to make a new file then must import that file in main.dart.










ADD DEPENDENCIES-

Add the dependencies of the services which you want to use in your code.

“audioplayers” is used to add Audio features when you can access the audio through the internet. In addition, it plays, stops, pauses, and restarts the audio.


“fluttertoast”  is used to add toast feature means it will pop up some message for some seconds.

“flutter_statusbarcolor” is used to give color on the status bar.

“assets_audio_player” is used to access audio files present in the local system. In addition, it plays, stops, pauses, and restarts the audio.

“video_player”  is used to access videos at remote places or local places. In addition, it plays, stops, and restarts the video.




dependencies:

  flutter:

    sdk: flutter

 

  cupertino_icons: ^0.1.3

  audioplayers: ^0.15.1

  fluttertoast: ^7.0.2

  flutter_statusbarcolor: ^0.2.3

  assets_audio_player: ^2.0.9+2

  video_player: ^0.10.11+2



ADD ASSETS-

In the assets folder, I have saved my image, audio, video so that we can access it in our code.


flutter:

  assets:

    - assets/


See the folder-


ADD THIS LINE AFTER APPLICATION - 

when we want to access videos we need to set this line in the file.

In the “AndroidManifest.xml” file add this line after the <application>...</application> tag ends.

 <uses-permission android:name="android.permission.INTERNET"/>


See the path of “AndroidManifest.xml” path.

So all set up done now let’s start coding.


“main.dart” is the file that is accessed by flutter by default.

In this way, I arranged my file.


we should know that a mobile screen has a status bar, app bar, body.so we will design the app accordingly.


The code of “main.dart” has hot reload capability which is the best part of Flutter. This code import the packages it needed and the file through which we connect our code.

“main()” function is an entry point in flutter which implements all things which reside in it.

“runApp()” function will be going to the run the Application.





Main.dart-

import 'package:flutter/material.dart';

import 'UI/page.dart';

 

void main() {

  runApp(MyApp());

}

 

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return View();

  }

}

 



Page.dart-

In this file, I have defined the structure of my app. All the packages used here is elaborated by me earlier.

A pageView is used to give scrollable pages to pages either horizontally or vertically, you can set according to requirement .i have used horizontally.

Image.network() -> is used to access image which is available on the internet.

Image.asset() ->  is used to access the image which is available on the local system.

Scaffold() -> it give pre-created appbar and body.

MaterialApp() -> it is the screen that is shown to you.


import 'package:flutter/material.dart';

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

import 'package:All/UI/audiofunction.dart';

import 'package:All/UI/assetaudio.dart';

import 'package:All/UI/videourl.dart';

import 'package:All/UI/internetvideo.dart';

 

View() {

  FlutterStatusbarcolor.setStatusBarColor(Colors.red);

 

  var container = PageView(

    children: <Widget>[

      Card(

        margin: EdgeInsets.all(30),

        color: Colors.white54,

        elevation: 20,

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text(

              'Piano Internet',

              style: TextStyle(color: Colors.black54, fontSize: 20),

            ),

            Image.network(

                'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShThIHrrvm2iXwaKiLnrINCJu8tyjQIZ_aif-mikJgwC7LTFU&s'),

            FuncAudio(),

          ],

        ),

      ),

      Card(

        color: Colors.white54,

        elevation: 20,

        margin: EdgeInsets.all(30),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text(

              'Piano Assets',

              style: TextStyle(color: Colors.black54, fontSize: 20),

            ),

            Image.asset('assets/2.jpg'),

            AssetAudio(),

          ],

        ),

      ),

      Card(

        color: Colors.white54,

        elevation: 20,

        margin: EdgeInsets.all(20),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text(

              'Video Assets',

              style: TextStyle(color: Colors.black54, fontSize: 20),

            ),

            AssetVideo(),

          ],

        ),

      ),

      Card(

        color: Colors.white54,

        elevation: 20,

        margin: EdgeInsets.all(20),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text(

              'Internet Video ',

              style: TextStyle(color: Colors.black54, fontSize: 20),

            ),

            InternetVideo(),

          ],

        ),

      ),

    ],

  );

 

  return MaterialApp(

    debugShowCheckedModeBanner: false,

    home: Scaffold(

      appBar: AppBar(

        title: Text('My App'),

        backgroundColor: Colors.teal,

      ),

      body: container,

    ),

  );

}

 



audiofunction.dart-

In this file, the audio is accessed through the internet and further play, stop, pause, restart icons and functions are used.


import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

import 'package:audioplayers/audioplayers.dart';

 

FuncAudio() {

  var playicon = Icon(Icons.play_arrow);

  var stopicon = Icon(Icons.stop);

  var pauseicon = Icon(Icons.pause);

  var resumeicon = Icon(Icons.restore);

  var playaudio = AudioPlayer();

  return Row(

    mainAxisAlignment: MainAxisAlignment.center,

    children: <Widget>[

      IconButton(

          icon: playicon,

          onPressed: () {

            //print('backward');

            playaudio.play('https://www.kozco.com/tech/piano2.wav');

            Fluttertoast.showToast(

                msg: "Play",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: stopicon,

          onPressed: () {

            //print('forward');

            playaudio.stop();

            Fluttertoast.showToast(

                msg: "Stop",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: pauseicon,

          onPressed: () {

            //print('forward');

            playaudio.pause();

            Fluttertoast.showToast(

                msg: "Pause",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: resumeicon,

          onPressed: () {

            //print('forward');

            playaudio.resume();

            Fluttertoast.showToast(

                msg: "resume",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

    ],

  );

}

 


See the view of this page as each page is scrollable but in images, we can’t see it so i will make one video on it. 


assetaudio.dart-

In this file, the audio is accessed through the local system and further play, stop, pause, restart icons and functions are used.


import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

import 'package:assets_audio_player/assets_audio_player.dart';

 

AssetAudio() {

  var playicon = Icon(Icons.play_arrow);

  var stopicon = Icon(Icons.stop);

  var pauseicon = Icon(Icons.pause);

  var resumeicon = Icon(Icons.restore);

 

  var assetsAudioPlayer = AssetsAudioPlayer();

  assetsAudioPlayer.open(

    Audio("assets/audio.mp3"),

  );

  return Row(

    mainAxisAlignment: MainAxisAlignment.center,

    children: <Widget>[

      IconButton(

          icon: playicon,

          onPressed: () {

            //print('backward');

            assetsAudioPlayer.play();

            Fluttertoast.showToast(

                msg: "Play",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: stopicon,

          onPressed: () {

            //print('forward');

            assetsAudioPlayer.stop();

            Fluttertoast.showToast(

                msg: "Stop",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: pauseicon,

          onPressed: () {

            //print('forward');

            assetsAudioPlayer.pause();

            Fluttertoast.showToast(

                msg: "Pause",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

      IconButton(

          icon: resumeicon,

          onPressed: () {

            //print('forward');

            assetsAudioPlayer.playOrPause();

            Fluttertoast.showToast(

                msg: "resume",

                toastLength: Toast.LENGTH_SHORT,

                gravity: ToastGravity.BOTTOM,

                timeInSecForIosWeb: 1,

                backgroundColor: Colors.black,

                textColor: Colors.white,

                fontSize: 16.0);

          }),

    ],

  );

}

 


See the View of this page.



videoasset.dart-

In this file, the video is accessed through the local system and further play, stop, restart icons, and functions are used.


import 'dart:ffi';

 

import 'package:fluttertoast/fluttertoast.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

 

AssetVideo() {

  var start = Icon(Icons.play_arrow);

  var pause = Icon(Icons.pause);

  var replay = Icon(Icons.restore);

  VideoPlayerController _controller;

  Future<void> _initializeVideoPlayerFuture;

  _controller = VideoPlayerController.asset('assets/video.mp4');

  _initializeVideoPlayerFuture = _controller.initialize();

 

  var body = Column(

    mainAxisAlignment: MainAxisAlignment.center,

    mainAxisSize: MainAxisSize.min,

    children: <Widget>[

      Container(

        child: VideoPlayer(_controller),

        height: 200,

      ),

      Row(

        children: <Widget>[

          IconButton(

              icon: start,

              onPressed: () {

                _controller.play();

                Fluttertoast.showToast(

                    msg: "Play",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              }),

          IconButton(

              icon: pause,

              onPressed: () {

                _controller.pause();

                Fluttertoast.showToast(

                    msg: "Pause",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              }),

          IconButton(

              icon: replay,

              onPressed: () {

                _controller.initialize();

                Fluttertoast.showToast(

                    msg: "Replay",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              })

        ],

        mainAxisAlignment: MainAxisAlignment.center,

      )

    ],

  );

  return body;

}

 


This is the view of this page.



Internetvideo.dart-

In this file, the Video is accessed through the internet and further play, stop, restart icons, and functions are used.


import 'dart:ffi';

 

import 'package:fluttertoast/fluttertoast.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

 

InternetVideo() {

  var start = Icon(Icons.play_arrow);

  var pause = Icon(Icons.pause);

  var replay = Icon(Icons.restore);

  VideoPlayerController _controller;

  Future<void> _initializeVideoPlayerFuture;

  _controller = VideoPlayerController.network(

      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');

  _initializeVideoPlayerFuture = _controller.initialize();

 

  var body = Column(

    mainAxisAlignment: MainAxisAlignment.center,

    mainAxisSize: MainAxisSize.min,

    children: <Widget>[

      Container(

        child: VideoPlayer(_controller),

        height: 200,

      ),

      Row(

        children: <Widget>[

          IconButton(

              icon: start,

              onPressed: () {

                _controller.play();

 

                Fluttertoast.showToast(

                    msg: "Play",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              }),

          IconButton(

              icon: pause,

              onPressed: () {

                _controller.pause();

                Fluttertoast.showToast(

                    msg: "Pause",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              }),

          IconButton(

              icon: replay,

              onPressed: () {

                _controller.initialize();

                Fluttertoast.showToast(

                    msg: "Replay",

                    toastLength: Toast.LENGTH_SHORT,

                    gravity: ToastGravity.BOTTOM,

                    timeInSecForIosWeb: 1,

                    backgroundColor: Colors.black,

                    textColor: Colors.white,

                    fontSize: 16.0);

              })

        ],

        mainAxisAlignment: MainAxisAlignment.center,

      )

    ],

  );

  return body;

}

 



View of this page - 


You can access the .apk file in this path-


So, finally, the app is ready to use.

FUTURE ENHANCEMENT-

  • More songs can be added up in the queue.

  • More videos can be added up in the queue.

  • Songs, images can be stored in the cloud.

  • Now I used images, audios, videos, for the purpose of testing but we can change it to real ones.


Comments

Post a Comment

Popular posts from this blog

HOW GOOGLE USES MACHINE LEARNING ??

Image
👉 MACHINE LEARNING  Humans have brains which means they can answer that question also whose answer is not known to them but how a human is able to answer it's just because he has a natural intelligence and past experience which helps them to predict the answer but the computer is hardware then how to give the brain to it ?? What do humans have? 👉 Brain 👉 Experience 👉 Lots of data 👉 Prediction power 👉 The habit of not saying “no” What computers do not have? 👉 Brain 👉 Prediction Power 👉 the answer to that question whose data does not exist. MACHINE LEARNING - It is an application of ARTIFICIAL INTELLIGENCE which provides machines to automatically learn and improve through experience. The more data brings more experience to the robot without explicitly programmed. It is of four types -   👉 SUPERVISED LEARNING - Supervisor means an instructor who instructs to do something. In supervised learning, the labeled data is used to train the computer for future predicti...
Read more

AWS CLOUDFRONT SETUP

Image
  AWS NEW BLOG 👉 Everything is done by AWS CLI 👉 Each change is shown in this Blog. 🔰 Create High Availability Architecture with AWS CLI 🔰 🔅The architecture includes-  - Web Server configured on EC2 Instance - Document Root(/var/www/html) made persistent by mounting on EBS Block Device. - Static objects used in code such as pictures stored in S3 - Setting up a Content Delivery Network using CloudFront and using the origin domain as an S3 bucket.  - Finally, place the CloudFront URL on the web app code for security and low latency. AWS - Amazon Web Services is a Public Cloud Service by Amazon Company. 👉 AWS provides Infrastructure As A Service, Platform As A Service, and Software As A Service. 👉 In This Task, I am going to use AWS CLI, EC2, EBS, S3, Cloudfront. 👉 AWS Provides High Availability, Isolation, and Security of services used by us. 👉 AWS Provides each service with minimal cost. 👉 AWS works on a pay-as-we-go model. PUBLIC CLOUD - Public cloud allows us t...
Read more