Flutter Shopping Cart Screen | Flutter eCommerce App UI

am Alum and welcome back to coding with t today we're going to learn how to design card screen splitter card screens are the crucial part of any e-commerce application and they can also be used in delivery applications in any type of e-commerce application so definitely they have a lot of use so first of all car design should be modern and elegant but above all it should be very user friendly for the users who are going to use your application because they are mostly dealing with your part so first of all let's run the application to see what we are going to create so our application is running currently we are in the dark mode and first of all at the top we have four items in the total card count then at the bottom you can see we have one variation product with two items in the card one single product item and also one for this Apple iPhone now first of all let's go to cart over here click on it and you can see we have one entry of iPhone one of tracksuit and one variation with over down you can see two variations storage is 256 color is red and also we have total item displaying at uh next to the each product and also total cart amount displaying at the bottom so when I am going to change these values these values should be added in the card and also the bottom price and price of that specific product is being updated so when I'm going to remove this you can see it's back to 500 price reduced when we are going to try to remove this from the product it's going to show us a popup and once remove that product will be gone head back over here so this product is no more in the card so same way let's try to add one more product again let's click on this plus icon and you can see directly we can add item to the car to provide ease of use to our user and also when we're going to add the variations it's not going to add the variations because we have to select the variation first so let's select it green 32 and also if we have any variation already in the card these price will be updated so let's say we have 332 price and it is in stock red 32 size two items product added head back and you can see the two over here let's go to cart and we have red 32 added two entries with the same price updated right below in the total so this is what we want to create in today's tutorial definitely this is a design but in the next section when we going to start the back end we will make sure to implement each and every feature of this card so stay tuned and you can also download complete e-commerce application from the link in the description also watch the complete playlist video from the right top corner or from the description below so we are creating fter e-commerce application and we already covered with the section one to set up each and everything then in the section two we designed the complete login part and now in the section three we are about to complete our e-commerce application only few videos left and from onwards after this section we will start creating or dealing with the back end so let's get started with today's [Music] tutorial studio and we are inside our project we created for our flut Ecom application and in here in the previous tutorial we learn how to add addresses in the card but in today's tutorial we going to create a new feature of shop application or a shop feature so let's go to the lip folder in the features we have a shop feature and for the shop feature design we have to add a new screen which is a card screen and in the card I have an empty card do do which is a stess widget it has a simple scaold so first of all by keeping our design in mind we have to create an app bar we're going to use the custom app bar we already created you can use use the default abar as well as a title we going to use the text widget with the card and remove the constant from the scold and use sty as head line small after this iar for the body of the scaold we also want to add fixed static bottom navigation bar button which will display the total and also let us to redirect to the checkout screen so we will do that in the bottom navigation bar but first let's design the body of this card screen so we want this body to be scrollable so we'll use single CH scroll View and first we we have to add a pedding default space and use the t- sizes class this is a default space 24 and T sizes already created in the U if you don't know about this classes I suggest you to watch section one of this playlist after adding space from all the sides of the screen okay now as a child of this ping we are going to use list view to keep or to display all the elements of card so we can use list few. Builder but we are going to use a separator which will add space between each item first add has a separator Builder we have to create a function don't need the index and sorry first is the context second one is the index so we don't need any of them then as a separation we are going to use a size box space between sections so it's again 32 next item count let's say we going to show four items then we have to design our C item inside this item Builder so let's push it at the end control all help as item Builder we are not going to use the context but we need index later on so let's create a widget inside this we are going to use the column with the list of Childrens to place elements in vertical direction if you see the design that uh we first have to create for the first row or uh for the first entry of the column we need to create a row which contain one image one rounded image then as a title we have at the top brand name then we have the title of that product after that if the product has variations we will display the variations so first as a row we're going to create the children and first one is the image so we going to use T rounded image T images. product image we already added in the assets next as a width and height we going to use 60 add a constant then add a pedding t sizes do small small is 8.0 then for the background color we are going to use first helper functions to check if it is a dark mode we will display the darker gray otherwise for the light mode we will display as a background color light color remove this constant now add it over here and also we need to call this start screen so let's go to home widget in the home app bar we created custom card counter icon previously we created card counter icon with the on press event but if we see the usage of this one so we don't even need this on press instead we can simply write get do2 or you can use navigator to navigate to new screen navigation. of context okay so our application is running let's go to login click on this sign in and in here at the top and we are going to click on this C icon and we are inside our card screen let's go to the card and in here we are going to display show back arrow as true let's save it display the back arrow as well and also when you go to TF bar in the icons if you cannot see the icon in the dark color you just have to add this dark attribute tper functions if dark is true we'll display the white else dark so that icon will be displayed okay so in here we cannot see the image because we have an error which is vertical view Port was given unbounded height because we are using list view over here at the top let me sort it first at the top inside this list view we have to use shrink WRA to prove so that it can only take space of its childrens now let's save it and you can see we have four images and separator Builder is adding space between each of the image after this image add a space space between items after this image we are going to use again a column property want to Stack elements in vertical Direction so first one is the brand and we have created brand title with verified icon let's give the dummy title over here let me show you the screen as well it is a simple row it contains flexible brand title text with some color MAX Line will be one text line is Center by default so we can change this and we have an verified icon over here so this is exactly what we need next to this one we going to use the product title so we already created product title variable inside the text so this is the benefit of creating re usable widgets you can see it's a simple text but MAX Line small size text align so our theme is being not changed we have label large and title small for the sizes so exactly we're going to use max line one for this add a constant let's save this and you can see we have title and at the top we have a brand give the cross access alignment to start off this column to push elements to the left side and they're pushed next to add attributes we need to use the text pan because attributes will be added dynamically so that's why we need to use text pan for that so let's use text. Rich property and inside this Rich property we have text pan text pan contains list of childrens's so let's say when we going to deal with the back end we have a list of attributes using the map property we can easily run a loop on this map to create different entries but for this example we going to use children manual children so let's add X span for the first attribute we're going to use text pan and as a color style will be body small for the second one control D to duplicate let's say we have a color green selected and the theme we are going to use is body large let's save the code and you can see we have color and color is green by this way we can add as much as children as we can so let's say control D to duplicate let's save it so we have another property which is still color so let's say size UK I don't know what is actual size is so here we have another attribute which is size UK 08 but in here we need to make this adaptive design so let me add something extra in this text so let's save it and you can see we have render Flex error so we have to wrap this title with a widget which is flexible not Flex so let's save this it's currently not visible and in here you can see we still have an error which is let's find the actual error which is render Flex children have non zero flex but incoming height this means that we have a height issue over here in the expanded we have already added flexible for the horizontal expanded this expanded is currently causing issue inside the column so this means we have to use main exercise do minimum let's save it and you can see our design is now visible and also product title text can easily be now handled so let's make it smaller this means that we have created so far is a special widget which refactor extract fter widget name it t card item this is special item related to the card let's refactor this card item represents a single entity we can extract it from here let's go to common in the widgets inside products we already created a card menu icon which is using stack so inside same create a new file part item do do import material do do and P the code for required packages let set to card do inside we have to import our children and later on with the back end we will pass single card item using this index property so we will handle that in the later sessions now inside this column the first thing we added which is a cart item so as a second row of this column we need to add another row which will add item to the cart remove item from the cart and also display the total price so for that this means we need another row also we have to add some space space between item next inside this row as a children property we need add and remove button with a center counter we display the qu of that product so we going to use the circular icon icon will be icon X do minus import the icon X Library remove the constant next add width and height width and height will be 32 then size will be T sizes do medium icon is do minus icon so once again add a constant color of this product we again first have to remove this constant add helper functions do is dark mode it is going to check that if cly theme do of context. brightness is dark it will return true and we will display the white white color otherwise we will display the black color and also for the background color this circular icon is simply a container with the specific width and height which can be defined box decoration with the color background color can be added if not added it will automatically check the dark mode and add some specific colors same with the Border radius and as a child on press of that icon button icon color and size of that icon can also be declared so in here for the background color we're going to use the darker gray color for the dark mode and light background color for the light mode let's save the code and you can see the minus sign created C displaying the white color next to this icon inside this row add small space then we're going to display the text over here and the text I've added is two then as a style we're going to use the title small and then again we need to add the same space after that we need one more icon so let's copy this let's paste it over here Control Alt L this time change the icon to add so background color will not depend on this light and dark mode but it will be Prim primary color and on top of this primary color we always use the white color of this icon add a constant control all L let's save it and you can see we have text and two add and remove buttons inside this row but same inside this row we need to add one more thing on top of this add and remove we want to add some specific space using size box we are going to use the width property to calculate the space because the space we want is the space of that image then the space in between so that our design should start right next to this color sorry the text so let's add 70 let's save it and now you can see our space has been applied now this was related to the first row once again we can need these two add and remove icons with a center card multiple times and on multiple locations so first we have to wrap it with a row so these all elements can be treated in a single row and let's use its main exess size do minimum so that it can only take the required size now we can extract this row refactor extract FL which it so it name is t product quantity with add and remove you can also add button more clarity will help you to easily understand code later on so refactor add a constant again as this can be reusable so we will add it inside the common widgets products card we can also add that in the products itself but we are going to use C over here so add a new file add remove move button do dot Port material do do paste the code import required libraries close this head back import this class next at the end we are going to create or we want to display the price so we are going to use the product price text let's give 256 because already we have defined the currency sign over here so currency sign is created we can change this but let's give the simple price max line is one line through is false so let's save the the code and you can see it's created but currently it's right next to these buttons and also we have a top size box this means that we cannot use the space between so I guess we need to create another row so that these two widgets can be treated as a one widget and this should be treated as a separate widget so wrap it with a row property add it over here name it extra space so now this row is one wiget and this is the second widget so we can easily use main AIS alignment as space between let's save it and you can see now text is on the right side Control Alt l so this is the design we have to remove extra Imports and our design is now ready to be launched so the last thing we need to create is the bottom navigation bar we can also create the bottom navigation bar right next to this app bar but next to this body let's go over bottom navigation bar so we want to First create elevated button on press is currently null as a child we want to use the text you will display the checkout and the total price display the dollar we have to add back slash then let's say this is the price that we want to display let's save it so at the bottom you can see we have bottom value but when we are going to let's say add more values maybe 10 values to this cart let's save this it's not scrollable the reason is that we are using two scroll views the one is single child and other one is list view because we have nothing inside the body so we can move this widget as well let's save it and this time you can see our list is now scrollable but at the bottom you see the bottom card is or the bottom checkout button is still there we want to make it wrap with the feding with the default space pedding let's save this and you can see our checkout button is now at the top so our design is scrollable working very fine and also let's turn it to the dark mode and you can see our design is looking very nice these button are clickable so that's it for today's tutorial in the next tutorial we will head towards the next checkout screen and we'll add all the details related to the cart and the checkout we will also handle addresses over there and also handle payment methods or the type of payment methods and based on that we will redirect the user to pay so that's it for today's tutorial I hope you learn something new 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 tutorials once again you can download the code link is in the description thank you for watching take care Allah

Channel: Coding With T

Views: 5,053

Keywords: flutter cart screen, flutter shopping cart, flutter shopping cart with getx, flutter shopping cart ui, flutter shopping app ui, add to cart screen in flutter, shopping cart flutter, add to cart flutter ui, add to cart in flutter, flutter add to cart, flutter add to cart example, flutter add to cart button, flutter cart, flutter cart app, ecommerce app ui design, ecommerce app ui flutter, flutter ecommerce app shopping cart, cart in flutter, cart flutter, coding with t

Id: ZVcAa2uuksk

Length: 17min 34sec (1054 seconds)

Published: Mon Nov 06 2023