Flutter CustomScrollView | SliverAppBar | SliverToBoxAdapter | All in One

now here we'll see how to achieve this result and  this result is achieved using custom scroll view   and a custom scroll view has special effect  like this one or like certain part you scroll   or expandable header section like that okay well  to do that we'll come over here and within our   food folder we'll create a new  file and we'll call it recommend dead food detail okay and over here we'll create a stateless  class and we'll call it recommended recommended   food detail okay all right now we need  to import the necessary libraries okay   well now here we'll return scaffold and within  scaffold we'll have body within body will return   custom scroll view okay well now custom  scroll view it takes levers so we'll go   ahead and declare slivers okay now what is  slivers well slivers are a special widget that   has special effects okay you can understand  like this like this is a sliver over here   because it has a special effect as you can  see it disappears slowly and it has a color   whatever color you want to define and actually  this is also sliver here this body section okay   because it can scroll through but of course we  can do much more all right yeah so here we have   two sliver component one is this one and and there  is this one so slivers property over here it takes   a list of slivers okay so first sliver we are  going to use that's called sliver wrap bar okay   so sliver a bar okay now sliver upper has a  property called flexible flexible space so that   that's one we're going to use so flex see flexley  flexible spacer now where we are going to why we   are going to use this because we want to have  this background image okay now we want to have   this background image and slowly disappear it and  show a certain color that's what we want okay so   that's where we are going to use flexible spec  spacebar now it has a property called background   okay background takes actually image so here we  do image dot asset now here we need to mention the   image path so here we do our images all are  in assets folder inside that image folder   and inside it food zero point png so this is the  image we are going to use so you can use whatever   image you want and make sure that you type in  the image path correctly so here we would use our   additional properties all one of the properties  width now here we want the image to take the   complete width so max finite and after that what  we'll do we'll come to our main file over here   instead of popular we'll write here recommended  all right yeah and make sure that you import it   i think i might have a type over here let's see  reiku min well i think it should be ed i'm sorry   so i'll just copy this one put it right there  and over here i'll put the same okay all right so anyway so i'll come over here and now i'll  save it and i'll run it on say iphone 12 over here   so let's see where is my iphone 12 so this is  my iphone 12 over here and definitely this is   not what we expected okay but at least we can say  things so we want it to take the complete space   okay uh the width all right but it's not  because it's missing a property called box fit   so box fit dot cover now it will force  it to be as a container all right now   while we saw earlier that we want to achieve  this result this height okay now this is called   expandable height which could be expanded  okay yeah so that's what we want to achieve   so here there is a property called uh expanded  height and for now i'll put it 300 and we'll   come over here we already see that it's expanded  okay so when it expands it expands up to 350.   so that's why it's called expanded height okay  and you can already see that you can squeeze it   or scroll it but if we are going to achieve this  result now we need to have some some more slivers   within this slivers list okay and then they'll  all scroll together okay and this special effect   so we want to use another sliver but that sliver  will put inside the body section of the screen   inside the body of custom scroll view and that  kind of sliver one of them is delivered to box   adapter so as you can see this lever it adapts  inside a box okay or inside custom scroll view   okay so now here it takes a child and now in our  case the child could take any kind of text over   here and now for this text itself what i'll do  i'll come over here and copy this long text okay   i'll copy it from here and let's see i'll put  it there okay i'm sorry i think i need to put   inside this thing and i'll put it a few times so  it is really a long text as you can see from here   okay now what i'll do i'll go ahead and  copy it and i'll check it on my phone okay   now it's already there as you can see that's a  scrollable okay now with this uh we are already   getting better a few other things that we  can take care now we want it to stuck over   here okay so there is a property which is called  pinned now over here i'll use it as a true okay   all right now it can expand up to 300 and when  it gets pinned we have this certain height okay   all right and at the same time we can use this  another property which is called background color   and for background color i'll use a custom color  you can use any color you want so app colors dot   yellow color okay now it's yellow because i  want to stick to my design okay all right okay   now there's another thing that i want to achieve  uh achieve like this one over here as you can see   okay so i want to achieve this kind of bar over  here regardless you want this with this background   i mean this border or not but i  want to achieve this result okay   now to do that uh we have to use  another property which is called preferred size okay inside bottom property so  bottom takes preferred size widget so that's what   we're gonna going to use okay now it has a  property let's see another preferred size   inside preferred size so here actually pretty much  you mentioned the size that you want so you'd use   a size dot from height and we'll use 20 over here  and i think it takes another child over here and   as a child for now i'll just pass a random text  over here and i'll call it uh sliver app bar okay   now i'll come to my phone over here which is this  one okay now i'll save it and see the result okay   so it took some space over here okay well i mean  it didn't really take space it just showed up over   here okay now of course you can do zero all right  now it is still there okay well now over here uh we can do uh much more than this because  this is just a text over here right but we   want it it to have a background  color so for that one actually   what i'll do i'll use a container okay  now container i'll use say color sorry we do colors.white okay all right and it looks  like it's gone okay yeah now of course because we   don't have anything as a child over here so we'll  pass a text over here and now i'll say slaver app   bar just now we didn't have any content so it was  gone now it showed up once again now here let's   see uh we can use other property which is called  width so we'll use double dot max finite so it   will take the complete space over here and it's  already looking better and as well as over here   uh inside the container we can use  another property which is called   padding and here we do edge insets only  now here i'll do top five and say bottom   bottom ten okay so it looks it's  looking already better okay and   over here we want to center this so  i'll wrap it around center widget so   it would be centered so it's already centered  okay all right and it's already looking great   now of course i don't want to use this text over  here i want to use our custom text which is a   big text okay and here we'll i'll have a  different name over here i'll say chinese site and that's it okay yeah now for this one i can use  a different font different size okay because i   think it's too small you can use whatever size  you want okay now here we do uh dimensions font 26 because we know that in our dimensions  file we have all the font size saved   okay all right so it's already looking bigger okay  right now for the container itself uh we can also   apply a bit of margin so here we do margin okay  now for margin we would do uh edge inserts only   now here we'll have left and for left we'll have  dimensions dot width 20 and right dimensions dot with 20. okay you're right oops i'm  sorry this shouldn't be applied here   but a mistake i'll cut that and i'll save  it actually i wanted to apply it over here   now to be able to apply it over here we  need to wrap things around a container   okay well we'll do that let's see um  yes anyway so now i'll come over here so there is a bit of problem though now as you  see it's not as big as before so here let's see   try 20 so it came down a little bit okay and this  is what we want to actually achieve okay so that's   the preferred size so you can use extra size if  you think you are not satisfied okay so if you   take it out so it goes up 20 pixel if you put it  back it comes down a lot of pixels i guess anyway   so now the next thing we want to achieve is this  result these two icons okay so that's what we want   to achieve over here now for that one we can use  another property within sliver app which is called a title and title takes actually widget any kind  of widget so within it we'll use our children   now here i could go ahead and simply  put any icons so icons dot i can say whatever the icon you want and that would  definitely show up let's go ahead and check it so   it's iphone 12 and as you  can see it's already there okay yes now of course this is not the icon we  want we already have our custom icon so   that's what that one will use okay app icon let's see this one okay now here all  we need to do pass the icon name so icons dot uh   well we do have this clear  okay this is what we'll use   and it'll show up over here and it's a bit of  liken and then we'll use another icon so app icon here icons dot shopping let's see what shows up  so we'll use this one okay all right okay so these   two icons are together so we'll use a property  of row which is called main access alignment so   we do main access alignment dot space between so  we see that they go far to this end all right yeah okay now there's this problem you see it  kind of cut off okay now to get rid of this   problem we have to use another property which  is called toolbar height now we'll set it to 60.   okay and it's got a little better okay all right  or we could use more of them actually so use 80 okay yeah so now it's better but in my case i'll  just go ahead and stick with 70 and we'll see how   it looks okay all right so it's already looking  better okay yeah so we are almost uh uh very close   to the result we wanted to achieve which is this  one and we also have to achieve this result right   okay now this result is actually done within this  container itself okay now here you see this is a   border right so all we could do we could come over  here and here we do decoration and box decoration   and here we do border radius and border radius dot  only now here with the top left and we do radius dot circular and we can just go ahead to 20 or the  one we have saved in our file we'll use that one   radius 20 okay now what i will do i'll go  ahead and copy that and instead of top left   would use top right okay all right and let's see and of course the this is the color so as we are  using decoration color has to be inside decoration   now we'll go ahead and save it and let's see how  it looks like yes it's already looking better okay okay now i think instead of top five uh  well um yeah it does look okay all right   okay so the next thing we want to achieve  is uh this thing over here and we want to   make it scrollable okay all right  well to make it scrollable definitely   uh scrollable like i mean like this this this  kind of scrollable okay or collapsible i would say   so this is what we want to achieve okay  well to do that over here we'll have this   text we have this child right so over  here we'll use column and within column   we'll use children and within children  we'll use a container okay container   and within container i'll have child okay  now within child i'll use this one expendable text widget and it takes text  properly now here i'll put   the text that we had early so i'll just copy it  a few more times from one more time over here   and i'll put it here a few more  times uh it would be a long text okay   all right now if i save this i will see this  result over here okay that i can already scroll   and it collapse this one okay like if  i come over here all right okay now uh   another thing why i use container because we  want to apply margin to it or padding right   so the container outside i can use a margin  so i would do margin over here okay and edge   let me go ahead and do it right after it so  margin now here we do as insets dot only now   here all is left so dimensions dot with 20  right dimensions dot with 20 okay all right   now let's save it and it's already looking  better but now we have this background color   issue so we want to use scaffold background  color over here and we do colors dot white and it looks much better now okay all right  so this is the result we wanted to achieve and   here we are okay all right well next we'll see  how to achieve this result over here this one

Channel: dbestech

Views: 30,683

Keywords: flutter customscrollview, flutter sliverappbar, flutter sliverappbar animation, flutter slivertoboxadapter, flutter slivers, flutter slivers example, flutter customscrollview slivers

Id: 7aUA5jqNfgc

Length: 19min 56sec (1196 seconds)

Published: Wed Jan 19 2022