Making Dynamic Layouts with Slivers in Dart's Flutter Framework

Key Takeaways

hey guys welcome to another flutter tutorial my name is tensor today we're going to be talking about slippers slippers are a fundamental building block that exists inside flutter they are the dynamic version of the Box rendered widgets that exist in flutter we talked about these box rounded widgets which rely on constraints in the last tutorial in this tutorial we'll be looking at slippers which are much more dynamic by Nature now a slipper itself is just a slice of a viewport so for instance half of the screen either vertically or horizontally you would consider that box or that rectangle to be a sliver what makes them unique however is that slivers tend to change based on how the viewport is laid out so for instance if you just have a normal container that has a fixed width and height and you're scrolling up and down on a screen then that container doesn't actually change its size or shape rather it just moves out of this screen with a sliver on the other hand you can have multiple pieces of this sliver changing as the scroll offset is moving up and down and we'll look at this a bit as we go into the code slivers do not follow the render box protocol instead they follow what's called the sliver protocol this means when they get laid out rather than getting a box constraint they get a sliver constraints object which then computes a sliver geometry object which describes how the sliver actually fits in the viewport with the render box protocol on the other hand you have a box constraints object which then gives you a sized object slippers can have children and those children can be slivers themselves or they can also be render box widgets if a sliver has a render box child it will take its sliver constraints object and change it into a render box constraint object to build out that child the most common types of slivers that you see inside a flutter are slivers with multiple children these can be slivers that have grid views or list views and things like that also slivers tend to have some type of scroll or panning physics built into them so as mentioned before as you scroll or move this screen around the slivers geometry chance to change every single time they get laid out or rendered this means that the actual sliver extent itself changes based on the scroll offset so for instance if you have a normal sliver that's a 100 pixels high and then you start to scroll the screen and you scroll it so that the offset is say 50 pixels then the extent will change from 100 to 50 because the sliver only accounts for 50 pixels now rather than 100 slivers are also typically lazily constructed and they also typically lazily construct their children and we can change this behavior and sort of modify it based on the delegates that we put inside of the sliver so if you think about the example that we looked at yesterday we had a ListView that had infinite children in it those children were lazily constructed as the ListView needed them the same is true for just normal slivers this means that if you have a sliver that has infinite children and you only have say like 10 children on the screen at a given time then those 10 children are the only ones that are being rendered at a given time all right so now let's start coding here let's talk about the boilerplate real quick we have a basic material application as our root widget and then we have a stateful widget which builds out a empty scaffold inside of our scaffold I'll create an app bar and then inside of the body we'll create what's called a custom scroll view you can see here that the custom scroll view uses a property called slivers to build out its actual in essence the custom scrollview widget is just a bunch of sliver widgets tied together to create a scrolling widget the first sliver widget that we'll look at is the sliver app bar the sliver app bar is a lot like a normal app bar except typically it's used inside of the custom scroll view or some other type of sliver based widget so this will create something that's very similar looking to our normal app bar and we can put a title in it and we can also manipulate some of the difference behaviors of this particular app bar so here you can see some of the properties we can create a floating property to make the actual app bar look like it's floating or out the screen we can assign the pinned property to either true or false and this makes it so that the actual app bar either stays in its position when the view Scrolls up and down or it moves around when it Scrolls up and down so you can think of it like a fixed app bar or a floating a bar so for instance when you're building out a website if you have an app bar at the top of the screen and then you keep scrolling down the screen and the app bar stays at the top that would be a pinned app bar whereas a non pinned one would be the type that actually disappears after you scroll it out of you if we build our application as it is currently you can see we have our main app bar and then below we have our sliver app bar and because we do not have any children inside of the actual custom scroll view yet we can't scroll around quite yet so we can't see any of the behavior here we do however have this expanded height property which is nice it allows us to change the actual height of the sliver app bar so if I put it to something like 450 pixels you can see it's quite a bit bigger than it was before now it comes all the way down to about there so here's what 250 will look like and then we can create what's called a flexible space widget which will allow us to manipulate what exists inside of this that we're creating here so here you can see I've put a image into our flexible spacebar into the background so image Network I just got this from wrong pixel comm and this is a 1920 by 1080 image just sits in the background of our actual app bar and when we are able to scroll up and down you'll see that it sort of moves around with the actual apart if we wanted to cover the entire app bar we can call fit and then put in box fit cover and you can see now it just covers the entire app bar so rather than having any orange edges we can just cover the entire sliver app bar we can put a title in the actual space bar so here I have a title that's sitting inside of the flexible space bar and you can see it appears at the bottom here with fairly large text compared to the normal app bar now let's build out a larger sliver widget that will allow us to scroll up and down the screen so let's create what's called a sliver grid the sliver grid is sort of like a grid view it allows us to make a ListView that has two dimensions rather than one so you can have rows and columns in this case we're just going to create a sliver grid and then we need to specify the actual grid delegate so this will define the behavior of each of the items inside of our grid and we have various different delegates that we can choose from you can see inside of our sliver grid delegate we can define various different properties so I've defined how large we want our max cross access extent to be so by default each element will have an extent of 200 and then we'll make it so that the main spacing will be spaced out by 10 pixels and the cross axis spacing will also be spaced out by 10 pixels and then we can give each of the children a specific aspect ratio of 8.0 we also need to specify a delegate for each of the children and the delegate in this case we'll be a sliver child builder delegate this sliver child builder delegate just has a builder function which allows us to pass in the build context and then the indexed for the list inside of the builder for this delegate will return a container will make the alignment Center and then we'll give the colors of each of our items a variance so they'll all be purple so the actual color of the purple will be based on the indexes modulus by 9 so it will have a remainder between 1 and 9 which will give it a shade of purple between 100 and 900 then inside of these containers will have a bit of text which will say grid item and then we'll put in the actual index number and then we'll make it so that our grid has 100 items inside of it so here you can see our application now here's our grid down here you can see we've got 2 columns as we scroll up you can see how the actual sliver app bar changes and once it hits the top the title disappears and it becomes this orange color and we can keep scrolling down with the normal grid until we get down to our grid item 99 which is the last grid item when we scroll back up you can see that the app bar actually starts to scroll down first until it hits a fixed position and we keep scrolling with the grid like this now let's give our app bar some elevation and let's remove the pinned property which will change it to a default of false you can see now that as we scroll up the app bar just completely disappears once it goes out of the viewport it just completely disappears there's another slipper widget called a sliver filled viewport this will fill up the entire viewport that the widget exists in we also have to give this widget a delegate and I'm going to give it the slipper child builder delegate as well and we'll just have it return a text widget which will just say sliver fill viewport and then for the child builder we'll just have the child count be two this will return to text widgets so here we have our app bar then we have our grid and as we scroll up once we get to the bottom of the grid we have this sliver fill viewport and you can see that it actually takes up the entire screen aside from the app bar and once we scroll past it we have another one here as well we can manipulate how big these items are by changing the viewport fraction so if I change it to 0.4 now each of our items will be 40% the size of the normal viewport so you can see that the spacing between them is quite a bit different now so here I've changed it so that our viewport will actually return a container rather than just a text and you can see the fill viewport widget a little bit better than before also notice that it still takes up an entire viewport from the grid all the way down to the next widget even though we've changed the fraction so if I remove this entirely you'll notice that now this will be pushed up to the top where it connects with the grid rather than having a big white space between it and the grid so basically the viewport fraction doesn't manipulate the outer sliver fuel viewport widget it manipulates the inner widget which is our container this means that when we do declare a fill viewport widget it will in fact fill up the entire viewport of its parent now let's look at another sliver widget this one's called a fixed extent list this is sort of like the listview that we built yesterday which bases its box children off of an extent that we define and puts them in a linear list for this sliver widget we can give it a delegate gonna give it a delegate called a sliver child list delegate rather than the Builder delegate which will programmatically generate the children and this will allow us to define a list of widgets which we can then insert into this sliver takes the extent list so here you can see at the very bottom below our sliver filled viewport we now have four different text widgets that have a 20 pixel extent which means they're 20 pixels from their bottom to their top and in fact we can mess around with this extent say we want it to be 50 you can see here now they get a bit bigger we can also use the sliver child builder delegate for this list as well so I'll just comment out this delegate here and instead I'll make it so that this returns a container with an alignment of Center and this time we'll have colors indigo changing shades based on the actual index and then we'll have our list items so here you can see we have our blue container and then down here we have our list items and this will be an infinitely long list because I didn't specify how many children I want so here I can keep going I'm already down at like item number 400 almost 500 now and you can see that when I decide to start to scroll back up now the sliver app bar actually starts to expand which is pretty cool so again it's similar to the grid this time we only have the single column rather than the multiple columns now say we want to mess around with our sliver grid we can do that so let's try to change the grid delegate now the other grid delegate that we have is the sliver grid delegate with fixed cross access count this allows us to specify how many columns we want so we do this inside of a property called cross access and here I've specified that we want eight different columns so here you can see our grid is a bit more condensed because we have eight different columns and I can change this number to say three and now it looks a bit better so you can actually manipulate the amount of columns that you want you can change all of the spacing change how all of the items are laid out and all of that stuff and you can see here at the end that our grid item 99 actually extends from this side all the way to this side because there are not enough items to fill out the other two columns so again this kind of goes back to what I was saying before about how slivers will lay themselves out based on various different elements so I can fix this by changing our child count to say 102 and now we have a number that is divisible by three which means that we have our final item inside of our third column all right guys well I know this tutorial was a bit more abstract and what you guys are used to but I hope you found it useful if you liked it feel free to like and subscribe if you have any questions or comments feel free to leave them in the box below and if you dislike this video then by all means download it as much as you like have a good day