Flutter Audio Player Tutorial Step By Step 2021 | Flutter Music Player | Flutter audioplayer

and then learn how to build this audio player  over here with this audio player you'd be able   to load audio files remotely from a server and  then you'd be able to play them like this yes you'd be able to stop it like this and after that  you'd learn how to also do repeat how to repeat an   audio like this when you click the button it'll  start automatically from the beginning as you   can see and at the same time you'll also learn how  to do fast forward by clicking on the button like   this as you can see the time is changing too fast  or you can do slow forward or you can slow the   time and then you'll learn also how to add audio  from this playlist and play it the same way we did   earlier just like this okay so this is what we'll  be building at the end of this tutorial and this   would be a beginner's audio app building tutorial  and if you are following along with me from the   previous tutorial i'll also show you at the end of  this tutorial how to connect this ui or this page   to our previous page over here over here  okay so you'll learn how to connect from here   to here and play the audio okay so that's  what i'll be doing at the end of this tutorial   and if you're following along with me i'll  put the code link below the video description   section so that you can download the code and  get started so let's go ahead and get started okay so this is where we left last time so  this is our home page and home page is this   one we did it in our last tutorial so see the  link below if you don't know how to follow this   and we also have this a couple of json files app  colors and my tabs dart file okay and for this uh   going ahead fast i created a file which is on  detail audio page dart and which lives in this   lib folder and once again you get to see the  other folders and directories we created in   our last tutorial so asset folder and we also  have this img folder and once again if you   are just following this tutorial for audio  builder this is the perfect place and at   the end of this tutorial i will show you how  to connect our ui with the previous tutorial   okay so now over here we'll create a  stateful widget and we'll call it detail   audio page okay and we need to import a file it's  a copurtino.dart and the error should be gone and   at the same time for now we need to replace this  one with our newly created file which is detail   audio page and now let's go ahead and save it and  we'll see the result and definitely it's all dark   because nothing is there now instead of returning  a container will return a scaffold widget   okay and within scaffold widget we'll have  body on within body will use a stack widget   okay the reason we are going to use a stack  widget because uh over here as you can see the   ui design these icons on the blue background  and at the same time this little box over here   it's also on the blue and the white one at the  same time okay and then we have this other uh   ui which is in this box so these are all styled  using position widget and positioned widget   they can sit on the top of each other or they  can overlap with each other this is more like css   absolute positioning so the idea is pretty much  same and has because we are using position widget   or we'll be using position widget so that's why  we have stack widget because stack widget holds   position on it so frankly speaking if you have  position widget you have to wrap them around   stack widget okay so that's what we're doing  so we'll have a few more position widgets so   there would be as a children of stack widgets so  let's go ahead and create a children list like   this okay and after that we'll create our first  position widget for this blue background over here   so let's go ahead and called position okay and  it takes a child and in our case child for child   will pass a container okay and positioned again  as from the name you understand it will have   a top left position top zero left zero and  right to zero so which will start from here   and the right position is here and top is over  here all right okay and now this one will have   uh height okay so what's the height so height  will be this this part and this height is uh   pretty much the height of one one i guess this is  the one fifth of this uh to this ui one-fifth of   this ui this position okay all right so that's  what we would be doing so we can write here   uh like this say media query dot of context and  then we can do dot size dot height okay all right   and what we could do we could do like one fifth  like this but this height position actually or   this height property or this height would be  using in a lot of different places so why don't   we declare a variable okay so the variable would  be final double and we'll call it screen height equal this one okay and at the same time what we  can do we can copy paste this instead of calling   it height and call it with on from here returning  height we can return with okay so now we are good   over here instead of this long name what we  could do we could do screen height by five   okay so this is uh pretty much one fifth of this  whole screen so that's what we are doing over here   and now this will have a color okay so let's  define the color and to use the color we have   already color palette over here color file so  we can call it directly uh to call them directly   we need to import it so we can import it as have  colors using this statement so we'll copy paste it   over here okay so now we'll have access to our f  color file using this variable okay so let's go   ahead and call it we'll call app colors dot blue  background second one okay all right so now let's   go ahead and save it and see that on the result  okay perfect so instead of one five then what we   could do we can do one third so it would be a  bit bigger okay perfect so that's what we want   so we are done with our first widget which is  responsible for drawing this blue background   so next we would be doing this icon over here  this two icon and this two icon will put them   within our app bar widget and that app widget will  stay within our position widget so let's go ahead   and declare another position widget okay and the  child is app bar okay all right and once again it   will have uh uh top position so top zero uh left  zero and right to zero so it'll start from here   top left and right okay all right now app bar  because we are doing icons so we can show them   using a leading property and it takes a widget so  we can use the widget icon button and icon button   takes a few properties one of them is icon so now  we can use another icon widget or icons dot arrow back ios this one okay and then we'll also have  on pressed event for this but for now on press   event is empty we'll deal with this later okay  so with this would be able to say this first   icon over here let's go ahead and save it and  see the result okay so that's what we have now   the next thing we want to do is show this one okay  so this is another icon and we'll be doing showing   it from the backward so with this as you can see  from the name is leading it means the first icon   and the rest of the icon in app bar they should  sit within another property that's called   actions action takes couple of children and these  children could be anything in our case they are   icons so we'll only use one icon so the the thing  we could do we can copy paste this icon from here okay and just all we need to do change the icon  name instead of this we can use search okay and   on pressed event is still empty so let's go ahead  and save it and see the end result so perfect   so for now we are following along with our design  but now the problem is you can ask one question   so it is zero zero why it's the icon down there  it's because app bar starts from here and icons   automatically at the bottom of a bar okay below  down there so actually it starts from here because   we did zero zero okay all right and another  problem is from this ui we can see that our   upper color and background color should be same  but here it's not it's because app bar has a default   color which is this kind of blue but definitely  we can change the color the few things we can do   the first thing we can to change the color we  can call background property or called colors   transparent let's save it and see the result  and as you see now it's still there and it's   more like a shadow color but we don't want shadow  there is shadow the reason is because app bar has   elevation and elevation has certain different  value in our case we'll set elevation to 0.0   and then we'll see this background has gone now  it's more flat to this one okay so we are done   with this section so for now we have used two  position widget first position widget this one   is responsible for showing the background and  the second one is for showing these two icons   now the third one third one would be using another  position widget to show this container which has a   round border or corner like that so that one uh so  let's go ahead and create another position widget   and once again it takes a child and within  the child will have a container as widget   okay all right uh now it needs a position  as you can see this container it has   certain distance from the top so we have to create  this position all right okay another thing we need   to do left position so left position is zero  right position is zero as well and then the top okay so this top position could be say  i would say one third a little over   one third okay so just like earlier  we can use this variable and modify it   okay so we'll use the screen height and  then we'll give it the position it's more   like uh pretty much a little over one-third i  guess okay so what do we do we could do 0.36   little over one-third okay and now this will have  so this is the position right and at the same time   we need to give it a height okay so let's go  ahead and do it so height so let's see the height   so we can give pretty much the same height over  here and let's see the result and for now as a   color background color we'll use colors.red and  later on we can change the color let's go ahead   and see the end result and looks like our position  is wrong position so the top position is a little   wrong so instead of doing 0.36 let's do two and  see the result okay perfect so this is where we   want it so exactly the same position as you can  see from here but of course we need to change the   color so instead of red what we could do we could  do white okay and next we need to create this   a border over here which has this rounded  border as you can see and we'd be doing it using   decoration so decoration takes box decoration  widget and using box decoration definitely we   can change the border radius so we'll call border  radius that circular will use circular border   okay all right and if you have container and box  decoration together you should define the color   within box decoration okay let's go ahead and  save it okay now as you can see the border   is right there now we also need to change this  background which was the main background earlier   defined for scaffold okay so we can  change the background color from here   we'll call it from app colors uh file and the  color we want to use at audio bluish this color okay perfect and once again the  app color is coming from over here   okay all right so we are done with this box and  container pretty much uh next thing we want to   do is uh create this text and okay well now  we'll do this text this big text and this sub   text or subtitle okay well to do that uh one  thing we need to do we need to wrap this text   in a column so they would be sitting on the  top of each other including later on would   be showing this audio player this is also  part of this column so everything would be   in a column they would be sitting on the top  of each other this would be at the top and   then then and then this one okay all right so  within a container let's go ahead and declare   a child so this is our container we'll declare  a child over here within this container child   and we'll call column and as you already  know that column takes children so   you find this children over here okay  and children will have a lot of child   the first one is a text child tool called text  and for now we'll do it hard coded but at the   end of this tutorial we'll load everything  from a json file and load them dynamically the water cure and then we'll use style so what  is our style style would be using text style   and within it we'll have font family  font size font size 30 font weight bold and uh let's see what else fault family  from family ovener this one okay now let's go   ahead and save it and run it see the result okay  now it is to top right so we don't want it that   much talk we want somewhere say for example  here okay so this is where we need to draw it okay so to put it down we need to define a sized  box over here uh so it will have a fixed size   so let's go ahead and do it sized box  and it has have it has height property   okay and again we'll use our screen  height variable just now we did early   and this height is pretty much from  here to here down there it should be 100   so let's try 0.1 and let's see the result okay  we have an error because we are missing a comma   okay now let's see okay perfect so this is pretty  much 100 okay i think this is a little over 100   but that's fine though so the next thing we'll do  is uh define another text properly or the subtitle   so we'll call it uh what's the uh writer's name  let's see so martin hyatt so his name is martin   hi at okay all right and uh we can  also do text style here text style okay and font to say font width we just  go the font size and let's do it 20   okay save the result okay perfect okay so that's  what we have so the next thing we want to do   is show this guy at the top okay  and as you can see from this picture   that well now this one is sitting on the top of  this blue background and also on the top of this   white container over here and once again because  they're sitting on the top of it is sitting on the   top of other widgets so we need to wrap this thing  around position widget which we have done early   for other widgets so for this one it would be  pretty much the same so we need to declare a new   position widget uh let me collapse them so that  we look organized okay all right so this would   be sitting on the top of other widget and  to do that we need to wrap this one later   on within positioned widget okay we'll start with  position widget okay let's go ahead and declare   a new position widget all right and once again  um it takes a child so child will use container okay all right and we want to give it  a position so let's do top position   and then we'll use a screen height for this and multiply with 0.12 so its top  position is a little over 100 like that little   over because 0.12 so because as you need to notice  that we are using this uh width and the screen   height so it's based on device it will change  so uh across all the devices the the height and   position they're all look the similar so that's  why at the beginning we take this variable which   we declared early and based on that we will take  our top position with left right like that okay   so so that on all the devices it looks similar  otherwise if you really hardcode say top 150   so in some iphones or android phones are very  small in that case 150 would be a lot of space   but because we are taking device height and based  on that we are trying to position our widgets so   they would the the look and feeling would be good  okay all right next one is the left so while the   left is pretty interesting so for left first  we need to take the whole width so that's what   we'll be using here from the screen with screen  away and then we take this one the whole width   and after that okay we want this width to be 150  so let's do minus 150 and wrap it around a bracket   and then divide it by two so let me tell you  what's happening here so this is the left position   say well first we define this variable to  be 150 this width and we minus it from the   screen width so this is the screen width all  right so if you minus the position is over here   okay and then we are left with this this width  okay and again later on we divide it by two so   this this position divided if you divide this by  divide this position by 2 it would be somewhere   here so the left position ends up here hopefully  it makes sense all right now we'll do the same   for our uh right position okay just  to do right over here so idea is uh first take the whole width and minus  your container width which is 150   so it will be positioned over  here right position and then   you sorry it will be the position would be  here and then whatever the position we get   divided by two so it'll move the right  position to over here hopefully it makes   sense if you still don't understand you can ask  me questions later in the comments section below   okay all right so that's for the positioning so  we have top left right and later on we have to   decorate our container as you can see from here  it is special border okay so let's do decoration   so we'll use box decoration okay and box  decoration will have border radius we already   know we have done it pretty much a couple of  times and circular radius will use a tiny okay all right and then we'll have border so we'll define a border for this container border  that all and we'll also use a color for this   colors dot white and what  you call two okay all right   let's see and what else so i think we can  go ahead and save it and see the result   okay all right uh now it's nothing is  there because uh we don't have this screen   this container this container height so that's  why nothing is there it's all empty but once we   have content inside it so that container will  take the whole space and it would look bigger   so let's put some contain content inside  okay well first thing we need to do to put   some content we can define child within this  container okay let's go ahead and define child   so child and in this case we want a padding child okay we want padding child because of this one  because we will put an image and the image should   have this equal uh top padding left padding and  bottom padding right padding okay so all these   things so that's why we want padding so padding  will take equal space on every side and rest of   the space would be for this image so let's go and  do it so first define padding so the const edge   inserts all and everywhere  we'll have padding say 20 pixels all right and after that we'll have again  child and child would be a container   and this child is here because we want to  wrap this image over here or put this image   actually and that's why we need our child  okay all right and at the same time we want   to decorate this image so that's why actually we  need the tile because if we don't have container   i guess we can't directly decorate as you can  see it is this border round border as well as   some i guess width okay so that's why we need  another container and if we have container   we would be able to use this box decoration  thing okay so let's go ahead and do it decoration   what i could do i can just copy paste  this thing so that it saves out time   okay all right so that's what we did  so we just copy paste the whole thing   all right okay so let's do the image uh to  do the image we need to use image property   within box decoration and we'll call  a widget which is called decoration   image and within it we'll also have another image  property and then we'll call a function called   asset image and this function basically takes  the image path that's why we write here pic1   the png so that's the image we have right in our  folder in our project so over here and this is   the first image we are using okay all right uh  now let's go ahead and save it and of course i   don't think we'll see anything all right still  nothing there the reason is uh because uh we   don't have the height for this container over here  the base container or the parent container which   is within the position container so what we could  do we can mention the height over here and again   we'll use the screen height for this and we'll  multiply it with the 0.16 which is around 150 so   the height of this container will be 150 like that  okay yeah perfect so now things are looking good   okay all right so but now the image itself  doesn't really look good okay so what we could   do we can use and the property with an image  is called a fit we can call box fit dot cover   and now let's run it and see the result  okay perfect uh well so that's one thing   we have and now one thing we could uh also get  re we need to get rid of which is this border   okay so let's see if we get rid of this border  what do we see okay images like this so we want   to give any border we we can define a shape  for it so we'll say box shape dot circle okay   so now we'll have a circular image right there  okay perfect so everything is working good but   now over here this border is not visible because  they're same white okay and another thing is   that this border and that border the border width  they're pretty same so you can change the border   width over here instead of two we can do five  okay now it looks much better but now to to do   this thing get rid of this white thing it looks  like white because this big container itself   doesn't have any background so what you could  do we can assign it a background color okay   so let's see where we could do this i guess we can  do it here color so we'll use it from app colors   dot let's see what kind of color we can  use audio gray background maybe this one   okay uh looks like we have an error uh because  okay i know there are a reason because we have   box decoration so if you have container and  box decoration you can only use the color   within box decoration okay so let's move it  down over here and let's run it one more time   okay perfect so this is the result we are looking  for so so far everything is working perfectly the   way we want it so i want to go through this widget  again so this position widget is responsible for   showing this one and put the position in the  middle of this place around here so and we   have this top position zero point uh with  which is multiplied by uh screen height and   0.12 which is pretty much like little over 100  which is this distance and then we have the height   height is this also around 150 like  that okay and now we use this left and   right position and the way we used this thing  so it sits or put things in the middle of this   width you can think like that okay and  later on we have a container for this   and the container has box decoration so that we  can use rounded border okay and we assigned a   width and at the same time we assigned the color  and as i said earlier that if container and box   decoration together in general you can only assign  color to one and that should be for box decoration   and after that we want to put this image over  here and we also want some paddings around it so   that's why we put this image or image container  which is this one within the padding container   because if we have padding container it puts some  padding around that object so in this case this   is a container and within container we again  have box decoration because we want to create   a circular border like this or this shape  should be like a circle okay and after that   we also have this image over here which is pretty  simple just put the image right there using   decoration image and well so far we're pretty  happy with this layout so next we'll build our   actual media player and that's the fantastic  or most exciting part of this tutorial   all right to build a audio player like  uh the earlier image i showed you guys   which is this one okay first we'll use a plugin  and this plugin is coming from this flutters   official website which is called pup.dev and dev and over here we have this plugin and   i have tried many other plugins and this is the  best one so far in my mind okay all right so i'll   put the link below so that you can find it easily  all you need to do come to this installation page   and copy this command and once you do that go to  your project folder and uh well in your android   studio or whatever you're using find a terminal  and make sure that you're at the root and in the   project itself and then you copy paste the command  and hopefully it should download everything very   quickly uh while it is downloading though i  don't know how long it would take uh because   i'm in china anyway so looks like it's everything  is done and if it's done then we should check our   uh file which is called uh pubspec dot yaml this one and over here you should see a dependency   which is called audio players this one and if you  have exactly the same thing like mine it means   you're following along right with me okay so so  with this we are confirmed that the audio player   plug-in has been installed but now the problem  with audio player plug-in is that it comes with   very basic functionality it supports actually a  lot of functionalities but there is no direct way   to use them so in the rest of this tutorial i will  show you how to build this different buttons like   for example where is my image okay this one so  different buttons fast slow forward fast forward   repeat and they close the page when you go  to another page like that or close the audio   automatically and start next audio like that  okay so well now audio player has been installed   so we can um close this one okay and now we  want to use our audio player right over here   within this third position widget right below  this text okay right below this text would be   over here somewhere over here okay yeah  so this is our text widget so over here   and but now we want to implement this audio file  and feature and everything in a different file   so we'll create a new file we'll call it uh say  audio file dot dart like that yeah and over here   we need a stateful widget because we want to  change the state of our audios because we'll   stop it start it repeat it so there are many  different conditions involved and based on that   we'll have a re-render of our component so that's  why we need a stateful component and we'll call it   audio file like that okay and then we need  to import another file this one okay perfect   so well right now everything is empty for this  audio file not much is there okay all right   what we could do now we can initialize our audio  file so we can initialize our audio file in our   initstate function so let's go ahead and  call this function we'll call void initstate   okay and super dot initstate() so this  will this will initialize our audio player   okay and first let's declare a  variable for audio player so audio do you play it this one i guess it got it   that's not okay and the variable  it will call advanced audio player advanced i think it's a bit long  name so we'll call it advanced player   like that okay so we declared it  there and now we'll initialize it   over here and let's initialize it so we'll  call this variable advanced player and audio audio player this one and and will not pass  anything right now okay so it's pretty much   there let's go ahead and compile it and see  make sure that everything is working correctly   um yes we don't have any error let's see or we  might have an error so missing plug-in okay i   know we might have to restart our file from the  scratch okay because we just installed a plug-in   so until you restart so a lot of the files are not  compiled during hot reload and this plugin itself   might have some of the dependencies as you can see  from here installing some pod files because we are   on ios simulator and it might take a couple of  minutes so once it's done i'll be back thank you   oh it looks like it's actually done okay okay so  it means when we compile and everything is working   pretty good okay okay so now we have this uh  our widget which is this one and right below it   right below this text widget we'll call our  audio page so our audio file the file's name   is audio file audio file which is this one okay  all right oh and we'll pass parameters to it we'll   call it advanced player advanced player okay and i  think we need to import it otherwise we'll get an   error okay import it now this error because  in the constructor itself we need to mention it okay and over here  the same thing i'll call uh audio player this one and let's see  we'll call it advanced audio player or advanced player like that okay and in the  constructor itself we also need to mention it   so this dot advanced player have an error because  we need to declare it as a final as you can see   that try to make it final because we have const  here so we'll do it final and see what happens   okay perfect and another problem i think i had  earlier over here that you need to put it this   comma instead of semicolon okay so let's save it  and run it and once again everything is working   fine because we don't have any error over here  all right okay well now it's time to get our hand   dirty with audio player all right here we are  with this audio file and i already initialized   some variables and some functions let me walk  you through so within our uh stateful widget   i have uh initialized two variables one is  duration and the other one is position therefore   uh keeping track of the audio file itself so  it would be from the beginning of the audio   file and this is uh like how far the audio  played so it would show on the slider we'll have   a slider later and i also have three booleans  over here so therefore maintaining the state   of this button itself uh based on this boolean  will change the icon color and things like that   at the same time i have loaded a file from uh  internet so i'll keep the i'll put the link below   of this video section so that you can play  around with this but again later on we'll see   how to load these things dynamically and change  the url and make sure that you have https https   like that and if if you load on the network  you should have https especially on ios   and for that reason you sh this one okay so over  here you might need to do a settings because you   want to load it over the network okay so that's  why you need to put some settings over here if it   doesn't work you need to add this code this code  within your file over here okay add it somewhere   if it doesn't work if you get error in general  you should get an error and if you get just put   it there but if you do have asset or audio file  like mine with https then you should not have an   error anyway so later on i have this uh  list for icons where we'll maintain the icon   based on click and after that we have initialized  the uh audio player with the different uh   variables and states like over here uh when the  duration change as the audio plays we want to keep   track that thing so we initialize using this  function and this is a very common function for   playing with audio pretty much all the audio  player they have this thing and this is the one   that we start our position of our um audio like  from zero seconds it starts so that's what it   shows us and this is the final duration or the  total length and this is what changes all the   time as the audio plays and at the same time you  also have to set the url uh for the path and the   path is this one okay and do remember because we  initialized our audio actually from audio detail   file or audio detail audio page file which  is at the top we did and we are passing   over here to the audio file so and we initialized  in the constructor so to use that audio instance   you have to refer it like this widget dot advanced  player because that's coming from another file   and through the constructor so you need to  refer it using this widget dot advanced player   okay and after that i have another  function for starting button   uh which is well again this would be a start  button and it has some basic condition and   the button is called within load asset  because we'll have lot more different   buttons so that's why i call it load asset or  asset button should be a good name and within   a build function within build function i have  this load asset over here and this will use later   so what happens from build function we call load  asset and load asset in terms go ahead and call   button start and button start is this  function or this also a widget actually   and it shows the icon okay so well we can go ahead  and play it but nothing will happen okay if we   click on this audio or this button nothing happens  so now we'll learn how to play the audio okay so   we can we can actually press on it but nothing  happens so as we can press on it we can play the   audio okay so to play the audio all we need to do  call this dot widget dot advanced player dot play and you need to pass the path of the  audio and which we initialized early over   here okay all right so now if we click on this  we'd be able to play so let's go ahead and do it   okay yeah so things should be pretty good stop it so i'll stop it from here okay it's gone   and i'll play it once again but not play the  audio i'll just restart the app okay so now   what we could do we need to keep track of the  press okay so that's why we initialized this   booleans up there so the first thing we  need to do well now they're also initialized   to false so very first thing we need to  change the icon so we check if is playing false if it's false if it's false we show the  first icon and first icon is this one so which   index is zero so index zero all right okay and  if it's not false so we show a different icon the next one okay all right so if it's false of  course at the beginning it's false so we show   this arrow icon once again this arrow icon if  it's not false we show this pause icon over here   okay all right but now we need to  change the state based on price so   right now if we press we start okay so once we  press immediately we have to show the pause button   so that the user can pause it okay all right  so what how we could do it we so when once   we pause it we need to happen we need to make a  re-render render of this ui and that only happens   from setstate() function is if you have a setstate()  function and if you change within if you change   something within setstate() and that it causes  a re-render okay so now we'll set is playing   equal true okay so if is playing is true so this  condition is not true over here so we'll fall back   to this one okay all right okay so that's what's  happening here and what else we could do let's see   at the same time we need to check  over here if is playing if it's false   then we'll continue with this condition okay on  pressed it text if it's currently false or not   if it's false then we'll set it to true  and because is playing set to true and   which is also within setstate() function so  it causes a re-render and if rerender happens   then immediately we'll see the next icon okay so  not this icon all right and what happens if it's   not true if it's not false so it means in  that case it is a true okay so it is playing true if it is playing true what do we do  we want to so if it's already pl if it's   uh is playing is it true which means  uh a user has pressed on it okay   so we we we want to stop it so  we'll call setstat once again   let's see the function so let's start so  he's playing false okay and at the same time at the same time we need to set this one to  pause we can just call the pause function okay all right so let's go ahead and play it and  then i'll explain one more time hopefully better   than last time let's see if we have an error no we  don't have any error so we can play it chapter 16.   the icon changes okay so what happens here  once so currently this is false currently this   is false so that's why we see that this icon  the first one this is arrow and if it's false   if the pressed button triggered then  we play the audio okay play this audio   and at the same time we change the state of this  variable which we set it to true because if it's   true we can see that it's playing because  there would be this pause button okay so   next time when we play on this press on this  unpressed button or event when unpressed happens   it checks oh is playing is it true if it's true  and we click on it it means the user want to stop   it so we stop it and at the same time we change  the is playing immediately to false if it's false   because it's within state setstate() so the  re-render happens again and because rerender   happens so we see the first icon hopefully it  makes sense chapter 16. okay well now that's about   playing and pausing okay now at the same time we  want to show the time at the top okay so the time   actually happens from here okay all right as i  said you early that position is keeps track of the   time of the audio which is playing and  as the audio is playing the time changes   and that's where we have this uh position  variable it stores the time and it is initialized   early when we initialize our audio file  over here so on audio position changed okay   so we have a variable this one and this variable  initialized right before that over here okay so   this uh underscore position keeps  the track of the current audio time   okay and duration keeps the length of this  audio okay so let's go ahead and play it okay now let's play it well definitely we don't want this milliseconds so  we need to split them okay so to split them we can   use a function it's called split okay and split  based on dot okay because if you see over here it   has this dot here and before dot it's i guess it's  a seconds and after dot it's a milliseconds okay   the same for this duration variable which is this  one okay and we split it and after splitting it   we take the first one so first one is hour minute  and second so we don't need this thing once again   so we split this one first definitely we convert  it to string and then we split it based on this   one it's more like javascript function or other  php functions okay and then we take the first one   the same should we do the same one we should  do for uh the duration variable and again we   take the first one so let's go ahead and  save it okay now it's looking much better so we can stop it so  the next thing we want to do is uh   over here change the icon size  because right now it's too small   okay so you can do size 50 and over here size 50.  okay and at the same time uh we can set a color   for this okay so color equal colors dot blue okay  and the same one over here because black color   doesn't really match our ui over here colors  dot blue okay let's go ahead and see the end result okay well next we'll see how to  implement a slider over here so that you can   manually change the time so we are going to  work with slider i already have this basic   function and widget so i have a slider widget  i return a widget over here and i named it   slider and its flutter itself has a widget  it's called slider so that's what we are   using here okay and it takes a few parameters  of properties as you can see from there   uh so the we have defined different color active  color and inactive color we'll see very soon   and then slider will also have maximum value  and minimum value so this value is this one   more like when it starts like from zero seconds  and this is the maximum second of the slider   this is the value the slider can reach and after  that the slider will stop and this is from where   it will start and again we define a minimum value  in case if you pass here negative so that's why   this minimum value and someone taps on the uh  slider so what it does it takes that value and   change it to second well that's what we are  doing here so someone taps on on the slider   we take that value and change it to second when we  call this function change to second and set it to   a function which advanced player has i mean which  our audio player has that's called seek function   so it is the function like when someone taps on  the slider it takes that value and this function   is called sick and we just pass it to it okay now  we can go ahead and call this slider from here   slider okay and let's uh  run our function run our app okay perfect so this is the slider we have seen  but the slider is at the bottom we don't want   it at the bottom we want it at the top so let's  see if we can move it up and see what happens okay perfect okay yeah no now let's run it okay we can move it anywhere we want  eight one eleven okay so now the sliders it is   working perfectly uh and next we'll  implement our different buttons like   fast forward slow forward and repeat and other  buttons there now we'll have these two buttons   for fast forward and slow forward and right  now i just have this image for this buttons   and there is icon and at the same time their  icon button and i have this basic color setup   and nothing else and the on press event it's  pretty empty so let's go ahead and call this   to well i think we are using them as a widget so  let's go ahead and call this to widget from here   so over here we want to put the first uh button  and which is button slow so once we press on it   uh the audio would play slowly and next we'll  have button fast once we press on it the audio   will play fast so we can go ahead and run the  app let's see the result and of course it doesn't   work only thing it works here this one but fast  and slow forward they don't really work that's   because we are not implementing on press event  so on fast button or button fast we can call   the function widget advanced player and here  we have a function it's called setplaybackrate this one so these are the functions they  are written internally internally within this   file so if you want you can go ahead and play  and look at the file so you'll understand more   okay now we can set here let's call playbackrate  and we can set it to 1.5 i think the highest rate   is two it starts from zero i guess or 0.5 you can  read the documentation if you want to understand   more and i'll keep the link below of this video  for the documentation so you can play around with   that okay and would do the same for the other  one we can just copy paste and instead of uh 1.5 we can do 0.5 so it would play slowly and  with 1.5 it will play faster and with one it plays   regularly okay so let's go ahead and see  the result okay now we started yeah now we can slow forward now  it is playing very slowly as you can see the me   the second slowest uh the second  this one over here is very slow   all right yeah so we can do it again fast  yeah well very slow pretty slow all   right so that's how we are done with this  uh fast forward and slow forward button   next we'll play around with other two button  which is repeat button and loop button   okay now we'll do this two buttons which is  button loop and button repeat so mostly we'll   be playing with button repeat button this one and  we have a boolean at the top we declared earlier   which is is a loop instead of his loop we can  call it is repeat so it will help us to keep   the track of the repeat button and the name  was wrong though repeat well i guess repeat repeat yes all right okay so we are over here yeah  this one okay right now uh what we could do we can   over here call them okay so we'll call  it button that's a repeat and button loop   button a loop i think we're missing a comma  here let's go ahead and see the result   once again if we click on them nothing will happen  because we didn't implement any on press event   so we want to implement on press event here so  as usual just like last time first we'll check if   is repeat if is repeat you call false then you  have to do something okay false means nobody has   pressed on it if nobody has pressed on it though  we can set the state to repeat because we want   to repeat it so widget dot advanced player and it  is a function called set release set release mode   okay this one and it takes okay well it has a  parameter called release i guess release and this   one actually so we'll use this one so it will keep  repeating because it said release dot loop again   if you don't understand this function you can go  ahead and see the documentation and the function   itself okay all right so once we press the button  definitely first time it is his repeat is false   so it would fall back to this condition and it  will try to plain loop and at the same time we'll   press is uh it will put it is repeat as true  so the next time we can change the condition   okay as we put it as true like this okay  well so that's what's happening here and   well i think we can put it within our state  variable because we want to re-render and   change the color once the button has been  pressed so we'll cut we'll call set state and   put it there and at the same time we'll change  the color of this icon all right okay so well   right now we don't have any place for changing  color what we could do we could declare a variable so we can declare here a variable called color  and we'll call it color and is the type is color   actually type of variable is a color and  an initialize a color to it colors.black   okay we're good and then now over here our  button which is sad repeat over here we can   change the color so the current color we give it  color color so this color is coming from the top   we saw early so we want to change this variable  of a color value when the button is pressed   so what we could do we can call color equal colors  dot blue so once the button is pressed this color   is changed to blue color and then because  it's within such state variable so render   happens and the image icon and the color change  very quickly okay so we could do we could um   run it and uh play it and over here  we can verify if it's going to   or play in a loop like this okay so hopefully  it will play in a loop yes all right and again   of course we can play fast forward . slow  forward and we can go there fast forward and the   loop would still work as you can see all right yes  okay so the next thing we want to do we we want to   unrepeat it okay you want to repeat or unrepeat  because you don't want to listen a song forever   right and who does anyway so now here's the  condition so we'll check if else is repeat equal true then we'll do something else so we can  copy paste this one and put it right over here and set release instead of loop over here we can  call release so it will release from the loop   which means it won't repeat okay all right and in  that case we'll put it back to a different color   which is color black instead of blue we'll  do black okay now let's go ahead and run it okay so let's play it yes now it will run in a loop let's check if it runs or not yes it stopped there but now the next thing  we need to do uh if the audio has done playing   we want to reset it back to here and change  this icon as well so that's what we'll be   doing next in this part of this tutorial we'll  learn how to uh reset back to the slider when it's   uh finished playing like when it's over here  like right now we can do a uh experiment   we play it put it at the end and we'll see  that it doesn't go back to the original place yeah so that's what we want to do so and  it's pretty easy to do the first thing we   need to do i call a function it's called onplayercompletion things like that so we'll call from our   advanced player and it has onplayercompletion  this one and it also has an event for listener   uh for this function listen okay and within it  we'll have a state variable because we want to   change the slider state as well as it should uh  start from here so it's a ui change so we should   trigger a re-render to trigger a re-render we would  call within setstate() function okay so the first   thing we want to do is putting this position  remember this is the only initial position   and the position that changes with the slide okay  so this is the variable that's responsible and   saves the value so we'll set it back to zero  and we'll do duration uh seconds zero okay   and at the same time we want to change this icon  back to the original icon which is this icon   all right okay so we'll do is playing false is  playing false okay and at the same time is is   repeat let's see we can do is repeat false  or not just to make sure that everything is   the default setup okay all right now we need to  restart our application in general if you have uh   this set stained most of the time if  you don't really restart it doesn't work   let's see if it works or not okay now we  are back here and let's see what happens okay perfect so now it gets back to zero  over here right and that's what we wanted   now what happens if we run this audio and if  we have this repeat function yeah   let's see what happens here so you see this  icon is wrong in this position we page 100 see   this icon over here but okay all right so let me stop the audio first   and let me restart it again okay so it's not  changing because of this condition okay so   well when it's it's playing we need to check if  it's playing or not if repeat condition is there   or not so we can check if is repeat if is repeat  equal true if we are doing repeat so do something   uh let me move this up because the default  condition for everyone else okay and also this two   conditions will put them up okay so now if it's  a repeating position or we we clicked on this one then what we do is playing back to true okay so  if it's back to true we remember that if it's true   then we will see this icon okay and which we saw  early in our condition in our widget function we   can start over here we have seen this condition  okay if this condition is false the first icon   otherwise we show the second icon all right  so now we could do go ahead and see the result   okay let's restart our app okay i guess  it did all right and now we'll play it   yeah now let's go and  see the result what happens   okay perfect so this icon is 36 we expected okay  all right now what happens if we don't want this   one say i'm sorry on a sudden restart of  the application all right so let's see okay uh now we want to see if we release this what  happens okay yeah release this one what happens   yeah now there's another problem we release this  and we don't want to repeat so this icon should   change as well but this icon is not changing  because we need to send the condition over here   okay uh btn repeat this function widget  function over here so once we release this   condition it means we don't want it to repeat  so in that case we need to set it back to false   is repeat call false okay now it should work so  let's go ahead and run our application all right   and restart everything let's see so here and check  with this one first okay let's see what happens perfect so it started the icon in the same icon as  expected okay and now we pull it back to over here   and let's see so it should come back to this place  and icon should change yes perfect so now we can   do as the thing we expect one let's see  other conditions there like this one one okay   it's working and this one it's working as well all  right okay so this is pretty much our audio player   here it's really a little ready and there are a  lot more things that we could do with this but   we'll keep these things for further tutorial now  we'll see how to dynamically add this audio in   from our playlist so we'll have a playlist  here and as well as from our front page ui   so in the next of this rest of this tutorial we'll  first focus how to create a playlist here okay   this is our audio page and this audio page has  been done through this class which is called   detail audio page now we want to go back and take  a look at our home page okay which is my home page and this one is coming from this class  uh where this one and the class is called   myhomepage okay all right so we already did  it in our previous tutorial if you don't know   how to do it check out the link below and start  from there i'll also put the link for the code   and youtube tutorial so that you can follow  along smoothly okay so now we'll start the app   and see the result okay so the our homepage  was pretty much like this as we did earlier   tutorial okay now what do we want to do we want  to we want to be able to click on each of them   okay and go to a new page do remember that  earlier we have loaded a lot of information   for this cards we loaded them in a json file  okay and we stored them in two variables one   which is one of them is popular books the other  one is books okay and they're list type variables   and we decoded them and then we saved them in  books and the other variable popular books okay so   and then we rendered them so now what we want to  do as we click on this we want to pass some of   this information like this writer's name subtitle  and audio to another page so we want to push them   to a new page do remember that this information  all are coming from json file which is books.json   and this json file we simulated real world  application because in real-world application if   you request something from a server the server  returns things as json okay json request and   within json request you will have a key and for  each key will have a different value so in our   case these are the keys and these are the values  and our audio file has changed a little bit from   the previous tutorial in previous tutorial we  are saving them as a local asset but now we want   to load them remotely from a server because  that what happens in real life most of the   time you load audios from server so most of them  should have https if you don't have you have to   do some certain settings which i said earlier in  this tutorial so if you didn't follow it you can   go back and check and if you still don't  understand you can leave a comment and i'll   try to answer your questions okay so this is our  json file and once again this json file they're   all load over here loaded over here in this books  variable and popular books variable so now we want   to push them to another page so to push them uh  we need to find the code where we can push them   so we know that there is a code for is responsible  for showing each of these cards so let's find it   and so far i remember this is the code which is  responsible for showing um each of this card okay   so we and here is a container and this container  shows each of these cards so we want to wrap this   container within a gesturedetector()okay and  gesture detector takes few parameters the first   one is ontap() and ontap() is responsible for pushing  things to a new page okay and the second one   second one would be a child and we can wrap our  container as a child of this gesture detector   okay and we need to return things over  here using semicolon okay all right so now   if we go ahead and run nothing will happen and  on tap event on onto response because we don't   have anything to response okay so to response or  to go to a new page in general you use a component   or a widget which is called navigator() okay and  navigate from navigator you can push things okay   and navigate it takes two parameters first one is  the context most of the time we don't change it   and next one is the route route tells you  which page to go so in our case we are only   going to one page which is this one and this  is not a certain route actually this is a   class so to use a class as a route what  we could do we can wrap it around using   material page route this class and it takes  a function actually the function parameter   is context and then you can call the actual  function okay this actual function is the class   or file you want to navigate to in our case this  is detail audio page this one okay and we need   to use semicolon otherwise we'll get error okay  now let's go ahead and save it and see the result okay now let's click on this of course we we can't  we came to a new page but if we try to go back   can we no we can't go back so why not because this  button doesn't response and this button is over   here okay this button is over here ios button  and it should respond to an on press event so   we'll call unpressed and over here we  want to response back okay or go back   as just now we saw just now we saw that if you  want to come to a new page use navigator.push   so if you want to go back from that page to  another page you use navigator.pop okay navigator navigator.of .pop okay now let's go ahead  save it and see the result okay yes so now we have this page and if we  click on this we can go back now come to new page   and tap on this button and we can go back same  for this one so it's working properly but now the   problem is wherever you click it shows you the  same information right even over here the same   information so now we want to able to change the  information and this information is coming from   the json file as i told told you early okay so  now what we could do we can pass this json over   here this json data which is stored as a string  right now so we can pass them to this uh detail   audio page okay all right so now we can pass it as  books data book so this this is what we want to grab   over here in in its constructor so we'll declare  a variable called final books data and then over   here we'll call this box data okay perfect and at  the same time do remember that this file also has   this index i you also want to pass each index this  index is connected with each of these cards so   the first card has index zero second card has  index one and the third card has index two so   forth so on like this okay so we want to pass the  index as well and we can pass it like index dot i   all right okay and we need to grab this  index over here so let's go ahead and   declare a variable final int index okay and  we need to initialize it in the constructor   okay and now over here the arrow should  be gone yeah there is no more error okay   all right so now we are passing this data uh  in books data and also the index so what we   could do we can grab this information over here  which i already did and change our information   over here okay so earlier we did hard coded  information but now based on index and   json data we want to change them so let's  get the json data fast so our json data is   within this variable which is called  books data all right now we want to based   on index we want to get certain values  so call our index this the widget index   and now the first one over here so this this  was a title if you remember from our json file   so this is the title and title is the actual  book's name and text is the writer's name right   okay and now let's change it uh over here so  what i could do i could copy paste this one and   put it over here and instead of title now we can  call text all right so let's go ahead and save it   okay application restarted so remember our  writer's name is the water the book's name   is the water cure so we come here we can see water  cure and this is the writer's name okay and now in   this case our book's name is peace life and writer's  name is hazard bin perfect so looks like it's   working so now here's Day Remember and Nicholas  Day Remember and Nicholas now what do you want to   do you also want to change this picture over here  based on books okay so the picture was over here   it was hard coded as well now we can change the  picture because we have the json data this dot   widget dot books data and then again we'll call  this index this dot widget dot index once again   if you don't know where is this index coming  from index is coming from over here this one over here this one okay all right so now here we  can call our image so we can just simply call img   do remember that again img is this one so  each of them they have different images so   what do we do let's restart our application  and see what happens okay so another for the   first one we have this image and this information  and we'd be able to see the same thing over here   and for the second one the image is different  and again the new information for the authors   and the subtitle and for the third one the same  perfect so now these things are working pretty   good in our application next we'll see how  to pass a different audio for each of this   and play them now we'll pass the audio to  the audio player because right now they don't   they have the same audio so we want to have a  different audio for each file okay all right   so to do that we need to find our audio page  file like this file so let's find where it is okay yeah this is over here and all we need  to do just to grab the audio and pass it   to grab the audio we'd write like this this  dot widget box data and then this dot widget   index so index takes uh the uh keep the  record of the number of item we have over here   and then we all we need to do to call audio from  our json file like this key all right and we need   to assign it to a variable so we'll call it audio  path like that okay and well we have an error here   because we need to do the same in the construction  for audio file over here so let's go ahead and   declare a variable we'll call it final string  audio path okay and within constructor we'll   initialize it we'll call it this dot audio path  okay now we can access this variable from our   file using this dot widget dot audio file audio  path like that and we no longer need this one   uh so from here we can call this audio path this  dot widget dot audio path all right and in one   more place we need to uh replace it over here  this dot widget dot audio path okay right now   let's go ahead and save it and run the program  okay it's reloaded as you see all right now   this is the audio number one hopefully so as  you can hear . okay so this audio page   talks about chapter 16 page 149. so  now let's go to play the second audio so yes they are different audio so it means  that our audios are being loaded dynamically   okay now there's one problem if you play  like this and go back you'll find that   it's still playing okay but we don't want to  play we want it to stop automatically okay   right now it's not stopping but  anyway i'll stop the app first okay and i'll start   it at the same time i'll edit the code so to stop  it automatically when you click on the back button   we need to implement a line of code  first we need to find the back button   while the back button is over here hopefully  in our uh second widget this one over here   so when unpressed heaven happens we want to stop  the audio so right now we are returning a line   of code but we want to return a block of code  actually so to do that all we need to do like   do like this and put a semicolon over  here now we can write few lines of code so once on press happens first we'll stop the  audio and we have an audio player instance over   here this one okay so we'll stop it so we'll just  call advanced audio player sorry advanced audio   player that stop that's all we need to do okay  now let's go ahead and hot reload our application okay now let's see . okay now let's  go back and see yes it stopped automatically . let's go back and it stopped  automatically now let's play it again   and let's do the loop if we can loop it or not yes it works . all right so all these  few buttons are work they work at the same time   but i really don't know what is this for  though for now so well with this actually   we are pretty much end of this tutorial and  over here definitely we can add a playlist okay   and i'm going to leave it up to you how to do  that we can optimize this audio player further   for example if you play an audio and then you  stop it for example right now it stopped at 0.04   but if you restart it it should it it starts from  0 0 0 but it should start from 0.4 seconds which   it doesn't as you can see so definitely we can  optimize it and you can try to do it on your own   and if you can't you can leave a comment in the  comment section and i'll reply you how to do that   and at the same time if you liked this video  and if you learned something from it don't   forget to share it with your friends and don't  forget to smash this like button and subscribe   at the same time and you need to stay soon  for the next upcoming videos at the same time   leave a comment in the comment section that what  kind of videos or app ui you want next time and   what kind of backend you want because we might  have uh firebase node.js and laravel or python   just let me know what kind of back end  you want okay and i'll try to make a   app or backend like that and share it with you  guys so i'll see you very soon next time take care

Channel: dbestech

Views: 22,766

Keywords: flutter audio player, flutter audio player plugin, complete flutter audio player, flutter audio player step by step, build flutter app audio player, flutter audio play from the internet, flutter advanced audio players, flutter audio player app tutorial, flutter crash course step by step, latest flutter plugins for audio players, best flutter audio players plugin, flutter audio player tutorial, flutter audio player from url, android and ios audio player

Id: CF3Q7YfvH7Q

Length: 88min 33sec (5313 seconds)

Published: Fri Jun 04 2021