Flutter App Development 2021 | Flutter EBook App UI With Audio Player | Flutter UI Tutorial

Hello everyone let's get started, so this is the  default app setup i have here and i have this   main.dart and from main.dirt i'm calling home page  my home page and this is the file over here and   it's pretty much empty and it's black and here  we have this debug icon so we'll remove it first   and to do that we need to call uh property here  it's called i guess show debug something like this   uh this one and we'll set it to false and after  restarting it should be gone that's gone now   now there is this black uh screen color which we  don't want and to the to do the change we need to   call something from here and of course we need to  call safe area that's what we'd be doing so that   on android and ios this top part uh is visible  and our content is not covered by this top part   so we'll call a child and within child we'll  call safe area and we can safe area will called   another child and within it we'll call scaffold  okay now let's go ahead save it and run it   and we are pretty good right now but you see this  is a black color over at the bottom and the top   so it looks weird so we want to give it a default  background color so let's go ahead and assign the   background color and i'll call color and now it  would be coming from a different file the color   they're coming from app colors from this variable  and which is imported from this file over here   and i have created a color file and in the  color file i have all the colors needed for   our app so we'll just call the color from here  so the first color we'll call is background so   in my file over here i already imported it as  app colors so all we need to do call up colors   dot background and let's save it and run it and  it's gone now we have the same background color   okay and after this the first thing we want  to do if we go and check our picture over here   so let's uh let's go ahead and check it so the  first few things uh this icon and this few icons   we want to show them okay well now every icon  should every that everything should be gone   within everything should go within the scaffold  widget okay and scaffold takes a body property   and within body we want to have uh say column  okay and within column will have a container where   we'll wrap everything but first thing we want to  declare children list this column takes children   and within it here i'll have this thing as a role  okay all right so we can go ahead and do it so   let's go ahead and call row okay and row should  take uh the first one is this image icon okay so   it'll take children list of children and the first  one is this image icon so we'll call image icon   widget this is our image icon widget and with an  image icon we can call uh first one is asset image   asset image and with an asset image we'll call  this image so this image is saved in img folder   and it's called many.png this is it and after that  we'll assign it size to it say size 24 and color   colors dot black okay in general you should  assign a default color for image icon   if you don't assign a flutter will  have a different color something like   gray i guess so let's go ahead and save it and  see okay all right so right now it is over here   the next thing we want to do is showing  those two icons and those two icons i'll put   in a row okay all right okay so  let's go ahead and call here row   and within the row we'll have this first icon  so of course we need to call children list   and the first icon is uh we'll call like icon  icons dot it's called search okay we're good   and after that we'll have the other icon this  is called notification so call icon widget and   within it we'll have icons as a and with an array  we can call other icons like this is notification   it's already there and we'll save  it and see the status of this thing   so right now they're too close to each other which  we don't want so we have this uh two objects here   image icon as for the first one and this row  is for those two definitely we can separate   them and we'll separate them calling main access  alignment property so main access alignment dot   space between so there would be as much space  available between this and these two things   go ahead and save it and we should see  there is a change here and now also   these two icons are too close and we  can separate them by using a sized widget it's called sized box  okay and we'll have width like 10   now let's save it and see the result okay  now perfect but now the other thing we see   that this is too close to these icons uh i mean  there's border all right so it got some padding   that doesn't matter but this doesn't have any  padding and but too close so what we could do   we can wrap this whole thing within a container  and we can give the container uh margin okay so   now this one over here okay this two so this row  we can uh wrap it within a container container okay and the container definitely takes child  and we'll move our row within this container   so uh option is shift option upper arrow and you  can move it all right like this okay so now we are   good uh let's go ahead and save it even after this  save we won't see much change though is the same   thing uh we can apply margin to it now so margin  const edge while only so we just want left and   right margin so left to 20 pixel and right 20  pixel go ahead save it and run it see the end   result okay perfect so now it looks pretty good  okay all right so the next thing we want to do is   showing this word over here popular books okay  to do that the first will do declare a row and   within row we'll have list of children so the  first one is uh uh container okay and container   should take child and we'll use a text widget  for this and we'll call the text popular books   and we'll apply style to it basically the font  size style text style okay font size 30 and we are   good all right and uh let's go ahead and save it  and run it but i guess we have an error over here   um i think we're missing this and this  somehow missed it okay let's go ahead and   run it and see the end result okay all right  so well now it's over here and this container   uh is it too close to the border so we can  apply margin to it left margin so let's go   ahead and do it margin const edge only so right  margin or left margin i'll apply 20 pixels okay perfect now as you can see they're  too close to each other so we'll create   a height between them so we can use this size  to box widget and we'll apply height as a 20.   let's save it okay so of course now it looks much  better everything looks much better okay so the   next thing we'll do is uh showing this slider over  here left to right scrolling slider okay okay so   to do that uh first we'll declare a container  okay and within container we'll have child   and within child we want to return page view  page view dot builder and the page view.builder   it takes a function the first one is uh for  now we send in um it takes two parameters   first one is empty parameter the second one  is for index we mention it as i actually it   could be anything here it doesn't matter though  and within it it will return something within   it it will return another container okay  all right okay well now this container   will have height so give it a height  180 and we'll provide it a decoration decoration and we'll use box decoration unbox  decoration has border radius and we'll apply   border radius dot circular border say 15 pixels  everywhere and within it will supply image   so we'll use decoration image on decoration image  takes a property called image and within it we can   supply um asset image widget and which takes  image path img dot i'm just last say for now   pick a dot png that's what i have um  my all of my pictures are saved here   okay so if your pictures are like this in a folder  like img you also need to set up them in your   pop spec.yml file here the uh folder for our  assets so all the assets these this and this   they're all here okay and make sure within those  folder you have the correct assets all right okay   so now let's go back to our file this one   okay and uh this one uh page uh builder it  also takes a controller so as a property   and will provide a default controller for it  which is shipped out of the uh shipped out of   uh flatter automatically and it takes a property  called viewport fraction and only 0.8 for now   okay all right and well we'll run it now but after  running there might be an error and most probably   because we are here missing the height again so  uh this container height and its parent container   uh they should be same all right okay uh  and another thing we're also missing here   the number of time this should uh run in a  loop so you need to remember that page view   that builder is more like a loop which runs  and you need to tell it how many times to run   and we'll call we'll say it should run five times  so we'll see the same image five times all right   let's go ahead save it and run it okay yes it's  it's there perfect everything is working perfectly   okay as you can see we can also scroll it but now  we have this same image which showed up again and   again five times we'll change it later all right  okay uh so that's about this uh scrollable uh   bar over here or the pictures okay  and another thing we need to see that   we want to put it over here like in this direction  okay but because of port view 0.8 it takes   uh 80 of the screen size and rest space are used  for the other elements of course this is the first   element that's why over here it's empty uh so  there is no way to put it directly over here   in this position that's why we need to use uh uh  positioned widget so we need to wrap everything   all of it this thing within a position widget  all right okay but position widget should be   within a container okay uh and container  takes a child and position should be inside   a stack widget okay stack should be inside this  container widget that's what we wanted to say so   now we'll go ahead and call this stack widget  and the stack widget itself takes children and   in this case we'll have only one child which is a  container let's see okay all right and over here   uh well now one thing is also missing though uh  this uh we within stack we'll have another child   which takes a position widget and within position  we get we need to move our container this one okay all right and positioned within  position widget will have we have this   container but it should be stay there as a  child okay now perfect uh the arrow has gone   uh but i think we still have this error  over here actually i guess we don't need uh this one yet here okay let's delete it okay and over here we need to declare uh uh  like this is a list which is for children okay   and we should put everything all this code uh  within this but now it should not be as a child it   should be as a positioned widget and uh just one  widget not as a child it's part of the children   list okay sorry for the mess up though so while we  did it here we wrapped around this uh stack widget   within this container and stack takes uh children  a list of children and in our case we have only   one child at that position and within position  we have this container and everything over here   okay but position itself takes a a few  parameters our properties the first one is top   top is zero left left is zero and right right is  zero okay now let's go ahead and save it nothing   uh different would be seen yet  okay we have an error over here   and this error happens something maybe  related with the flatter itself because   if you come over here it will ask you to submit  a bug in on github to work around this problem   we need to declare the height property of this  container okay so height 180 and now the problem   should be solved so perfect so remember this  height should be same as the height of this   all right so all these heights they have to be  same which is the height of this image actually   okay but our ultimate purpose was moving this  image over here but which did not okay now let's   change this uh vapor uh argument or parameter  let's change it to one and let's see what happens   so it occupies the whole screen actually i mean  it it's it tries to occupy the whole screen but   of course in our case um images pretty much  this size big but we can what we could do   we could do another property over here it's called  fit property for emit it's called box fit dot fill   okay now let's save it and see the result now  it's taking the whole width right pretty much   the whole width but this is a bit ugly  well that's what we don't want like this   okay uh so now the other thing we could do  to make it more like uh look alike uh our screen size and not distorted i mean not pretty  much distorted so we can apply our image width   over here so width should be we'll get it  from media query and of context that size   sorry it should be outside the dot size dot width  okay now let's take it and save it okay well of   course it's pretty much the same thing so now  over here we change it to eight and we'll see   it moved back to its original position okay now we  wanted to move it over here move it over here to   do that we can use uh this left property because  in default when it is one it occupies the whole   screen okay but when it's 0.8 it it leaves this  proportion so that's why it gets inside because   we have used position property so we can what we  could do we can minus this property okay so minus   20 pixels and it will move it to this section  over here okay so now it looks like more aligned   so we are done with this section though and the  image change will do them a bit later but another   thing we can do as you see over here we have this  extras uh this this space here but it's too narrow   they're too close to each other so we can assign a  padding or merging here so we'll apply i guess uh   margin so apply margin over here so  margin cost edge sets only and will assign   right margin okay so write margin 10 and let's see  the end result okay it's it's much good looking   right now okay and now you see that they're  too close to each other too close to each   other so we want to create a distance for this  uh like this so this is the widget or container   that's responsible for showing this so right  at the top of this we could do sized box again and similarly we'll apply height 20 and save it okay which looks much better okay all  right uh the next thing we want to do is changing   this image and to change this image actually  we want to load this image from a json file   and the json file is this one over here  so this json's files name is popular   books.json which is should be responsible  for showing this image and within this image   i have a lot of other information but will  only pull the images from this json file   okay so now we will go ahead and load this json  file do remember that the json file path should   be defined over here as you see i have my  json file in json folder so they're over here   all right now let's go ahead and load this json  file and in general you want to load within init   function which is in its state uh when the  function or things get initialized for that one   and it's a void function which doesn't return  anything and it state okay all right now we   also need to call super.init state all right and  over here we'll create a function i will call it   read data okay this one and now we'll call  this function or create this function read   data okay and within read data uh we have  to call this json file to call this json   file we can use a default function  okay and it takes a context parameter   and from it i guess it is a function called load  string this one and within it will supply our   json file so json file is it is within json  folder and the file name is a popular books   okay and then we'll try to load it okay yeah  over here all the values say instead of well   we can just call it s all right and over here  it's a null though so what we could do yeah   and uh now within it we'll we'll we'll uh load  this as in a state uh state function which is uh   set state okay and the sas state should load  it okay when everything is ready loaded every   streaming is done it should load within this  set state okay all right so now we'll load it by   called json. so over here the loading has been  done okay and when the loading has been done we'll   decode it to decode that all called json.decode  all right just under the code and we are passing   this one s variable which has the loaded json  file okay and we want to apply it to a variable   we'll call it uh popular books okay of course it  should be a list so we'll go ahead and declare a   list called popular books and for now it's empty  all right now i think we need to import something   called dart dot convert from the library dot  convert and we should be good after that okay so   this is the function read data and which is  responsible for loading json files using default   bundle and of it there is a function called load  string and you apply the json path and json file   once again it should be this one okay within the  json folder as you can see and it loads the file   and then so after this actually loading has been  done now once the loading has been done we'll uh   call a set state function to decode it  okay so once the decoding has been done we   supply these values to popular books variable okay  now after this this popular book should hold this   values in the json file and which would be pretty  easy to use for us later on okay now this has been   done though and now we need to call this somewhere  and get the values from this json file as it well   of course when it is here right now they're all as  a string okay so we'd be able to read them easily   and we can actually read them over here  so the first thing we need to check   popular books uh popular sorry popular books uh  well it's uh if it's equal null okay then the   item count is zero in this case nothing would be  shown here if it's not null then it means it has   something something is the thing that we're  looking for then it will take the length of this   thing so in our case most probably it's the length  is five so far i know so five objects over here   okay so we we have this one okay item count  and item account would be read using this i   you can also call it index it's up to you however  you call it okay all right so now the book popular   book should contain our json file and images as a  string and from asset image we'll read them okay   so now the first thing we'll do popular  box we'll call this uh uh list variable   and within it will our images so the first one  is i i i equal 0 should be the first one and then   we'll read the image property like this one okay  now let's go ahead and save it and see the result okay looks like there is an error so it says that unable to load this thing  okay so we must have a mistake somewhere   somewhere somewhere it returns a future and  if a function or widget returns the future   in front of it we should use a weight  okay and the function that calls the await   function that should also have a keyword  called sync so we'll apply a sync here   okay so now let's go ahead and save it and see the  result if we have things looks like the same thing blurbox.json okay yes now i was missing  this uh jason this uh well the type i guess   okay so now as you see we have different images  perfect so this images has been loaded correctly   and they are all lining up correctly okay well  the next thing we want to do is showing this   uh icon uh sorry menu button  over here okay all right so to do that um we have to call another widget  but first thing we need to know that we saw in   the earlier demo that this is scrollable so you  want to put these things within a scrollable   widget and this should be scrollable too even  though i just have three but if you have four   there would be scroll level so everything over  here they should be within a scrollable widget   okay and scrollable widget most of the time are  wrapped around expanded widget so we'll first   declare this expanded widget and it takes a child  and the child should be nested scrollable view   because within it we want to scroll everything  okay all right nested scrollable view view   alright so this is for scrolling and scrolling  has scrolling container sorry scrolling controller   so we'll declare this scrolling controller over  here okay uh we'll initialize them over here and   first we'll declare them over here so we need a  controller which should be a scrollable controller   so scroll controller tab is called controller and  actually in future we need another controller for   this tabs okay scroll controller is for the  whole thing and this for tabs we also need   a tab controller tab controller tab controller by  the way in flatter if you have underscore before   a variable it means private variable now we'll we  declared them there now we'll initialize them over   here so the first one is a tab controller and  we'll call tab controller and its constructor uh we'll have this three menu so that's what  we'll put here three and this thing is this okay and this thing should have a ticker  provider because if constructor takes this ink   the implementer of that function of that  class or like the implementer of this is   this class so this class should use ticker  provider so we'll call it from here using this   with keyword and then we'll call single  ticker provider with mixing this one   okay now the arrow should be gone so wherever you  have this vsync you have to call single ticker   provider or ticker provider it depends which one  you call and then we'll use uh initialize the next   scroll controller which is scroll controller  and it should be just a scroll container searches called controller okay and it takes  empty constructor which means it takes nothing   all right okay so now within this  we have to first uh uh give it a   give the property for controller tab or  controller which is a scroll controller   okay all right uh so we are good with this  scroll controller the next thing we want to do   is uh showing these things and for them we'll  use a property called bottom property let's see   i'm sorry this should be within a header property  so we'll call it header sliver header slider   builder and header sliver builder it takes a  function actually anonymous function and it   the function takes two parameter otherwise first  one is build context context and the second one is   a bull variable i guess it could be anything we'll  call it is scroll okay and then we'll return okay   and as we are returning we need a return  function okay and within this return function   will return a child this child should be  responsible for showing this on the screen   we'd be using a sliver abber splitter a burr okay  all right we'll have only one child within it   as we're returning we should have the semicolon  over here okay now within sliver wrapper   what we could do um we can first uh pendant  pin means uh this should be always there   when this content go up and down this shouldn't  change so pinned we'll use a pin to call true   and it has another property it's called bottom and  it takes a widget called a preferred sized okay   and preferred size has uh we call it for dealing  with style and size of this image buttons or these   buttons okay and also padding and label padding  things like that okay so let's go ahead and   called preferred size and the preferred size takes  the size property so size dot from height 50.   so all it is saying that you'll have  distance of 50 from here to here like that   okay all right and we have this one and after that  for styling purpose we want to wrap this three   within a container so we'll have a child here and  we'll call container widget and within container   widget we'll later on we'll apply margin uh for  now we can apply margin but we'll set it to z   all zero okay and within this we'll have a child  and child should be the tab bar to showing the   tabs itself tabber okay well now tabber takes  three properties the first one let's see well   indicator padding so the padding for this button  left and right for now we'll again we'll set all   to zero and we'll see what happens you can see  the result and after that we'll have indicator   size so tab bar uh indicator size level  so the indicator size something should   be here down there this size should be same  as this one which means the width actually   after that what else we have let's see  um indicator weight we don't need we need   level padding level padding and again we'll use  zero for it for now and what else let's see and   it also takes a controller and control is the tab  controller which we initialized early and it has   an scrollable two and then we'll have indicator  well indicator is would be responsible for showing   each of them and the design for them individually  and we'll wrap it within box decoration   and box decoration will give this border radius  okay so we'll have border radius border radius and   we'll have circular border and we'll apply border  like 10 okay for now and we'll also apply kind of   this shadow over here as you can see so to apply  the shadow we'll call the box shadow it takes a   list of children but in our case we'll have  only one box shadow okay so this box shadow   takes few properties the first one is the color  so the color of this shadow should be more gray   and then colors dot gray but we don't want  complete gray we want it with opacity 0.2   and then we'll have blur radius to confirm how  far the opacity or sorry the shadow should be   for now we'll stick to seven and we might change  it in future and offset and offset is responsible   for showing this uh shadow up and down or  everywhere so in our case we'll show it everywhere   so this first one is responsible for left right  second one is up and down so we are supplying   zero for everywhere which means uh it should  be around this container itself okay all right okay so we are done with this but of course if  we go ahead save it we will see nothing and most   probably will also get an error okay yes there  are many reasons for getting the error all right   uh let's see so it's missing body okay so it  doesn't have this body properly which will have   to implement and at the same times uh this tabber  also has another properties called tabs okay and   it takes the children and these children should  be actually these things okay all right so right   now we'll implement it within a container okay  container and the container should take a child   and the child itself should take a text okay  all right so our text the first one is new okay   and it should have style so  we'll use a textile widget and within it will have color so  color of this text should be   colors.white okay perfectly white now what  else we can apply so we'll have this container   size and height with width and  height actually so we'll use with say with 120 and height say 50. okay all right and  each of them should have a slight slight of shadow   okay so we'll use a shadow property over here so  we'll use decoration and we'll have box decoration box decoration and within this box  decoration we'll have border radius   on border radius it should be same as  circular and the earlier one which we used 10   so the actual tab and the shadow and the  containing container they should all have   the similar circular or border i'd say border  angle like that and we'll apply box shadow   so let's go ahead and do it box shadow and  the color colors dot gray okay with opacity   0.2 actually what i could do i could  pretty much copy this thing and put it   right here okay so this is our container  all right and because we'll have three tabs   three times over here so what i'll do  i'll copy them three times actually ctrl d   and uh i'm missing a comma over here and one more  time ctrl d ctrl d all right okay of course again   if we go ahead and run it we'll see an error  because we don't have the body property so   we'll apply body property to it local body but it  takes a tab bar view tab bar view and tab review   the text children all these children therefore  showing the content over here as you click on this   different tabs they should have different  content so those content are shown when you   click on particular tabs okay well for  now we'll just return a material widget   okay all right so within material widget we'll  have this child and we'll call the list tile   list tile unless i'm taking  a property called leading   leading is mostly what you want to  show at the beginning so we'll call it   circle avatar and it takes a background color  so we'll give this circular to background color   colors dot gray okay and this list i'll  takes another property which is a title let me select actually should be over here title  so title could be any simple text say content   okay so we are pretty much done with this  and now we can copy it three times i'm sorry   so what we could do we could uh copy it three  times so we have this three children tabber view   for this three tabs so now go ahead save it and  run it let's see the end result okay so we we   do have some problem here okay so i have this tab  control over here let's save it and see the result   okay so now we have a pretty ugly looking  tech controller over here as you can see   okay and it's pretty messed up but it is a  scrollable though all right so we need to fix it   the first thing we could do is for fixing  over here this sliver for preferred size we   can apply a background color back  background color colors dot white that's all right we can apply it a sliver wrapper  itself now let's save it and see the result   okay so now while it's still pretty messed up   a few things the reasons are because for  each container whatever we have here they   don't have any specific color okay so what  we could do we can apply color over here okay so say color all colors dot  uh the red and see the result yes the first one is red okay all right so we can  apply colors but we don't want to apply this color   we want to apply colors dot menu one color okay this is the  first one and the second one we can apply color many to color which should be let's see okay a little red but not exact red   i'm the first third container we can apply  a different color which is menu three color   okay yes okay all right so we have different  color now another problem with this uh uh   container they are not in the middle so we want to  apply them in the middle so we can use alignment   property and we'll use alignment.center and  which should put everything in the center   all right but of course that was for the  last one so what do you do we can copy them   okay copy them and apply them and apply again  over here okay all right let's say we didn't   see the result okay okay so right now actually  it's working as you see if i uh tap on them   uh it scrolls and the shadow  has also applied as you see   like this doesn't have a lot of shadow if i  click on it there's a bit of shadow over here so   everything is good but so the next thing we need  to do we need to separate them and also this uh   they're too close all right and the size of this  text okay so the first thing to do over here what   we could do is uh change the level padding and  things like that okay and indicator padding yeah   uh or we can also do from here okay we  can apply um padding and margin so let's   see how it goes better so indicator padding so  over here instead of doing all we can do only   no i guess we don't need to do it this one  we need to go with level padding so only and   we'll apply left padding 10. or go with the  right padding actually right padding 10. okay perfect so we have little space there and  the shadow is more obvious right now as you see   okay all right so everything is working and  now they're too close so we want to get a   margin for this this container should have  margin from this container and remember these   things are all within a container and this is  our container and for now we set margin to zero   which we don't want we'll do only and we'll  apply bottom bottom margin which is 20. perfect so now there is a equal space from  here to here here to here and here to here   and over here so they are almost equal the next  thing i want to do is apply a little bit padding   or margin over here and i guess we could do it  from here though uh so we'll apply left say 10   or 5 also which suits us better yes so now it's  more aligned to these things okay all right so   that's a different one though okay so now we have  this color match up problem actually as you see   so we want this color and this color they all  should be same though uh and see our color   thing over here so for sliver app we should  have our color same as this one though   now we can call it from sliver background  color over here so this is coming from colors   dot sliver wrap this one so but the  color should be same as you can see   uh in our app so that they have the same color  okay but over here the color could be different   later on we'll change them okay all right uh so so  far we are done with this the last thing i want to   do in this section is changing this uh size now  they're too small and they have the same content   what we could do we can declare a different  dart file and save them over there okay we   can call them my tabs dot dart and we'll make  it a state last widget not much to do over here   we'll call it uh maybe app tab is better the  function or the file name file name is the   app tabs but the class file name is my tabs  the class name is app types it doesn't matter   but app tab sounds better all right okay and over  here we would initialize few things and pass from   this file so what do you want  to pass we want to pass the text   and the color for the background color this color  okay all right text color they all should be white   though we'll only want to change the  background color so these two things   text and color we're going to pass them so  we'll declare variable final color color okay   and we'll also have final string text okay and  we need to get them as in the constructor so i'll   call them this dot color okay and this dot text  okay we are doing this so that we can reuse the   code over here right now we have three containers  and it's not very good practice of coding so   that's why we are doing it and the next thing we  could do just copy this part from here and put it   within this container over here  okay all right do remember that   uh right now would be passing the color  from our collie in our case call is this one   or color actually okay so the text color is  white but i think we need to import a library   and this color should be the color that's  supplied from the color so in this case   this dot color and we should refer to this  one and we'll pass them from this function   from this file and what else also the text  itself so instead of new call it this dot text   okay all right so this file is ready over  here and i think we have a slight mistake okay good and we can actually remove them  right now okay we don't need this they're   too big delete them and call that file so our  file name was my tabs but the class name is app   tab so we'll refer them here as app tabs okay and  it takes few parameters say first one is color so f colors dot menu color one menu one color  and we'll apply the text to it the text is   new all right so it's asking us to import  it so we'll go ahead and import this one   and we'll copy it three times okay and all  we need to do change the color over uh menu   color over here and instead of calling  well now let's see instead of calling new   we can call it home and let's see what's in our  picture so new popular and trendy so actually new popular let's go ahead and save it see that result  okay now they're taking place but the text is   still too small so we can change the text size  in this file within our textile widget so font   size say 30. let's see the result oh well  they're too big right 30. let's go for 20 okay so it looks much better and clearer and  our shadow is also pretty obvious right now   okay and so far everything is working so we are  done with this section so the next thing we'll   do showing content over here the content should be  this kind of and they should be layout like this   okay so that's what we want to do is changing this  content which would be corresponding corresponding   to this tab and for s2 will change later uh  so definitely we don't want this content first   okay so to do that we can to get our scrollable  content to get scrollable content we can use   list view dot builder earlier we have used over  here i think we have seen over here we have used   page view builder in general page view builder  you might do left and right scrolling and up and   down scrolling you can use list view builder  okay that's how they're differentiated and of   course with page b builder you can use additional  page controller and which takes a viewport like   that okay and with if you use viewport you can  control the size and with especially the width   okay so that's why i use page view but now we'll  use um now we'll use uh list view builder for   uh to be able to do up and down scrolling okay  all right so first go ahead and call list view list view dot builder dot builder of  course it takes a function as you can see   the first one is an empty parameter and the  second one is index i for looping through it   so once again list view builder and page view  builder they're more like for loop or loop which   goes through the loop and the display content  or render content on the page okay all right and   within it we want to return something okay and  we return a container okay and this container uh   should have as you can see here should have this  margin left and right so we'll go ahead and do it   okay so we'll give it a margin okay so margin  cost edge instead only so well i think we can use   all the wind and this only is better i guess  so again we'll have more control so left 20   right 20 set top 10 on bottom 10 okay and  within this we'll have another container uh   and the container itself will have some style like  as you can see here border color and as well as   this uh a shadow color over here bit of those  things we'll implement all of them okay so to   do that we'll declare a child and the child should  take a container and contain itself will have say a bit of padding and margin and things like that   before that we can also go ahead  and do decoration box decoration we'll do box decoration to to be able to  draw this border over here box decoration   so we'll have border radius border radius dots  circular so 10 okay all right and within this   uh we'll also have our box shadow okay so we'll  call box shadow which takes a list of children   and a box shadow over here and we'll have  blur radius pretty simple to and offset say   offset zero zero and we'll  have color so we'll use uh colors.gray with opacity 0.2 okay all right  so that's the box will have this kind of thing   and property okay and within this  we also want uh another container   okay so this container is the big one like  this one will have some style and within this   we'll have another container to contain this image  and this information so we'll call it container   uh as a child and we'll give it  padding say padding edge instant all   so left and right say eight pixels  that's better okay and after that   we'll have this row we'll display this  information in a row so go ahead and call child and it takes a row widget and with enroll   call children i will have few children  so this is the first child and this would   be the second child but the second child  will have column layout later on we'll see okay and so the first thing we want to do  we want to show this image and we'll show   this image within a container and the container  will have height and width so we'd say 90 pixel   like this one over here and height say 120 pixels  this one over here and once again it will also   have box decoration so that the image itself can  get this border radius around border so we can   copy paste and put it there but in this case we  don't need any box shadow so we can remove that and we should be pretty good to go but now we  should show the image itself we don't have image   here so we can call image  and we'll call the decoration   image widget and it takes image property and  for it we can supply asset image and for now   we can supply a random image which is in  our image folder we'll call it pic1.png   okay all right and other thing we need to  do also change the color you see our it's   like a card this card has a white background  different than the background of this one   so we'll go ahead and change the color  uh the color should be changed from   here actually uh the box decoration the color over  here because this is the container and container   is this one so we'll call color and we'll use our  app color theme file of colors dot uh let's see   tab bar view color so there's a tabber view  and which is declared in our file over here   this is the color okay now let's  go ahead save it and see the result okay pretty good so we we have these things  over here but this is pretty much unlimited   so we want to set a number that the images  we show here and where they're coming from   right now this is an uh default listviewbuilder  and i guess this i unlimited number of images   which we don't need and you can also see that  uh over here if you scroll you can scroll it and   there is a like bar here which is perfect  and if you go to different tabs they show   you different content and everything  else is working at the same time okay   so the next thing we want to do is change this  image and load them dynamically right now we   just have one image we are showing it and that's  not what we want um so we need to load our images   from our json file and our json file should be  this books.json file which i already loaded uh but   well we i loaded in the project file but  here in the code we didn't load it yet   we can do we can copy the copy paste to this  line and change a few of the things from here   is called books.json as we saw a little early and  what else we need to change see this one uh we   need to declare the list we'll call it list books  and we'll change it here instead of popular books   we'll call it books and everything else should  be pretty good now over here within list builder   okay it takes item counter so let's call this  property item count and we'll check books   if it's null then the length is zero it means it  won't run anything but if it's not null we'll show   the box length find the box length books this a  very uh json file length and store it over here   and now this item count should be similar to  this one so this one and this one should be   similar and if they're similar and the same then  we can look through them so to look through them   i can call this box list array i'll look through  it using the index i and then we'll call the img   property within this uh json file so this is a  sorry this is our json file and this json file   has image property as you can see from here okay  all right now let's save it and see the result perfect okay so now we have different images uh  last few images are same so of course you can   change them whenever you want but everything  else is working perfectly as you can see   so they have same background color but the card  color is a bit different okay all right so so   far we are doing pretty good and the next thing  we'll do is show this uh information in a column uh now we'll do this section this one  over here so this would be in a column   uh put on the top of each other and it will  also have this uh space extra space which   will use sized property let's go ahead  and do it so currently this container   is showing this image so right after it  we can use the size box size box with 10 after that we need to create a column child  let's go ahead and do it column yes access   brackets and this column will have children  list of children and the first one is this   and this has two things star and this mark over  here the rating so this child actually inside   has two children so what we'll do we'll use a  row to put them together okay so row and now   the first one should be a star and for this one  we can use icon which takes from icons dot star and star could be this one yes and um it also  have this color so sorry i guess the size   i say for now let's use the 24 and the c and the   color is it's coming from apps colors from this  one dot star color this is the one we can use okay now let's go ahead and save it and run it  let's see the end result okay all perfect so   the star showed up but of course it's in the  middle because we don't have anything else in   the uh top or bottom of it so it's in the middle  but as you put more content it will go up okay   well the next thing we want to do using uh showing  the text and the text this one rating is coming   from our json file and this json file is this one  and as you see it has rating okay uh we'll use it   here so it's coming from books which we already  load early the json file and it's in a books list   i'll call it books and index i and within it  we'll find rating okay oh let's go and save it   yes okay and the color is a bit weird  though so we can use uh red color color app colors dot i think it's in the  same menu color as the second menu this one   all right so this style of course we can't  put it like this and put it in a style object now it takes a style textile widget  and within it we can put our style   okay let's go ahead and save it okay perfect and uh we need a  bit of uh space between these two   so what we could do we can again use  a size box and with say five pixel okay we have an error how it  should be done okay perfect the next thing we'll do is showing this text or  the book's name which should be again coming from   over here the title and so far we know that  it's pretty easy so this is the next child   in our column so for this one we can use just  text widget and read it from the books list   and a call find this property which is  our object name title or key this is the   value is the key this is the value so it's a  title and i think we also need to assign style   so text style on the font size so 20.  and we can also assign font to family   let's see if we can assign avenue to it and  font weight which is font weight dot bold okay all right now we'll  save it and see the result   okay perfect yes but now we have an error here as  you see oh it's not an error the problem it's in   the middle which we don't want so we can change  it to a property called cross access alignment   because this is column like this and the column  cross access alignment should start things uh   i would say what it's horizontally over here  everything to the left that's what we want to do   to do that just before children these  children we can call cross access alignment   cross access alignment start save it and  yes it's working now the font size is   too big so we don't want it let's  go ahead with 16 and see the result   okay and now it is good all right the next thing  we want to show is the subtitle or the text   and we already know how to do it okay so what what  we'll do we'll just copy paste the earlier line   and change this one over here and we'll call  it a text text is again coming from this key   okay and um instead of bold we don't want font  family bold over here and we can use color so   it's coming from app colors and the subtitle  text this color let's save it and see the result yes perfect and the last thing in  this column we want to do is uh using this uh love small button  here this was in the original   design i'm not sure why it is for but  we'll put it anyway okay and again   we can copy paste this one and just write it  here because it stays same for all the books okay so let's uh create a container for this container and i'll give it height width so with   50 and height 30 and we'll have  it we'll give it a box decoration   or decoration and box decoration property  and border radius very radius dot circular   so give it five and it'll have color and  again we'll use things from app colors   colors dot i guess it is a love color i called  it and uh let's save it and see the result   okay well it's uh the height and width they're not  correct as you can see so we'll go ahead with 60   and height with the 20 and see  the result okay it's still a bit   too high so maybe 50 might work better okay perfect and the border radius  instead of five we can try three   and now this is the line we can copy and  assign it within this uh container as a child okay and the text simply we can write here love we don't need ah like uh text size is too  big might be let's go to uh 12 and see okay we need to change the text color so it's  too light there so we can use just colors.white   and here now we have this alignment  property that we need to set it because   right now it's uh as you see uh at the very  bottom and on the to the left so we want to put it   in the center so we can use alignment  property and alignment dot center   save it and see the result perfect  and better i guess i 20 and everything looks good though so after using  height 20 it looks much better so for now we are   done with this section and we'll do the next  section next section would be the next page   where we can click on this uh files or click  on this list and they'll show a new audio page   where we can be able to play the audio and  rest of the things are working pretty much   so i'll keep this content for your own practice  you can use page builder or list view builder   to layout your content over here and as you can  see things are working pretty smoothly right now

Channel: dbestech

Views: 10,324

Keywords: flutter book ui, flutter audio ui, flutter app ui from scratch, flutter audio book app ui, flutter audio book listening app ui, flutter crash course for beginners, flutter audio streaming app, flutter ui design, flutter education app ui, flutter and dart mobile ui, learn futter step by step, flutter learn basics, flutter audio player, AudioPlayers plugin, flutter audio recorder, e-book app, flutter music player, flutter tutorial for beginners, flutter ui speed code

Id: bt61-hktOrc

Length: 77min 33sec (4653 seconds)

Published: Wed May 26 2021

Reddit Comments

[u/fluttermapp]

Well done!! Nice UI!