Flutter Shops/Brands Screen using GridView | Flutter eCommerce App UI

and welcome back to cing with d today we're going to learn how to create brand screen you can use these Brands as a separate entity and also you can treat them as the vendors of any e-commerce application so let's quickly have a look what we are going to create our application is running and we have completed all the designs of this e-commerce application and also in the previous section we have already completed the login design so this is the last video of this design so let's go to the store and in here you can see we are currently showing the Four Brands the feature Brands when we are going to click on this view all it should load all the brands available or you can say all the shops or all the retailers available in your e-commerce application in a multiple e-commerce application we have Brands as a separate entity and shops as a separate entity so it's your choice how you want to treat it but when we going to click on this single brand it is going to fetch all the products related to that brand so this is what we're going to create today we creating flutter e-commerce application and we have completed all the setup in section one all the folder structure themes and the project setup so if you're new you can get the complete playlist link link is in the description or from the right top corner you can also download the complete code from the link in the description and in the second section we have completed all the login design from the splash screen onboarding login forget password everything and after that we are about to complete the e-commerce design in this section and from now onwards in the fourth and fifth section of this playlist we're going to start the back end so let's get started today's [Music] tutorial we are inside the project we created for e-commerce application and in here you can see I am currently pointing towards in the shop go to screens and in the brands this is a new folder or new directory I created in the screens which is All Brands r. it is empty stess widget and I have created a custom app bar which is TI bar we created in the previous tutorial at the start of this section using preferred size widget which custom and added some default pedding and also default icon is used over here with the light and dark modes so if you want to use it you can do it if you don't want to use it you can use a simple appar over here after that we have a single chart scroll view to make our design scrollable and after that we have a padding which is going to be the default space from all the sides so I've just added a heading over here which is the brands if you go to this heading is a custom heading it is a simple row has a title and has a show action button and if I want to show action button over here I can display it by default which is true so I don't need an action button I will make it false after adding some default space space between items which is 16.0 we're going to design the brands over here because brands are also being appeared in a grid fashion as you can see on your screen so to display the grid we have already created the custom grid layout it has item count so let's say we're displaying 10 brands so I'm going to give item count as 10 because currently we are using the static counts and static Builder and later on from next section onwards we will start customizing the back end and what is this grid layout it is a simple grid view. Builder has an item count which we just pass as 10 and Shrink gra is true pedding is zero physics is not scrollable and as a grid layout we are using the grid delegate with a fixed cross access count this cross AIS and the main AIS count is very important over here cross AIS count means that we are going to use only two elements in the horizontal space of the device and as a main exis extent this is related to the height of the one single individual previously it was a product so product has default height which is 288 and now we have to reduce the default space because you can see the brand is hardly taking I think 80 as a height and at the end we have two options for the main access spacing cross access spacing this should be same uh and it's all up to you I we have given 16 for both main AIS and cross axis main AIS is towards the vertical Direction and cross AIS is towards the horizontal Direction and then we have the item Builder which has a context and integer as an index so let's get back over here as an item Builder we have first the context and the second one is index as an integer and then we need to pass a widget because when you hover over this we have to pass the widget so as a widget what I'm going to do go to comma in the widgets in the brands we have brand card which we have already designed while creating the store screen when you go back and you see we have already created this card over here so we are going to same use this card again so what this card is doing it has a rounded container it is clickable card show border is true background color is transparent have some small padding and in the row we first have a flexible circular image so it's flexible because we don't want our design to be we go outside of the boundaries and after having a small width as a space we use again you see this is flexible this is expanded you can use flexible as well over here and then we have a column which contains brand with a verified icon and down below we have number of products so let's head back we're going to use the brand card make the show border to Pro because we want to make this border to be visible we have to remove this constant add constant we are required and also it's not necessary to do this manually you can also go to terminal and run the command flutter fix with the two hyphens and apply this is going to fix all the required fixes inside our application okay so let me rerun this application okay so application is running let's go to the login screen click on sign in button and this is the dumy data we have so let's go to store click on view all and currently you can see we have 10 brands currently displaying but the width or the main exis extent is what we have to pass so inside the grid layout when you H over this we have the entry which is main ACC extent so next to this item count let's search for mainx extend give it 80 let's save it and you can see it's done okay in here when we are going to click on any of this brand we want to redirect to another screen and we want to display all the products related to Brands so to do that we're going to reuse the design which is all products and inside you can see we have a drop down button which is going to filter everything sort using the name sort using price lower price sale newest popularity so we going to use the same design but in this design you can see we have the app bar over here but in all design which is All Brands we also have the app bar so we cannot reuse this design so for that we have to wrap this column refactor extract flter widget e sortable products so we going to treat this single wiget as a sortable and later on as a back end we can simply pass the list of products to to the sortable widget and it will do the remaining work for us it doesn't matter it's the products coming from the brands from the categories or we passing from randomly from some other place there are the popular products or any type of products can be easily treated inside this single class so we can extract it from here into the commons widgets go to products create a new directory which is sortable you can name it anything and if as you can see I am going to create a one single file inside this directory so it's not mandatory to keep or contain the folders again and again so it's all up to you you don't want to keep the folders inside over here it's not necessary because you can see we have only four items in the card this means the card folder is required two in the product card so this means that this is also the required directory and in the ratings we have only one maybe in some other because like you can see in the layouts currently we have one layout so I'm just following the n and created a new folder which is sortable create a new class sortable products Dart hit enter import material Dart past the code import required packages head back to all products import the sortable products here and also in the All Brands whenever this T brand card is going to be selected so we have another property inside this card which is on Tab you can hover over this or you can head towards this which is on Tab and show border so we have two properties currently later on in the back end we will definitely pass the brand model to this to display the brand so as a on top on tap sorry as a function when this is going to be tapped we want to use get. to control L and as a get. to we are redirect to the sortable products import this one remove this constant add constant to sortable products and that's it okay so one sortable product created let's head back and go to the All Brands brand products to D import material class create a stess widget name it brand products and in here we we going to create first scold as a body again create an app bar and using the same T Bar as a title text we are going to give the brand name sorry it's not a body it's going to be Apper over here and the body will go down here and then we will make the design first scroll then again use the pedding from all sides and give the default space to keep consistent pedding throughout our application and then as a child we going to use the column let's say at the top you want to display again the specific brand details so we'll use the same brand card over here add some space and right after this we are going to use the sortable products the same way we added the sortable products inside our all products import this Library add sortable products over here and we are good to go because inside this we will pass the products and we have the drop down menu we have the grid displaying all the product vertical card so this means that we don't have to do anything else but just give the specific products related to this brand now let's save the code click on this button it's not working because we have to go to All Brands and inside this brand card when it is going to be pressed we have the on Tab function so we are going to use this on tag using the get. to you can use the Navigator do push or any other method to redirect to the screen we using the getex so use get do2 to redirect to Brand screen remove the constant from here add constant over here let's save the code click on any of them and at the top you can see we have brand detail the purpose to add brand detail over here is let's say later on in future you are going to treat this card as the shop card or you want to display the specific detail related to the shop which is selected currently it's displaying as a Nike if you have some other shop detail you can display a detail card over here then we have sortable options currently drop down is taking the complete fit you can also display the text over here and make the drop down smaller and then we have the list of products so again that's your choice so that's it for the design that's it for the the section three and also the e-commerce design is now completed from onwards we are going to start the backend playlist which is the section four of this e-commerce application so once again thank you for watching if you're new you can watch the previous videos link is in the description and you can also download the complete code from the link in the description if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming videos so once again thank you for watching take care and office

Channel: Coding With T

Views: 3,632

Keywords: flutter brands screen, flutter shops screen, shop page in flutter, brand page in flutter, gridview in flutter, gridview builder flutter, flutter gridview, flutter gridview builder, flutter gridview with image and text, flutter gridview card, flutter gridview design, card design flutter, horizontal card flutter, flutter ecommerce app with firebase, flutter shopping app with firebase, ecommerce app flutter getx firebase, ecommerce app flutter ui, coding with t, t store

Id: yEEKtshaTNk

Length: 11min 30sec (690 seconds)

Published: Mon Nov 13 2023