Gridview in Flutter with Product Card Design | Flutter Gridview 2023

asalam alikum and welcome back to with today we're going to learn how to design product cards in flutter and also a grid layout of the flutter so in today's tutorial there are lot of things that you're going to learn and this tutorial is going to be a bit long but very informative and very useful for your future projects or for this project as well so first of all let's quickly have a look what we're going to create our application is running and we are inside our home do do we have created our app bar all the things all these categories and also in the previous tutorial we designed this banners as well so today's tutorial we're going to design this product card over here you can see we have the image of this product card we first have a thumbnail a background color of this image rounded shape at the bottom on top of that we have a product image then we have a product discount percentage then we have a wish list button which can be added or removed from the item then we have product title product brand and also the price of the product with a add to card button when us are going to click on this button item can be added to the card definitely these all wigets or maximum of the these widgets can be reused because when we going to click on this product at the top you can see we again have to use this wish list button down below we have a price with a large size so we have two sizes of the price we can create a simple widget which have small and large size of the price we have a discount tag over here we have same the brand down below over here so the most of the things that we can reuse okay so if you are following the series we creating flut e-commerce application and we are in the section three in section one and section two we learn how to set up the project and how to design the Lo Lo part of the screen and after the login user will be redirected to this home screen which we are creating in section three so let's start with today's [Music] tutorial studio and we are inside the project of flutter e-commerce application and down below you can see in the previous tutorial we learn how to design the promo slider which we have completed in the video six of Section 3 and I have just wrap this promo slider into a column because previously it was only in the pedding so wrap it with the column so that we can add rest of the widgets in it and for today's tutorial I have simply created an empty class which is T product card vertical and empty class over here so where it is created because this card layout can be reused throughout the application anywhere or we can reuse this product style in any other project so for that let's go to Common widgets and in the products product cards this is the folder that you've created for the product cards so we have to create two type of product cards in our e-commerce application the one is a horizontal and the first one is the vertical So today we're going to focus on this vertical so the horizontal card will be created in the next tutorials so for the vertical card a simple straight widget this product card vertical style is simply called over here so now we are going to design that card inside this one so as you can see we have a simple card which is going to be divided into two major portions the first one is the thumbnail itself and the second one is the heading with the price and a button overall the product will be in a container then we have to divide it first one a container with a background color a border radius and you see the radius at the bottom and on top of that we will use the stack widget to create first image and then on top of that image we will have two buttons wish list button and the price discount tag so let's start coding first of all we need to create the overall of that product so use the container give it some width 180 pedding has uh only one means that we are only going to add a single line of pedding which will be displayed in few minutes then I am going to use this decoration property with a box decoration and first of all we need to add a box Shadow because the card itself will have a small Shadow so to create a shadow first import this class I have created a simple class Shadow class which is calling this static vertical product Shadow it has color blood radius spread radius and offset which is X X and Y axis so it is also created inside the same common folder in the Styles shadows. Dart okay once added add a border radius and we are going to use our old sizes class product image radius which is when you go to the utils constants and in the sizes do dot in the T sizes we have product image radius which is 16 and once added import the helper function so we are not going to use the dark mode over here but let's create a final variable this is a Boolean variable which will check if theme brightness is equal to the dark if it's true it going to return us a true and that true will be save over here so we can simply call if dark is equal to True use the darker gray color otherwise use the white color this is the decoration for the outer side of our card if I'm going to run this application okay so our application is running let's go to the login screen click on sign in and currently we cannot see anything over over here so now inside this container because we have the sides ready let's add a child property of this container and in the child we have to use the column because as already talked we have to align elements from top to bottom and now inside this column we have to add two things first one we have to create a thumbnail and in the thumbnail we have wish list button and a discount tag then we have to create details so for the first part or for the thumbnail part because we have to create a rounded container so we have are going to use the T rounded container we have already created so let me show you this container as well it's a simple container with a width height padding margin background color border radius and a border so not all the values are given show borders by default fals border radius you see the radius which is applied which is a cart radius large property which is 16 in the T sizes and background color is white border color is border primary which is a default color which is basically you can see a white color or a light color maybe let's close this rounded container we're going to use this one and in that we have to pass the height as 180 pedding will be the small pedding and background color will be if it's a dark mode we're going to use this dark color otherwise we are going to use this light color so this is the light one and this is the dark color so once created let's save it you can see we can see a small box or a thumbnail box switch it to dark mode and now it's much more visible let me also go to the home and add a size box right below this promo slider let's save it and we have a space s back to light mode and now inside this container we are going to stack elements on top of each other using a stack first one is is the image then we have two icon buttons or two designs inside this container we have to call the child property of this container and use the stack property stack has list of Childrens so in the children first thing is the thumbnail image to create this image we have P rounded image which we have already created in the previous tutorial and let me pass the url url in the T images. product image 1 so let me show you as well we have list of products already defined over here when you go to Assets in the images and in the products you see I have defined a lot of products over here and make sure to add this products in the pp spec as well close that one let's save the code and you can see we have the image right in the center of our product card let me show you this rounded image also it has an onpressed event which we are not going to pass so it will remain null we have a default width and height which again we don't need pedding is also not needed and then in the decoration border background color and Border radius is also not needed border radius is by default applied which is T sizes. medium and if we talk about this clip R rect which we learn in the previous tutorial to add radius to the image so this is what we are going to use so we have to call apply image radius now next to this image URL we have to call this apply image radius make it true because it's a Boolean variable and we don't have to provide any radius because when we go back to this rounded image widget inside you can see border radius by default is the medium one and this is exactly what we need so you can also use the product image radius which is also 16 so it doesn't matter let it be there let's add a constant so when you hover over this product image you can see by default is Network image is false so if you're going to use the image from the network you just have to make it true and it will use the network image okay once the thumbnail created now we create the sale tag for the sale tag because sale tag is rounded so we can easily use again the rounded container over here inside the container we need to use the radius because when you hover over this rounded container radius property by default is called radius large but we need to use this uh small property because our tag is very small as compared to other cards and as a background we're going to use the colors do scry color which is this yellow color and we have to make this F opacity 0.8 so it can be a transparent so let's remove the constant from here add constant to rounded image let's save it and currently you can see it's all over the screen but nothing to worry about let's add pedding horizontal pedding will be small and vertical pedding will be extra small so extra small is four small is8 so pedding is defined because when we going to position this then it is going to not take the complete stack and it's covering the complete stack so to position this one first we need to add a child property as a child text we are going to give currently static text as 25% and the theme for this text will be label large and we have to apply a static color because this color is not going to change for the light light and dark mode so we have to give a static color which will be black let's save it and you can see when we are going to apply the child property it will be redirected to the left top Corner as 25% so to make it a little lower from the top we have to wrap it with a position widget give the top as 12 let's save it and you can see it's pushed down so sale tag is created next create favorite icon button to create a circular icon we again have to use a container so first of all inside this container we have to add a color so color will be if currently we have a dark mode then it's black with opacity of nine otherwise it's white with opacity of nine after this we have to use the Box decoration to add a border radius because we using the decoration we cannot use color outside of this decoration but we have to use the color inside this decoration so paste the color inside it otherwise you will have an error so once color and radius applied as a child of this container we will use the icon button on press is for the time being null and as an icon we will use the icons x. hard five property icon X Library already added now let's save it and you can see our heart with a background color has been created also before wrapping in a position widget and shift it to the right side let's extract this as a separate widget so right click on it refactor extract flutter widget I'm going to name it t circular icon cut it from here let's go to the common in the widgets create a new folder or directory which is the icons and inside we are going to use the T icons color inside I added some comments and I also added width and height if in case later on we need to use the width and height so that's why I added a width and height icon color and size as well so currently the size of the icon is large I head back over here import this Library we don't need to pass the dark mode but we have to pass the icon which is required we can also add icon color as a red color let's save it and you can see red color with a white background has been applied let's add a constant now we can also wrap this with a position widget use top as zero and right as zero to push the icon button to the right side so let's save it and you can see our icon is now on the right side and sale tag is on the left side so first part which is the thumbnail is completed till here now we have to add the details in that same container before adding text we need to add a pedding from the left side D sizes do small to add a small size on the left side so text should not be on the at the border of the container as a child because in the details we have to add two to three elements so that's why we need to use column again in the children of the column we first have to add the text which is the product title text so a simple text with the Overflow as ellipses this ellipses means add dots if the text is going to exceed its limit which is two lines as Max lines as two and also the text align is going to be the left side let me remove this constant add constant over here let's save it and down below you can see we have green Nike Air shoes text so title small is not going to work it will be label large save it and you can see text has shrink back to a bit more smaller so because we need to have this product text on multiple places why not create a separate fidget of the same text the reason to create is that we can easily use a Boolean variable to assign two type of styles label large and also title small title small will be a bit large so if we need to show the large Style on product details we can simply pass a Boolean variable and our same text style will be applied so in the common the wigets we have to go for the text okay so I have created a product title text and inside you can see a simple text over here and all the values are defined in the Constructor so only title is required small size by default is false Max lines two text Aline is left so all the properties defined over here in here if small size then we are going to use the label large style and also if we need large size so title will be used for by default small size is false let's head back we can replace this text with a t product title text as a title pass the text let's save it and also we need to make sure small size is true let's save the code and we got what we want also when our first section is going to end we have to add a size box space between items and divided by two let's save it and we have some small space also for the column to align all the elements on the left side we will use the start property let's save it so text should start from the left side okay next to this text title let's add another space space between items and now we want to create brand text with a small verification icon so to create a text next to an verified icon we have to use the row property to align elements in a single row now first one is to create a text name text of some brand overflow as ellipses which is to add some dots add the max lines MAX Line will be one and for the style use theme do of context theme we have already defined and created in our section one so if you're new you can watch the previous tutorial use the text theme dot let's go for the label medium so once theme is applied we cannot use the constant at the top now let's save the code and you can see we have a Nike which is written over here with a GD text next to this text add a small space and after that we need to create an icon so icon will be the verify icon of icons X color is the primary and icon size is going to be icons XS which is extra small size let's add constants and let's save the code and you can see we have a brand with the Nike sign written over there okay now once text part is created now we need to design two things the button and also the pricing but we have to also make sure that our all cards length should be same or height of all the cards should be same let's say we have a text written over here in two lines and another card has only one line then if we are not going to practice or follow the procedure the procedure we going to explain it will definitely going to look weird so to overcome that issue we only have to use a spacer widget so the spacer is going to utilize the space available and keep the bottom text at the bottom so let's say we have one text which is going to occupy a single line and another product card which is going to occupy two lines so definitely a card will not be having a same height so spacer is going to occupy the space maximum space certainly you cannot see this because we don't need spacer in this case but when are we going to move towards grid layout you will see that we have a specific height and width of our each item of the grid so that's why we need to use spacer after spacer we need to add two elements in a single row so we have to use the row property as a children of the Row the first thing we need to add is a price okay for the price create a text variable and inside I created a simple text Max line will definitely be one overflow will be ellipses and style is going to be headline medium let's save it so we cannot use spacer currently because you can see everything is gone we don't have have specific height so for the Tim being let's remove this let's save the code and you can see the price is visible we're going to reapply the spacer when we're going to use the grid layout okay so far the price is added after the price in the same row to create a button we have to use a container property inside this container add a decoration and inside the Box decoration use a color. dark T Colors dark and as a border radius you see we have used border radius do only and top left will be the the Border radius or the guard radius which is 12.0 and bottom left will be the circular border radius of product image radius which will be 16 so actually this is the radius of our card now inside this container as a child property we need to use the icon so icon is a simple icons x. add which will be the plus icon color will be white because the background color of this container is dark now let's save it and you can you can see our word and icon is created now to change the size of this icon we can use this size property to add a size of this icon but later on when we are going to display 1 2 3 or the number of items added in the cart instead of that plus icon so for that we cannot use the size over here for this icon but we also want that same size for our text which will replace the icon later on in the back end so what I'm going to do is I'm going to wrap this icon with a sized box add width and height of this size box icon large you can see icon large is 32 but I have to multiply it with the 1.2 to make it bit more larger so add a constant let's save it and you can see now our icon is looking nicer to wrap either a text or icon in the center so we will again wrap this icon with a center widget and that's it now we have to push this to the right side and keep the pricing on the left side so inside the row we have to use the main AIS alignment space between let's save it and you can see it has been pushed towards the right side and that's the end of the card so one more thing at the top you can see we have to wrap this container with a gesture detector so whenever user is going to click on this card something should be performed or some action or definitely product detail screen should be appeared so wrap this with a widget just your detector it's on Tab currently n so that's it for the first thing which is to design the card now we can assume the card is designed and we can easily create the grid layout so head back to home RO do so first of all what is a grid layout grid layout is basically same like a list view or the layout we have already used multiple times in our applications so it's another type of layout or the layout widget which allow us to create grids easily without a lot of H so we're going to use that grid layout so to use that we only have to use the grid view. Builder so this is what we going to use okay inside you can see in the grid view. Builder we have to pass two things so first one is the grid delegate when you hover over this grid delegate you can see it's a sliver type of grid delegate which requires or which allow us to give spacing between the grids main AIS spacing cross AIS spacing also how many elements we want as a cross AIS attributes so let me create sliver grid delegate with a fixed cross AIS and Max cross AIS so we are going to use the fixed cross AIS over here and as a cross access count because we need to show two products so in here you can change this count based on let's say you are going to display something on a tablet something on some other device maybe on the web part you can change the value over here so currently cross access count is two we also have to remove this constant add comma at the end and now also when you hover over this you can see we can pass main exis spacing cross AIS spacing and child aspect ratio so these are the spacing between the cards that we going to use Control Alt L2 align add constant for a clear visibility so cross axis count is two elements on the cross axis main AIS spacing means uh its main axis is vertical and cross axis is horizontal so when we going to talk about the main axis we going to talk about its vertical axis so cross AIS is the horizontal axis so we are going to add two elements main AIS is a vertical so I'm going to add spacing which is a grid view spacing of 16 and for the same cross AIS I'm going to use the same spacing next our very main thing which is a main AIS extend this means that how much large one child of this grid can be main axis is a vertical axis so how large the main axis X extend so for our product I'm going to use 288 because I have tested this you can play with this value to adjust as you like next for the item Builder we have to add the main item which we're going to display in the item Builder so hover over this you have to pass the context item as a function and it will return as a widget so we have to pass the widget in short wrap it with a function this function requires the build context we don't need it then an index which we require and next we we have to return some widgets so we going to return the product card vertical let me remove this from down bill over here and as a product Builder one more main thing is we need to pass the item count let's say we need to pass four items and also we have to make this shrink wrap to through so that it cannot take all the space available and it can shrink to only attributes we provided now let me save the code and you can see we have one single product generally it's not being scrolled it's being scrolled from here but not from here because we have to tell this grid view Builder that you should not be scrolling because we have something already scrollable so let's add physics never scrollable scroll physics this means that now this grid is not going to scroll its children's let's save it and now you can see it's going to scroll so our main single child scroll View at the top is working if you see some extra pedding in your case so you can simply use the pedding ENT sets. Z Control Alt L this is going to remove the extra spacing you can see from the top and not going to add anything additional now in here you can see we have added these things but to make this reusable only thing we require is all the time we have to pass this custom item Builder so let me extract it as a SE SE widget okay in here in the layout folder of common wigets in the layout directory I have created a new class which is grid layout and I have created name it a simple stess widget name it t grid layout and in the build method I have created grid. Builder simply copy paste it but I've removed this item count which is a constant value remove it from here pass it at the top and item Builder has been passed as same widget function same way it requires over here so it's a widget function build and integer and also the main exis extend which by default is 288 but we can easily change it as we want so let's head back in the home do I have replaced it with a t grid lout we have passed the item count as four let's say we replace it with the two and item Builder is again pass in the same way so let's save it and you can see we only have two products and also at the top you can see inside the product card I have replaced the price with a custom price created a separate widget for the price title and in here it's a simple text currency sign it's again a string but I have added a currency sign defa dollar sign and also the price separately MAX Line Is by default one line through is let's say we are going to put item on a sale and we have a price which is sale price so we can easily add a line through variable using apply deoration line through will be true otherwise it's null so by default line through is false and in here let's remove this AG large to be false let's save it and you can see our item is ready so that's it for today's video I hope you learn something new if you learn something new or if you're new to this channel make sure to like the video hit the Subscribe button and hit the Bell icon as well to get notified about all the upcoming videos you can also download the code from the link provided in the description below once again thank you for watching take care Allah

Channel: Coding With T

Views: 2,846

Keywords: gridview in flutter, gridview builder flutter, flutter gridview, flutter gridview builder, flutter grid layout, flutter gridview with image and text, flutter gridview card, flutter gridview tutorial, flutter gridview card example, gridview flutter, gridview flutter ui, product card design, flutter product card design, flutter product card, card design in flutter, flutter product detail page, flutter ecommerce project, ecommerce app flutter, coding with tea

Id: JsPMdnkiav8

Length: 27min 2sec (1622 seconds)

Published: Tue Oct 24 2023