SLIVER APP BAR • Flutter Widget of the Day #12

[Music] hey what up guys welcome back to another quick flutter tutorial in the last couple of videos i showed you how you can work with a basic app bar and so today let's make it a little bit more fancy so the widget of the day is called a sliver app bar which simply put is a normal app bar that stretches out as you drag so this is a cool little feature that i'll show you how to implement in your app by jumping into the code to keep everyone on the same page i've got a main function which is running my app and that's pointing to the home page which is a stateless widget and inside i've got here a blank scaffold so the first thing i'm going to do is let's just give it a background color and in the body if you want to use this fancy type of scrolling then we're going to have to use a custom scroll view and we have to specify the slivers slivers are basically the widgets that we're going to place in the children that are allowed to scroll in this particular way so for now just think of it as widgets that we're going to place in the children so if i show you here in the slivers the first thing i want to add is called a sliver app bar so that's the widget of the day and you can look at all of these options that should be familiar to you if you used an app bar before for example the leading icon let's specify just a normal menu and let's just give it a title saying sliver app bar now the first most important property that we should specify in this sliver app bar is the expanded height so as the name suggests this is going to be the height when it's fully expanded out so just to put some comments here at the top we should put a sliver app bar and below it we should put all the sliver items and just to reiterate this whole sliver situation i want to place a basic container but if i run this the way it is it's going to give us an error and what this error is telling us is in a custom scroll view when i want to use the sliver app bars underneath i just have to add this little widget called sliver to box adapter which takes care of this error and now we can just place whatever widget we want now below the app bar let's just imagine we have some other elements in the app so i'm going to create some containers to fill up the space okay so once you have enough widgets in the children that you can scroll you can properly see the sliver app button display now when the app bar is fully stretched out you can specify what you want to show in the child so if you look at the options you should be able to find a flexible space option and inside you can create a flexible space bar and specify this background so in this background you can place whatever widget you want a common use could be putting an image inside that you imported yourself but another thing is if i was to just show you a container that has a different color so let's say a pink color it'll be pink when it's fully stretched out and then it'll be back to deep purple when it's shrunken down so it has this nice sort of gradient transition effect and inside the child of this container is where you can place whatever widget you like so that's pretty cool and another thing is there's another title you can specify which is inside this flexible space bar and if i was to just copy this sliver app bar and place it into this new title you can see it's kind of on the bottom side of the app bar and i can show you how it behaves by first removing the main title because it's going to fill that space right there so this is also another cool way to put some text up there now a few things you can customize on this sliver app bar that you should know is first of all this floating property you can see there it's a bullion that's initially false and if i set this to be true what this does is when you scroll to the bottom of the list wherever you are on the list and you start scrolling down the app bar will appear immediately so no matter where i am on the list as soon as you scroll down it's going to appear immediately as opposed to if it's false which it is by default with this one when you scroll down to the bottom only when you reach back up fully to the top is the app bar going to show itself and the other one you can play around with is pinned which again is false by default if i just show you the false version for pinned being false as you scroll down the app bar will disappear completely off the screen whereas if i say pinned is true the app bar will always be pinned at the top no matter how much you scroll hopefully that was clear and easy to understand there's still a bunch more properties that you can play around with and customize for this sliver app bar but i think that should be enough for you guys to play around with let me know if you have any questions i'll come around and answer them below but other than that thanks for watching and i'll catch you guys in the next one laters you

Channel: Mitch Koko

Views: 60,890

Keywords:

Id: qYnVdXCU1M0

Length: 5min 2sec (302 seconds)

Published: Sat Oct 16 2021