How to create GridView in flutter with any no of column. || Build Gridview in flutter with example.

hi guys in this video we are going to see how we can build a great view like this in flutter it is a perfect great view with two buttons title and price so let's get started i have created a stateful widget and i called it as a grid b and then we will use uh first we will use our previous application in which we have made a slider it is a beautiful slider without a plugin we build a slider from scratch without using pop this plugin so how we can build this you can see from the i button so in this video we are going to see we will build a great view inside a grid view we will render a container with having a title image price okay now i have created a stateful widget and record it as a grid b and inside grid we state class i have created a list of map and i provided the data title price and images for all one two all the items that is available in a grid map and now i have created a container it is a container i will replace it with our grid view dot builder and then inside item count inside a item count first i will override out an item count i will pass a grid map grid map dot length now i will override our item builder and then first is context and other is index i will return a container okay it is asking for and another required parameter is grid delegate so i will provide a great delegate and the great delegate is fixed cross access count and then i will provide across access count 2. what does it mean that it will create a two column for me when i will pass a cross access count equal to two it will create a two column for me then i will save it and first for distinguishing i will provide a color and the color should be colors dot iridescent let's say 100 and then i will refresh it i am okay i need to call this before calling i will use a shrink wrap property i will call it a true and then the grid we should be called so let's call it let's wrap this children and then inside a row i will cover the grid b then refresh it you can see that we are getting error we are getting a render flow this is because we need to use a column we will wrap it with a widget and the widget is single child scroll with single child scroll view then refresh it now you can see that our error is gone but we are not able to scroll so to fix this we will come to our grid b widget which is here and then inside grid view builder we will override a physics property physics property and the physics should be const never scrollable 6 and then i will refresh it after refreshing you can see that we can scroll now we need to provide a padding so let's provide a padding for our grid and let's wrap with a widget or a padding and then we will provide a padding of 24. on should be removed and con should be placed here now you can see that our grid view is working fine but it is mixing all so let's come in a great way builder and then come inside cross access count here first we need to provide const and then we have a certain property here the first property is cross axis spacing so when i will provide this cross section axis spacing it will give me a space between two column so let's provide it and see 12.2 when i refresh it you can see that we have got a space between a two column and another property is mirror axis spacing and main axis spacing is between the two rows spacing between the two rows so let's provide it as well now you can see that our widget is looking fine so let's come inside container and clear it and now for decoration purpose we will use a decoration box decoration border radius border radius dot circular and it will i will provide it 12.2 and then refresh it and then provide a color now you can see that it is looking fine now i i need a space that is i need to increase the length of every element because it is too small to adjust all these inside a grid view item so i need to increase it so what i will do when i will provide a height of the container to increase it it will not going to do so so to uh so it is not required here we will remove this and then we will place this height inside the silver grid delegate fixed sound and we will override a min axis extent main axis extent is the length of the row in a grid view so main extent should be if i if i will increase it with 250 you can see that our length of the container each container would be increased significantly so now you can see that it is increased so now it's time to come inside container and then we will inside the child okay child inside a child what we will do is just come here and then i will call a column column widget and then children after this i will come inside here and then what i will do is just create another container then or i will use image dot network image dot network and my list is grid map here it is a grid map so i will call a grid src okay it will asking for me src so i will what i will do is just to use a dollar sign after this a bracket and then i will use a grid map dot element at index and i will call the okay let's first take this out and instead of the single quotation we will use remove this and use a double quotation then it will be fine now first it is required here now i will use a image property when i refresh it you can see that our image is now being loaded or we are getting error because i think we need we are headed by error because no host is specified file null so let's refresh it because it is not taking the images sorry we need images sorry we need to provide images here and when i refresh it you can see that our image being loaded okay our image is now rendered but it is taking the height whole height of the container first it is not a correct manner because it is i have created a rounded box container and it is giving me a rough edges to get rid of that we will wrap this widget inside the clip are correct then inside a clipart i will use a border radius property okay so border radius border radius dot only top left radius dot circular and 16.0 is enough and then inside top right the same will be done so radius circular and then 16.0 when i refresh it first we will use a const perfect const [Music] when i refresh it you can see that our widget is now being furnished well so it is 12.2 we will increase it 16.2 in the container then we will get out of that edges rough edges and now we will give a height of the image and the height should be height okay height should be 200 or 170 but when i do this you can see that it is not looking very fine to get rid of that we will use a fit and we will provide a box fit dot cover now it is looking perfect okay let's refresh it first you can see that the some images has been perfectly fit but some is not so to achieve this we will use width double dot infinity double dot infinity now it is looking fine we need to decrease the size of the images because it is not looking very much perfect because we need some more space i we can increase the main exercise so let's increase the main exercise by 300 and now it's looking fine after this what we will do is just create a column just create a padding widget and then inside the padding const insert start all and the padding should be 8.0 and now what we will do is just child come inside child and then we will use a column to render our next price and title guys so let's render a title and title should be this same here so let's copy this and then paste it here and instead of images we will use tight now refresh it and now you can see that our title is rendered and now we will use a const sized box to give us space height should be 8.0 and then we will provide a text widget for our price tag so let's copy it refresh it and then paste it here and we will use price first it is price or not okay price so now it will be fine okay it is at a center we don't need at a center so what we will do is just create first give a call comma and then refresh it and now inside the cross axis alignment we will use cross access alignment dot start now when i refresh it you can see that okay it is not working fine why because it will be not placed here it will be placed it should be placed here so cross access alignment should be start okay where it will be placed it will be placed inside the padding widget and then column and now it is fine so let's uh style it first we will use a style theme dot of context dot text theme dot i will use headline six for this purpose then i refresh it you can see that the alpha is now working fine and for the okay i will use subtitle one for this purpose because it is looking much bigger okay it is now looking fine i will use merge const text style and then font weight should be font weight dot w 700 and then refresh it it is looking fine now i will copy that code and then i will paste it here style code i will paste it and instead of subtitle one i will call it subtitle two and then i will change the color so color should be colors dot gray [Music] i will remove the const first refresh it it is looking fine but it is creating some background issue so let's change the color of the container our container and i will call it amber ascent okay it is looking much more better now i will like to provide some [Music] share and buy option if i will do this i can so let's copy const then here first after this i will use our widget children then i will provide a two icon button icon button on press should be overrided and then the icon should be i can start first is first icon should be icons first is copper do you know i can start hurt [Music] and refresh it and then i will provide the same but i will call it cart now when i refresh it you can see that we are getting error because it is render float error and the pixel is around required is around 4 pixel so let's increase it by 10 and let's come here and we will call it 320 refresh it or 310 now you can see that our video is looking fine perfect so in this way you can create a grid view in a flutter in flutter so thanks for watching

Channel: Be Developers

Views: 38,889

Keywords: flutter gridview, flutter tutorial, gridview flutter, flutter ui, flutter grid, flutter widgets, gridview in flutter, flutter in hindi, flutter listview, flutter grid view, flutter basics, flutter development, gridview android studio, gridview

Id: M0Gs1aJniv0

Length: 17min 8sec (1028 seconds)

Published: Fri Mar 25 2022