Flutter Layouts Walkthrough: PageView, ListView, GridView, Slivers, CustomScrollView

welcome to this new video on coding with flutter this is a follow-up video about layouts in flutter in the previous video I showed you an open source app that I've built to showcase layouts since then I have expanded this up to include more examples so in this video we'll take a look at scrollable widgets and how you can use them to build more dynamic layouts before we start we can head to the github page for this project and here you can find my updated demo with all the additional pages so today we'll take a look at five additional pages that have added here and if you want a copy of the code as you follow along with this video you can clone this repository here ok so let's take a look at the new layout up you can notice that I've added a button at the top left of the screen and if you tap these you can toggle between two different sets of layouts so today we are going to take a look at this second set of layouts I'll be talking about each of these in details but for now let's just take a quick glance at them so we have page view ListView slivers hero image and nested lists and so let's start with the first one which is page view page view is a useful widget that you can use every time you want to present your content as a scrollable set of pages like this so by default the scrolling Direction is horizontal but you could configure it to be vertical one thing to note about page view is that if we start scrolling and we release our finger it will automatically complete the transition to the closest page depending on the motion and the position of the page this is called page snapping and if you wanted you could disable it let's quickly head over to the code so that you can see how this is built and this is actually very simple so to build the page you all you need to do is define an array of children so in this case I define an array of four children and each of them is created with this built fetch method which specifies an index and the color and uses them to build a container with some text centered in the middle now page view is a widget that is often used to build features such as onboarding where the user is taken through a set of pages and you could use this to explain what your app is about okay so we are ready to move over to the next widget and that is called a ListView you can use a ListView to show multiple items either vertically or horizontally in this example I show a list of contacts with names and emails and we can scroll over to show the complete list so if we head over to the code we can see how this list is built and so here we have this thing called ListView builder and builder is used to create a scrollable linear array of widgets that can be created on demand so builder is appropriate for list items with a large or infinite number of children because the builder is called only for those children that are actually visible so how does the builder work well we can specify an item count and then in the builder code we are given an index that we can use to reference the item that we need to render so in this case we index a contact in our array of contacts so contact is defined here as name an email and we have an array of such contacts and we use it to build a contact list title widget now you can notice that contact list style extends from a class called list style and if we look up the documentation for list style it says that it is a single fixed height row that can typically contain some text as well as a leading or trailing icon and this is exactly what we need for this use case as we use a simple circle to show the initial of the contact name as well as a title and subtitle if we wanted we could have built our own contact list style from a stateless widget and we could have arranged our elements with a combination of rows and columns but a list style really does the job here so that that's what we're using so for now this is all I wanted to say about ListView so we can move to the next page and this is called slivers now I have borrowed the code for this page from the example code for the custom scroller class in the floater dogs so let's take a quick read of the dogs so this is the custom scroll view class and what it says is a custom scroll view lets you supply slivers there actually to create various scrolling effects such as these grids and expanding headers for example to create a scroll view that contains an expanding up bar followed by a list and a grid use a list of three slivers a sliver up one a sliver list and a sliver grid now this is the code for this example and this is exactly what we're using for our demo so this is what it looks like notice how as we scroll the up burn table shrinks and expands and this is because the up bar has a flexible space and an expanded height value the other thing to notice is that the up bar is always pinned at the top as we scroll and this happens because the pin property here is set to true below the up bar in this page we have two scrollable widgets one is a sliver grid this one and the other one is a stable fixed extent list which you had define it here now these are actually very similar to gridview and listview which is what we might use if we add a regular grid or list that is not contained within a custom scroll view you can also notice how both these classes require a sliver child builder delegate which the syntax that is very similar to the list view builder that we have seen in a previous example so once again we are given an index and we use it to create a widget that will be rendered for that index it is possible to specify a child count which is set to 24 the grid however we don't actually specify a child count for the list and this has the effect of creating an infinite list of items so we could go on and on and on you can also note that we haven't used a list tile here but rather created a standard container with a centered text inside now this code here might look a little bit complex so let's go through with this once again so at the root we have a custom scroll view and you can think of it as the container for all the scrolling content then we specify a sliver up bar which is our pinned content at the top and this is a widget that can expand up to the expanded height value by a flexible space after this we have a sliver grid and a sliver fixed extent list which are two widgets that can themselves render multiple items now we are not finished talking about slivers and custom scroll views however I want to move on to the next page and show you a couple of interesting things that you can do with them and in this instance I will also talk about this delegate for your sliver grid so let's move on to this page so the idea here is to create an image that stays pinned at the top with some content overlaid above it the top area itself can expand and shrinks and this is followed by a list of images that are laid out in a grid so let's take a look at how this is built and as you can see the structure of the code is similar to the previous example we have a custom scroll view which holds a sliver persist and Heather and then we have a sliver grid which we use to show all our images now the most interesting effect here is the ero image itself so let's take a deeper look at how this is built so if we were to look up the documentation for sliver persistent header we find that it creates a sliver that varies its size when it is scrolled to the start of the viewport and this is exactly what we need here so we set the pinned property to true and then we had to provide a delegate which is the hero header class that we have defined over here this class must implement the sliver persistent header delegate interface and this interface requires that we specify a few things we need a max extents a mean extent a built method should rebuild methods and also a snap configuration object for our use case we only really care about the max extent and the min extent and the build method while we can return true inside the should rebuild object and know for snap configuration so if you are interested to learn more about these additional properties I encourage you to look them up in the documentation but for now let's just focus on what we need min extent is the height that we want our hero image to have when the user Scrolls down to reveal more content like this max extent is the height that we want at the beginning or when the user Scrolls back up now we have passed these values in from the build method of our hero page so over here we have 150 points for min extent and 250 points for max extent ok so next is our build methods and this is where things get really interesting so we need to render our image with a text on top of it and our button to switch layouts up here now as we have learned in the previous video this can be done with a stack widget so we create our stack here and pass a fit value of stack fit they'll expand to ensure that the stack widget itself takes up all the space available from its parent then the first thing that we need is our image and by the way I bundled all the images that you see here within this project so that you can load them with the image asset method for the image you are going to specify a fit value of box fit cover which ensures that the image covers the entire target box next we have a gradient that is positioned at the bottom of the image and we use this to ensure that the here image text is clearly legible and let me show you what I mean so if I comment out the gradient code you can see how the bottom of the image changes so let's hot reload and you see the background is now a lot lighter so let's put this code back and we are back to normal now the code over here is used to add a subtle gradient between the image and the text and this is a design technique that is often used to increase the contrast between the text and its background so here we are using a linear gradient to get the desired effect and if you want to know more about gradients make sure to check the documentation now the last two widgets that we want to talk about are to position widgets now the first one is to show our layout toggle button up here and the second one is the hero image text widget one final note is that we use this safe area widget over here and it is important to use this every time we need to add padding to our widgets so that they don't clash with UI that might be added by the operating system so for example on iPhone X we have this top notch and some system UI on top and if we don't use safe area we would end up clashing here so let's see what would happen if I remove this and a hot reload you see how this top button now is across the time indicator in the status bar so that's what safe area is for and just as a quick refresher here so we use positions because we want our widgets to be positioned on the top left corner for this button and on the bottom left corner for our text within our header so that covers everything that we need to know in order to create a hero image now I think it's time to go back and talk about grids again and particularly this grid that I've added to the page so for this demo we have a list of images that we want to display and they all have the same size so what we do here is render an image asset for each item of the grid and we specify that this is added inside a container so that we can add a little bit of padding now I have to find a list of images over here and within our builder we cycle through the available names and repeat the sequence a couple of times by specifying the desired child count over here when we define a grid we are also able to specify some additional properties such as the main cross axis extent the main axis spacing the cross axis spacing and the child aspect ratio so I encourage you to play a bit with these values and see how they affect the layout of the grid okay so we are all good I think this page looks really good right now and this code gives you all the building blocks that you need to build something similar in your apps so let's move on to the next page which is about nested list views so what this page does is render a list view where each item is a list view itself and you can see that they scroll independently so you might use something like this if you want to independently scroll content in the X and y-axis and so for example if you wanted to show a list of movies grouped by genre this is a layout that you consider using as each row is a genre and you can see the movies within it so let's take a look at how this is built so at the top level we have a list builder which is used to render 8 rows then each row builds a list view that has 5 items and Scrolls horizontally and finally we do a little bit of magic with the index of each style to offset the colors on each row now one thing that is required here is that each row as a fixed height and we do this by wrapping the horizontal list within a size box if we don't do this we'll get a layout error telling us that the horizontal viewport was given unbounded height so be aware of this one way to solve this is to make the height fixed with the size box as we have done here ok so this concludes our overview of scrolling widgets for today so let's do a quick recap we have explored page view as a way of scrolling a list of pages we then talked about this view and how it works and how it comes with a convenience this style widget that can be used to build simple layouts like this now one thing that I want to mention is that whether you use page view list you or grid view you can always choose to use them with or without a builder so these widgets all have a default constructor that takes an array of children but they also have a builder constructor which is what we should use to render a large number of items so the Builder pattern is something that is actually common across various widgets in flutter okay next we have talked about slivers and how to fit scrollable content within a containers custom scroll view I've shown you how you can use some of these widgets to create a nice hero image effect and finally we have seen how to nest multiple list views in side each other so if you want to learn more about scrollable widgets I encourage you to check this page on the official Docs and here you can see what other widgets are available I would also to invite you again to check out the git repo for this project and you can download the code and see how it works and finally if you head to my website coding with flutter comm I've added a flatter layout cheat sheet that you can get for free if you sign up I hope you have enjoyed this video and if you have any questions make sure to ask me and I'll be more than happy to help thank you for watching and I'll see you on the next videos

Channel: Code With Andrea

Views: 91,548

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

Id: -zJ6CnOVndE

Length: 18min 35sec (1115 seconds)

Published: Sat Jun 09 2018

Reddit Comments

[u/zintjr]

Really good tutorial dude! I like the format of picking a category, layouts, and showing what is possible, I learned a lot, thanks!