Flutter Tutorial - Sliver App Bar & Collapsing Toolbar

with the sliver app bar you can define a custom scrolling behavior for your app bar you also can make a sliver app bar disappearing completely and then it is going inside again if you are scrolling down lastly we want to look at a more complex example where you have also here this overlay on top of your silver app bar and if you scroll this overlay is then hiding if you are new here subscribe to my channel and make sure to watch this video till the end let's get started within our build method and here we go to our scaffold body property and first of all you need to create a custom scroll view and inside of it you can set a sliver app bar so basically you use here every time the custom scroll view if you use slivers and then it looks like this that we have here an app bar at the top and you also can change the color of this app bar if you like and you can also expand it so you can set the total height of your app bar and here we set it right now to 200 pixels and a sliver appbar functions exactly like the add bar so you can set here for example a title for your app bar you can also set the leading property which is here then displayed on the left side and you also can set the action property and here you can also set an icon on the right side inside by default the app bar is not scrollable because we have no content under our app bar and this is what we want to change therefore i simply go here after our app bar and here inside we add a method build images and here inside of this method you add a sliver to box adapter and here inside of the shy property you can put any widget inside and the sliver to box adapter is really important because we use a custom scroll view and the inside you can set only slivers and this are specific widgets so you cannot put your normal widgets inside instead you need to use your sliver widgets and the inside of the sliver to box adapter i put here then my widget inside and everything works again normal and if you have a scrollable widget then you also set here the primary to folds and the shrink web to true and now we display here within our grid view 20 images and then you can also scroll here up and then the sliver apple is hiding by default within your sliver app bar you also can set the property floating to true and this will make sure if you scroll all the way down and then you scroll a bit up then the sliver app bar will appear immediately however if you remove here this floating to true and now if we have scrolled here all the way down then we also need to scroll all the way up until we see again our sliver app bar so i put it here again to floating to true because this is more convenient for the user also by default the sliver app is always disappearing and this is also what you can change so you can also set it here to pin to true and then only the expanded part of our sliver app bar is hiding and the other part will stay here pinned within your sliver app bar you also have the property flexible space and here you can basically set then the background for example of this sliver app bar so i set here the background property and then you set here for example an image inside and this looks then like this so the whole sliver app bar is filled with this image and if you like you also can supply a title for example here this text and this is then displayed here and now if we scroll up you see that this title is also scrolling up however now both of our titles are overlapping so basically you can remove now this other title here and now our title is every time going bigger and smaller if you like you can also center the title within your flexible space bar and therefore you set here the center title to true and now if a hot reload you see that this title is centered and also if i scroll down it is centered we also can change how our image is scrolling up and therefore you can also set here within your flexible space bar this collapse mode to print and then our background image is pinned and static and you see if i scroll up it is not changing its position however if i remove the collapse mode again then the position is always changed over time now we also want to look at how you can integrate a tab bar within your sliver app bar and therefore i go to the scaffold and here i add a nested scroll view and here within this header sliver builder you can add your sliver app bar and therefore we return here a list and here you can put your sliver app bar inside and this looks then first of all like this and then you can also set here within the bottom property the tabs and therefore add here this tab bar and here inside i add then two tabs and to make your tab bar work you also need to wrap here around your body property this default tab controller and here you set then the length to two because we have here two tabs inside and now we have here our sliver app bar with two tabs inside and now we also want to add some content for each tab inside and therefore we go to our nested scroll view and here we have a body property and here inside we set then our tab bar view and here you can then set the content of each tab so this is the content of the first tab and this is the content of the second tab so in our case we show here some images and therefore i use here exactly the same grid view like before where we display 20 images and this looks then like this so we have here on the left side our tab bar and we also can scroll and you see that our sliver app bar is disappearing and we also can change our tab and then we have here this other content inside lastly we also want to create here this advanced sliver bar with some overlay on top and therefore we create here our custom sliver app bar to create our custom sliver app bar we go to our scaffold and here within the body property we add again a custom scroll view and we start by adding here some images and therefore i have exactly the same method as before where we'd simply display a grid view this time a sliver grid and this displays then 20 images and now on top of these images we want to create our custom sliver app bar with this overlay therefore i go over our images and here i add a sliver persistent header and here you can basically define your custom sliver app bar and therefore we create our custom sliver app delegate class and here inside you can then set the expanded height of your sliver appar and our app bar has a height of 200 and now we want to create this class and therefore we go here down and create this class and within this class you need to override here two fields the min extend defines how much our app bar should have in minimum as pixels so in our case it has here this minimum as pixels and the maximum extent is normally our expanded height and to override these three fields you also need to extend here your class from the sliver persistent header delegate and we want to create right now our custom sliver add bar and therefore we go here to our stack within our build method and here inside we create then a method build appbar and within this method we basically create a normal app bar and then you can also set here everything inside like the title and all the other fields which you like and now we have here our app bar and also if i scroll all the way up then you see it is also expanding and this is because we have set here this max extend to the expanded height and we have set the expanded height to 200 pixels and now we also can customize here this animation of our sliver appbar and therefore i wrap you around this build app bar this opacity and then we want to create a new method which is called appear and here we put then the shrink offset inside which we got from our build method and now we simply create here this appear method and this appear method will make sure that our sliver bar is visible if we have scrolled down however if we scroll up then our sliver app bar is disappearing and this is what we defined here with this opacity next we want to create here also our background which is currently white and therefore we go again to our stack and therefore we create a new method build background and within this build background we want to create here simply an image widget and therefore i put here some url image inside and this looks then like this so now our white space is filled and now if we scroll up then we want to make our image disappearing and therefore you can also wrap here around your build background this opacity again and this time we want to implement a new method which is called disappear and therefore i create here this method disappear and this works quite the same only that we subtract here from one and now we also can try it out so if i scroll up then you also see that our image disappears and basically within the stack you can then always make widgets appearing or disappearing and you can build here your custom sliver app bar and i want to quickly show you an example therefore we want to create here this overlay which is between our sliver app bar and our content to create this overlay i go to the stack and here i create a position widget and we want to position here our widget between our sliver app bar and our content and therefore i define here the top variable and here we first of all define the size of our widget which is displayed so in our case our overlay has here height of 60 and we also define here a field which is called top and this has basically is the expanded height and this means that our widget would be displayed here directly at the corner however we don't want to display it here directly after our sliver add bar instead we want to also show it a little bit before and therefore i subtract here minus the size divided by 2 and this will make sure that our widget is here centered within the sliver app bar and our content and next to defining the top variable we also can define here the left and right and like you can see our overlay widget has here 20 pixels in space to the left side and also 20 pixels in space on the right side and therefore i have added here this left and right and now you can basically create your overlay and therefore i create here this new build floating method and inside of it we want to create then here our cart and inside of our cart we create a row and now we want to display here one button and also another button next to each other and now you can put your basically your design inside so i create an expanded button which says share and we also create another expanded button which says here like and therefore i also create this method build button where we basically create a text button and this has an icon and next to it a text and this is all what we need and now you see we have here the share button on the left side and also this like button on the right side however if i now scroll up then you see that this is not hiding at all and it is scrolling all the way up and therefore we also want to make this widget now disappear and like you already know we simply wrap here around our overlay widget this opacity and then we call here this method disappear and here we also put our shrink offset inside and this will make now sure that our widget is disappearing if we scroll up and all in all you can create here with your custom sliver app really complex designs within your stack hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] [Applause] you

Channel: HeyFlutter․com

Views: 63,817

Keywords: flutter, android, ios, sliverappbar, slivers, sliverappbar widget, sliverappbar flutter widget, sliverappbar flutter, customscrollview widget, customscrollview flutter, customscrollview flutter widget, scrolling header, animated header, flexiblespace parameter, expandedheight parameter, custom scroll behavior flutter, complex scroll, app bar, flutter collapsing toolbar, flutter sliver app bar, flutter toolbar, flutter flexible toolbar

Id: s_3ak-4u43E

Length: 12min 6sec (726 seconds)

Published: Fri Feb 12 2021