Flutter Tutorial - GridView VS Staggered GridView | With Dynamic Height

with the staggered grid view you can create a more unique grid view that supports multiple columns and rows of different and custom sizes if you are new here subscribe to my channel and make sure to watch this video till the end to create a more unique grid view we will make use of the package flutter staggered grid view and with this one you can build more complex uis based on columns and rows before we integrate this package we want to start with the normal grid view which is supported by the flutter sdk first of all you can define how many items should be displayed in your grid view and secondly you can build then each of these items within this item builder and therefore you return here a widget in our case a card widget which displays in here an image so this build image card method is then creating one specific image within our grid view and lastly you need to define within your grid view this grid delegate and here you can define then how many columns our grid view should have so in this case we have to find here one two three columns however you can also define here four columns or any other size that you like within this grid delegate you can also define the main axis spacing which is then the spacing vertically between our items so here we have 8 pixels between our items and if i put a higher value inside then you see it even more clearly that we have here 50 pixels between our rows and secondly you can define the cross axis spacing and this is then the spacing on the horizontal axis between our items and now with this basic knowledge about the grid view we can convert our grid view to a staggered grid view and therefore we will use this package now to convert it to this package we simply replace here this grid view builder by the staggered grid view builder and secondly you need to simply remove here this line grid delegate and also here the end and also all of these five properties are defined within the staggered grid view and lastly the staggered grid view requires a staggered tile builder with which we have then more control over how each of our items are displayed within our grid view and we want to get started by creating a staggered tile and here we have this constructor count and then you can define your two numbers the cross axis cell count and the main axis cell count and the values 1 and 1 are the neutral values so our grid view looks the same as the grid view which we used before from the flutter sdk and now we can customize these values to create a more unique design so for example i put this value to 2 and i also change the cross axis count to 4. after this make sure that you click on hot restart and now we have here a new design which has four columns so we have here four different columns and our image card item takes then every time two out of four columns so this means that two columns are reserved for our item in space out of all of the four columns that are virtually here on our width and the other value functions then more like an aspect ratio so if you put here for example 4 inside then you see that our image has here two blocks in width and four blocks in height and if you take it instead two then we have two blocks in width and two blocks in height and this basically means that our item has the same width and the same height and now you can also create your more complex designs so you can for example write here something like if the index is even then we want to reserve here 2 otherwise we get only one for our item and this means now that the first item the third item the fifth item the seventh item and so on have always here the two and the other items the second the fourth and so on have then every time a value of one and with this index even you can then create easily more complex designs let's also look more at how we can use the index to create other designs so instead you can also write index modulo 7 and the statement basically means for every seventh item in our grid view we want to display then this amount and otherwise we take here another one and now we have here two different dimensions for our items and you see the first item is then displayed here with this dimension and also if you go here through your list this is the seventh item this is also again displayed in this dimension and also if i scroll here through this list we have always here the same design which always makes the seventh item bigger and the other items have then this dimension one by one which is here the simple card and which has then half of the size of our other tile and of course for this design you can also change then the cross axis count so for example we create here this time three columns and now we have here three different columns and some items take then here for example two columns out of three columns from our width so they have here two columns reserved for this space and one really important thing is that if you change here anything within the cross axis count or if you also change here the staggered tile builder then always make sure that your hot restart and with this you make sure that then the design really is the correct design which you have changed next to the staggered tile count you also have another option therefore you can set also the staggered tile fit and this will make sure that all of our items get then the height of the items itself that we have defined here within these items and in our case we have here images with different sizes which you can here see so some images have here less in height and this is also what is then reflected within our grid view because here it's more dynamic to the height of the widgets itself and of course you can also change here then again the columns so you can for example choose these three columns and now you see we have here three different columns which we have defined with our cross axis count and secondly all of our image have here their individual size and this number which is our cross axis cell count works then similar to what we had here before so it is also the same as these values what we had here in the beginning so in this case this says that our item takes here one column out of three columns and we also can change it so for example i put here two inside and the cross axis count to four and now we have here four virtual columns inside of our grid view and for each item we have then two out of four columns here reserved within our width so all in all the fit constructor is always useful if you want to have for each of your widgets an individual custom size and we also have another option and this is a staggered tile extent and like before you define first of all the cross axis cell count and secondly you can then define the height of each of your items and now you see that we have here 150 pixels in height for each of our items and if you change this so for example 300 then you see that each of our items has just 300 pixels in height and to make use of this staggered tile extent you also need to create an extent builder this time instead of account builder and within this extend builder you also need to define then this time the max cross axis extend instead of the cross axis count so like you remember before we hadn't this max cross access extend instead we had here this cross access count and this was then defining how many columns we have here in our design and now the max cross axis extent works pretty similar only that we this time do it here based on pixels and therefore it simply calculates here first of all the width of our screen and then it says that each of our items can have here 150 pixels maximum in width and if you put here this value higher then you say okay it can even have 200 pixels in width and if you put this value even higher then you will see that he takes the instead one item because also one item fits here the whole screen directly and lastly let's take also a really small value like 50 pixels and now you see we have here multiple columns which have a maximum width of 50 each and the cross axis count that we had defined before manually was now calculated based on this max cross axis extend automatically for us and this extent builder is always useful if you work with slivers because you can then put it for example within a custom scroll view which only accept your slivers instead of widgets so all in all we have learned three different approaches how we can use the staggered grid view the first one is the staggered tile count and with this you basically defined the layout of each of these items through a cross axis cell count and a main axis cell count whereas the cross axis cell count the first value was dependable on this cross axis count and secondly the main axis cell count was dependable on this other value the second approach was the staggered tile fit with which each of our items has an its individual height and we only defined then here the cross axis cell count which was dependable on this cross axis count and with this we defined how many columns each of our items got and the third approach was to use here the extent builder and the staggered tile extent and with this we defined next to the cross axis cell count also the height of each item so in this case each of our items has here a height of 300 pixels and by the way if you want to get here this whole source code you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer 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 you

Channel: HeyFlutter․com

Views: 42,930

Keywords: android, flutter, flutter grid layout, flutter grid view, flutter gridview, flutter gridview card, flutter gridview ui, flutter gridview widget, flutter staggered grid view, flutter tutorial, flutter tutotial, flutter ui, flutter ui design, gridview flutter, gridview flutter ui, instagram grid flutter, ios, mobile, staggered grid view, staggered grid view package, staggered gridview, unique grid view, varying grid view, gridview vs staggered gridview, dynamic height

Id: XNwL_9ur8R8

Length: 10min 38sec (638 seconds)

Published: Thu May 13 2021