Flutter Slivers Overview: SliverList, SliverGrid, SliverToBoxAdapter, SliverFillRemaining

hi everyone and welcome back to coding with flutter in the last video we have seen how to create slivers with custom scroll view sliver up bar and sliver persistent header and in this video we continue our overview by looking at some other very common sliver widgets so let's get back to our demo and now it's time to look at sliver list and sliver grid and as you may know you can use a list view or a grid view to define a scrollable list or grid of items however if you want a list and agreed to scroll together then you need to use sliver list and still a grid and you need to place them inside the same custom scroll view by the way both sliver list and sliver great work by defining a delegate which can be of two types you can use a sliver child list delegate to define an explicit list of widgets like we've done over here or you can use a sliver child builder delegate to build the items on the man as you scroll and this is better for performance when you have a large number of items and you might already be familiar with this distinction because sliver child lists delegate is the stever equivalent to list view and sliver child builder delegate is the sliver equivalent to this yield builder so in this case I can just list the widgets that I want to use as children and in this case I use the index inside the delegate to return a container with a given color and text and in addition to that I can also specify a child count to decide how many items I want to manage or I can omit this parameter which will result in an infinite list of items and by the way when we create our sliver list we are free to specify the height of each item as we have done here or if we want we can put a more complex widget inside here and that flutter take care of sizing it vertically however if we know that all the items inside our list should have a fixed height then we can use a sliver fixed extent list which takes an item extent property and setting this will force all the items to be of the same height so this is how sliver works and sliver grid is very similar because it also requires our delegates that we can use to build our items but in addition to that it has a grid delegate which is a different argument that we can use to specify how the items are laid out and we can use this by creating a sliver great delegate with max cross access extent and with this we can decide the max cross axis extent for each item and alternatively we can use a stripper great delegate with fixed cross access counts and in this case we can choose the maximum number of items in the cross access and either way we can choose the spacing between items in the main and cross access as well as the child aspect ratio so if I update this value and a hot reload I can see how the layout changes and by the way you can also use sliver grid count and stable grid extent as a way to declare the actual items directly rather than on-demand with the Builder pattern and these constructors take arguments that are similar to the Builder variance and I think it's useful to see all the different variants in one place so that you can choose the correct one depending on your use case okay so we have seen how to show a collection of widgets inside the sliver but sometimes we just want to add a single widget to our scrollable area and to do this we can use another widget called a sliver - box adapter and this is particularly useful when we want to add headers or footers to lists or grids for example here I have added a sliver - box adapter to define a grid header and I can see that it shows over here okay so now that we know about the most common sliver we just let's look at a more complex layout where we have a profile header followed by a list of activities and as usual the scrollable area is defined by our custom scroll view and in this example the profile header is a custom widget that is nested inside as liver - box adapter and this is followed by a sliver list which creates a number of custom activity card widgets from a collection of model objects and each activity is a complex widget which also contains a header for the current activity as well as a list of splits and one thing that we can notice here is that we don't need to specify the height of each item in the list because this is calculated by the flatter layout engine for each activity card and just as a reminder we said that we should always use sliver we just asked the slivers of our custom scro do for this reason here I'm nesting a profile header inside the sliver to box adapter and I'm also nesting all the activity cards inside a sliver list and if we were to use a profile header directly in here then we would get a layout error which looks like this so make sure that you always trap your widgets inside slivers when you use a custom scroll view next I want to talk about sliver fill remaining and this is a useful widget that we can use to fill the remaining space on screen so when is it a good idea to use sliver fill remaining well one use case is when we have some scroll double page that is supposed to show some content but we need to use a placeholder when no content is available and if we simulate a real-world scenario we might have a future builder or a stream builder that we use to load some data from the network and in this case we need to deal with multiple UI States so when the data is still loading we can show a circular progress indicator and if there is an error we can inform the user and give an option to retry and when the data is loaded we want to show the contents and we can also handle the empty data state by showing a no contents text and in some cases leave a fill remaining is the correct widget to use because we have a lot of empty space and we want to show something in the middle however if we have loaded our content that sliver to box adapter works better because it will make as much space as is needed to fit all the contents by the way if you try to use sliver fill remaining but inside it you put a widget that doesn't fit in the available space then you will get an overflow error which looks like this so the main thing to remember is that with Steve to box adapter the child widget will size itself exactly to the space that it needs and with Stephen fill remaining the child widget will fill all the available space in the viewport so this is a good widget to use as the last sliver inside a scrollable area or if we need to Center some content in the middle of the screen like in this case so make sure that you use sliver fill remaining or sliver to box adapter depending on what is most appropriate in summary we have seen how to use all the most common sliver widgets so that we can add scrollable content to our flatter apps and as a reminder we can use sliver list or sliver grid if we need to show a collection of items inside a scrollable area and we can use sliver to box adapter or sliver few remaining if we want to add just a single widget and overall the general strategy for working with slivers is to always use a custom scroll view to define a scrollable area and add any of this sliver widgets inside it so feel free to check the get up project for this video which includes sample code for all the sliver widgets that we have discussed and if you like my flutter tutorials you can also sign up on my website for more updates thank you very much for watching and if you enjoyed this video don't forget to like it and subscribe to my channel

Channel: Andrea Bizzotto

Views: 46,615

Keywords: flutter, dart, android, ios, mobile app development, programming, tutorial, course, udemy, coding, slivers, layout, debugging

Id: k2v3gxtMlDE

Length: 7min 59sec (479 seconds)

Published: Mon Sep 30 2019