Trola (An Music Audio Video App)

Preview Of UI

Let’s See How this Simple App is Made by the flutter ? What are the methods , plugins are used ?

Firstly I will talk about its UI as we know the Flutter(Excellent UI Support And Native Experience) is basically famous for UI ..Which is easy to design we have all the commands or we can say power of each and every widgets we customize them also…

Like here I have used Google_Fonts plugin (For the text styling),Container Class,Column and Row……

Google_Fonts Plugin →

Demo

Installation => pubsec.yaml

dependencies:
  google_fonts: ^1.1.0

Import Library =>

import 'package:google_fonts/google_fonts.dart';

Example=>

Text("Music",
style: GoogleFonts.fredokaOne(
color: Colors.white,
fontSize: 25,
letterSpacing: 1,
decoration: TextDecoration.underline,
)

Container Class → It is an Box by which we can use to design any type of structure , we can align in any direction,it is an convenience widget that combines common painting, positioning, and sizing widgets.

Demo

Example=>

Container(
        color: Colors.amber[600],
      width: 48.0,    
     height: 48.0,
)

But Container have an Disadvantage that it have only one child . So, Either we can use it for text , another container or images etc etc ….. So, we can take the Help of Row and Column Which supports children but we can’t resize the row and column……

Example=>

It takes its children in an list form …..

Row and Column

Column(children:<Widget>[ ]

Now Lets talk About How I implemented this app with video and audio ?

Its Simple so, we nee the Plugins for them……

— — — — — — — — — — — — <Audio Setup> — — — — — — — — — — — —

audioplayers(Highest Rated)→ A Flutter plugin to play multiple simultaneously audio files, works for Android, iOS, macOS etc..

Installation=>

In pubsec.yaml (Please Strictly Follow the yaml Syntax )

dependencies:  
   audioplayers: ^0.15.1

Import The Library=>

import 'package:audioplayers/audioplayers.dart';

Playing Audio

There are three possible sources of audio:

• Remote file on the Internet
• Local file on the user’s device
• Local asset from your Flutter project

Let’s see an example for the Internet URL,

var aud_pl=AudioPlayer();
void play_url(var url)
{
  aud_pl.play(url);
}

Example for the Assets Files,

var audio=AudioCache();
void play_Audio(var name)
{
audio.play(name);
}

Now lets see how we can control the Audio Like Stop , Pause and Play,

There is not any type of Rocket Science just use your brain (Common programming rule) if and else condition…

Demo==>

bool play=false;
bool stop=true;
var aud_pl=AudioPlayer();
final aud_cache=AudioCache(fixedPlayer: aud_pl);
void play_Audio(var name)
{
if(play==false || stop==true)
{
aud_cache.play(name);
play=true;
stop=false;
}
}
void pause_audio()
{
if(play==true)
{
aud_pl.pause();
play=false;
}
}
void stop_audio()
{
if (play == true && stop == false) {
aud_pl.stop();
play = false;
stop = true;
}
}

Now you can easily call these functions and pass correct parameters also with your icons at the time of on_pressed !!

— — — — — — — — — — — <Video SetUp> — — — — — — — — — — — — — —

Installation=>pubsec.yaml

dependencies:
  chewie: ^0.9.7

Asset videos setup => pubsec.yaml

assets:   
  - videos/IntroVideo.mp4

Chewie provides its own widget which is, as we’ve already mentioned, only a wrapper on top of the VideoPlayer which comes directly from the Flutter team.

Because we want to play multiple videos displayed in a ListView, it’s going to be the best to put all of the video-playing related things into it’s own widget. Also, because video player resources need to be released, you need to create a StatefulWidget to get hold of the dispose() method.

Lets work these stuffs in another file →

chewie_video_list.dart

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart'; 
class ChewieListItem extends StatefulWidget { 
  // This will contain the URL/asset path which we want to play   
final VideoPlayerController videoPlayerController;  
 final bool looping; 
   ChewieListItem(
{
     @required this.videoPlayerController,
     this.looping,  
   Key key, 
  }) : super(key: key);   
 @override 
  _ChewieListItemState createState() => _ChewieListItemState(); }
  class _ChewieListItemState extends State<ChewieListItem> {   ChewieController _chewieController;
    @override   
void initState() 
{     super.initState();    
 // Wrapper on top of the videoPlayerController     _chewieController = ChewieController
(       videoPlayerController: widget.videoPlayerController,            aspectRatio: 16 / 9,       // Prepare the video to be played and display the first frame
       autoInitialize: true,
       looping: widget.looping,  
     // Errors can occur for   example when trying to play a video       // from a non-existent URL     
  errorBuilder: (context, errorMessage) 
{         
return Center(    
       child: Text(     
        errorMessage, 
            style: TextStyle(color: Colors.white),     
      ), 
        );     
  }, 
    );
   }    
@override   Widget build(BuildContext context)
 {  
   return Padding(   
    padding: const EdgeInsets.all(8.0),   
    child: Chewie( 
        controller: _chewieController,    
   ),  
   );
   }
    @override   void dispose()
 {     super.dispose(); 
    // IMPORTANT to dispose of all the used resources     widget.videoPlayerController.dispose();     _chewieController.dispose();   }
 }

Now we can easily call the function for video playing through assets or the network…you can also your own type of the container and call there….

Container(
width: 300,
height: 250,
margin: EdgeInsets.fromLTRB(20, 0, 20,0),
child: ChewieListItem(
videoPlayerController: VideoPlayerController.asset(
'video/1.mp4',
),
looping: true,
),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image:NetworkImage("https://raw.githubusercontent.com/Shashwatsingh22/Trola/master/images/8.jpg"),),
borderRadius: BorderRadius.circular(15),
border: Border.all(
width: 2,
color: Colors.white70,
)
),
),

Thank You !! I have shared all the info about this app .. Now its your time to do something first clap for this clap if you like it and make your own app…

Bye Bye Bye Bye

Git_hub Link => https://github.com/Shashwatsingh22/Trola