 Hello guys. So in this video, we are going to discuss about grid view. So we will be working with two different type of grid views. The first one would be the static grid view that will have fixed number of items and we need to define it yourself. And the second one would be the dynamic grid view where each item is coming from some variable. So let's go ahead and start with the static grid view. So let's quickly create a grid view dot we have this count. So here this is a required argument that you need to pass the cross x count. That means how many columns are required in single row. So let's go ahead with one first and then we will move to another one and another we have some property that is children. So here we need to define your children of grid view. So for the simplicity, I will just add a container here and we can define some color colors. Plus let's say dot ember and we are facing some error. This is because of this cost. Let's remove cost and save it. And you can see you got one. Let's quickly copy this and create four or five items. Let's give it green, red, purple and let's give it problem. And we are missing comma here. Just add comma, comma and save. And you can see you are able to see one item. So if you want to have a grid view where two columns are there, then you can do define this cross access line count to the two. So you can increase or decrease it from here. Let's say if you want three items. So one single row is having how many entries that depends on this cross access count. Now what we can do in order to do it better, we can cut it and create a get widget function. So this gonna give us a widget back. Let's go here and create a method. So this method gonna give us return us that container. And you can mention the return type as widget. And now instead of using these weekend word, we can make it little dynamic. So we are getting this colors here. So let's create some arguments here. So I just create a simple one first so that you can understand. I just use a color and colors. And the second is I will take one, let's say icon data. That's icon. So I just quickly add a child here, which wouldn't be an icon. And in this we can pass this icon. Let's give it size that 80. And we just come here. Here we need to pass that arguments. So here if you're using normal arguments, you need to remember the sequence like we can use colors dot ember. And the second argument would be I can start, let's say a chair. So save it. You can see it is working. Now, if you have n number of arguments, you need to remember the sequence. Let me just change this position. These are positional arguments. If you use like this, then you would face a problem. So you need to remember the sequence over here. So in order to avoid that, what I do is I just convert this arguments to named arguments by wrapping it into this curly place. And you can mention here it is required. Required. So required means it must be passed. So here whenever you use this, you can see color or color start ember and then you can see icon. So that means I can start. Let's say chair. Save it. Okay, now what we need to do, we don't need all these things. We can replace these things with widgets. And we just quickly change the color to green, red, purple, brown. And we can change this icon to let's say man, car. And let's take it that thing. Let's give it a Wi-Fi. And we can remove all this thing. Okay, whenever you want to modify, you can modify this widget and you will be able to see this. Okay, now the problem here is we have already defined this static color here. Instead of using the static color, we will do what we will just use this color, which is coming as an argument. Let's save it. And you can see we're getting all the stuff. So this is simple. Now this is again a scrollable. We have already seen and we have few more properties of the screen view. Like if you want some spacing between these items, we have this main X spacing. Let's give it five, which will give some space between each row. Same way if you need spacing between each item in a single row, then you can use that cross axis spacing. Let's keep it five. And you can see that spacing. Simple. Now, so let me change the cross axis count to two and save it. Now this is basically scrollable to top to bottom. So if you want, you can also use that shrink wrap property as we have used in this view group and save it. And you can see now it is consuming only this much space. Now another property is there that is scroll direction. So again, it is taking excess as we have done with the list view. Same way we can do it over here. Just save it. And you can see it is scrollable horizontally left, right, left. So let's comment this and keep it default and save it. That was a simple example of using static list view. So we are now going to convert this into dynamic list view. So in order to do that, we need the data. For the data, we are going to create here the variables. So for the simplicity, I have already created data and we are going to use it over here. So let's remove this const here and const here, save it and save it. So here we just have created a list of icons so that we can use it. So just change this count to the builder. And once you convert it in the builder, you can see these properties are no more usable. So let's comment these as well. Okay, now once you use this builder, you can see we have two required properties that is grid delegate and item builder. So let's quickly create an item builder first, which require a function that is again taking context and index. So here you need to mention the widget that you want to display as an item of this grid view. So we already have this get widget, which is greater. So let's this time keep the color same for all the entries. Let's give it up. Let's say blue blue and the icon you can get it from this icons, which we have already created. And just pass this index. So once you have done this, now we left the second required property that is grid delegate. For grid delegate, we have silver grid delegate with fixed cross axis count. So here you need to mention the cross axis count, which is a required property. So I just keep it to one in order to show you cost. Now, once we have done, you can see you are able to see one item in a single. So we got an error here, because we have missed something else as well. So we have missed one more property that is required here, that is item count, like we have used the same in this view. So let's give it a icon start link, save it and just restart it. So this time you will not be facing any of the error. You can scroll it and no problem. Okay, now I just quickly change some settings like I don't need one item. I just use two items here. And we need some spacing here. So earlier we were using the spacing correctly inside that review. So this time we need to use that properties over here. So let's use main axis spacing. Let's keep it by save it and see we got a space between this main axis and same way we need cross axis spacing. You can add a comma in order to show it better. So now you got these list of item. So if you want to make it inside some specific eyes, then you can wrap your review inside a container. And you can add some height here. Let's keep it 400 and you can define the color as well if you want. So colors start yellow and save it. And you can see you got your items here. And if you want you can add padding as well. So you can either add padding to the container or to the great view reader. So we have padding here as well and we have padding here as well. So I just define padding here if you want. Let's create const edge instead of dot all and why is enough I think. So that's all for this video. If you have any doubt do comment in the comment section. Thank you.