Effortless Flutter Cart Management | Flutter eCommerce App 2024

asalam alikum welcome back to coding M today we are going to learn how to handle card items how we are going to add single or variable products in the card so first of all let's quickly have a look what we are going to achieve okay so our application is running and at the top you can see first of all we have two elements in the card and if I am going to open this we have two elements we can add items in the card and you can see also a single price of this product is being updating and also at the bottom with the check out price is being updating when I'm going to update any of the prices I can add items to the card I can also remove items but when we going to remove completely when the quantity goes to the zero it is going to show a popup that if you want to permanently remove this from the card and if I'm going to click on okay you can see popup and item has been removed same we can update all these values and when I'm going to click on this checkout you can see only subtotal is 30 with the one product has been redirected to the checkout page so let's head back and down below at the top you can also see we have only one price or the one item in the card and down below the one product which is currently in the card can be displayed over here so basically we have two type of products so let's go with the first one or let's open the one currently we don't have anything over here which is zero because this product does not contain any variations so by this way we can directly add items in the card and when it reaches to zero you can see add to bag is now disabled we cannot select it but when I'm going to add let's say two items click on add to bag you can see product has been added in the card so let's head back and also when I'm going to press the back button you can see without refreshing we have two elements in the card and also at the top you can see we have three items if you open it we have two items the one already added same way the count has been updated and when I'm going to deal with the variations I cannot directly add Variations by clicking on this process icon but as this is a single icon and I'm going to click on this plus you can see it's added in the card and also at the top we have four elements in the cart now but when I'm going to press on this variations button it is going to open the variation page so that I can select the variations without selecting variation let's say I'm going to add some of the items and click on add to back you can say it saying select variation now let's select any of the variation and you can see automatically it has reached to the zero value because we're going to set the current number of values over here or the current number of quantity we have in the cart of this selected variation so let's change the variation to see if we have any other elements currently in the card because we don't have any elements in the card we can also see because this one is out of stock so let's try to add this and it's saying that this item is out of stock now let's try to add the one with a discounted price which is 1 122 green 34 let's add one element click on add to bag you can see item has been added in the card and also let me add one more we do not have any sale on it so let's say I'm going to add two green 32 size two products of this variation which is in stock so let's click on add to bag and you can see it's added now we can head back and in here you can see we have total seven elements in the cart and when we reach towards the bottom the main card which has variation it is showing total variations or total number of products currently in the card test total three variations currently in the card so let's open the card and you can see we have two products both are green both are containing the same image size is 34 and color is green this one is 32 and color is green 32 has two elements and 34 has one element with a discounted price over here and also it has the product price of two products and now when I'm going to click on check out you can see we have all the total with the shipping fee and all the details so this is what we are going to create today's tutorial is going to be very inform formative so make sure to watch till end we are creating flutter e-commerce application and we have already completed all the previous sections in the section one we learn how to set up new flutter project design themes Etc in the section two we learn how to create login design then in section three we design the complete e-commerce application and in section four we learn how to deal with the Firebase authentication to secure our app and now in the section five which is the second last video of this section and after this section we are going to move towards we are going to add payment gateways manage orders and maybe we going to create this application to be used as a multivendor and also we are going to upod or create complete admin panel for this application to handle all the orders manage users and all the other stuff so make sure to stay tuned and let's get started with today's tutorial so I open the project and if we head towards the storage utility this is the main class that we created previously because we have to make sure that all the data that we are going to store should be stored in the user specific cart so this is what we created in the previous wish list tutorial in which we learn how to add items in the wish list in the local storage and we using get storage over here go to pspec and in here make sure to add the latest dependency of get storage once done using this way we modified the storage utility so that it can handle a bucket name because we want to create different buckets for each logged in user so that whenever a new user has been logged in we can create a new bucket for that user so if we open this function inside the authentication repository because this is the one triggered every time whenever the application open or the user tries to login so whenever this is going to run it is going to trigger this T local storage. init method and in the init method we are passing the user uid based on this uid user has been logged in from Firebase because it's always unique so that's why by using that ID we we are going to create a unique bucket name for for each user once this is set up let's go to shop and in the models the first and foremost thing we're going to create is the cart item model because based on this model we are going to store the cart items this model is going to handle two type of products or any type of product that is going to be added in the cart either it is a single type of product or a variable type of product which has different variations every variation is going to be treated as a separate cart item and we going to get that product then the title of that product then we have a price of the product if we are going to select the variation and it is going to get the variation price A variation on sale then it is going to get the sale price of the product or the variation sale price and then we have the image either the variation image or the main product image then we have a quantity then we have variation ID and a brand name brand name is just to display because in the design we have to display the brand name so we're going to get the brand name over here and then definitely a selected variation you can see this question mark this means that this selected variation is null and the variation ID which is not null but by default it is also not required it will always remain empty if we are not going to pass this down below we have a helper method which is empty method and after that we have a 2 Json method because when we are going to store data inside our local storage we have to convert each item into Json and we will store that Json into the local storage and same way when we going to get that from the Json we're going to convert everything we have stored in the Json and paste it back to this cart item model so that we can use it inside our application so once this model is created let's open the cart controller which is the main class inside the controllers inside the products I have created a card controller so this is the controller which is going to handle all the back end that we have just seen it going to handle all the actions add items in the card remove items from the card handle variation single type of product variable type of product total number of cart items okay first of all we are before going to go to the design I'm going to create this card controller so I've created few variables over here so the first variable is number of cart items this is going to contain the total number of cart items currently we have and this help us to be used inside AB bars where we are displaying the total card items number then we have total card price this will be when we are going to update add or remove items from the card and next to the check out button we are going to display the total card price then we have the product quantity in the card which is an integer this means that we going to deal with this a unique product let's say we are going to open a single type of product then all the quantity which has been added or removed will be added inside this variable after that we have all the cart items inside a list of cart item model the model model that we just created list means that we will have multiple cart items and at the end we have a variation controller if you're following the previous tutorials you know that we have already created variation controller using this variation controller. instance we're going to find the already created variation and inside that we have a selected variation we are going to be use the selected variation inside the card controller if you're new you can watch the previous videos link is in the description you can also download the complete code so first of all the function that we are going to create is to add items in the cart I created a function add to cart and inside this we are going to pass the Complete product and using this variation controller we we are going to check that if variation is selected or not and using this product quantity we are going to check that how much quantity has been added in the card so first of all we going to check this quantity we are going to check if product quantity in the card do value is less less than one this mean that we are going to display a popup and return from here because quantity is not selected or the quantity is zero or less after this we are going to check that if variation is selected or not using the variation controller dot selected variation. value. id. asmt if the selected variation ID is empty this mean that current variation is not selected but also we can check one more thing if the product that we just receive over here the product we receive is either a single product or a variable product so if product dot product type is equal equal to product type dot variable make it do two string this means that if the product type that we just receive over here is a variable product if it is a variable product then it should have a variation which is selected variation then using the variation control we're going to check that if selected variation is empty this means that the current product is a variable product but we do not have any variation selected again we are going to display post message and we going to return from here next check out of stock status in this case we going to check the stock status for both either it's a variable product or a single product if the product type is variable then we need to check the variation controller do selected variation do stock is less than one this means that if the stock is less than one the selected variation has out of stock so this mean that we are going to display that selected variation is out of stock you cannot add this and in the else if the product is a single product then simply the product we receive at the top do stock is less than one we going to display that selected product is out of stock and we are going to return from here if this is not the case we handled all the possible errors or the bugs or the loops now in here we are ready to add item to the cart so first of all we have to modify this product or convert this product data to cart item model the one we have created over here so we have to map the product data on top of this one so that we can later on add this item into the local storage to do that I'm going to create a new function so this function name is convert to clart item and is going to return the card item model and going to receive the product itself and also the quantity of the product so first scenario is if we have to check that if the product is currently a single product then we are going to extract all the data from the main product not from the variations and if it is a variable product then we going to get the selected variation data so if you open your fire store you can see inside the products we have all the data over here the prices over here image of the product brand of the product then the product type title thumbnail stock status this data is for the single product but because this product has also variations then in this case whenever any of this variation is going to be selected we have to fetch the description ID image price sale price and stock status of that selected variation okay so inside this we going to again check that if the product we receive over here is a single product then we do not need any type of variation so simply we're going to call the variation controller do reset selected attributes this is the function that we created in the variation controller it is going to Simply clear everything related to the variations because the current attribute is not related to the variations and we just making sure that all the variation data is empty after this using variation controller we're going to get the selected variation do value and we're going to check that if variation do selected variation. value. ID then we're going to check that if current variation is empty or not so simply calling variation. id. is empty we will get is variation means that A variation is empty or not then we going to call the price to get the price we are going to use is variation if this is the variation then we are going to need to get data from the selected variation so using the variation the selected variation we have over here which is not empty in this case simply call variation do salale price so first of all we going to check that if the selected variation or simple product has a sale price then we're going to get the sale price otherwise we're going to get the actual price a question mark So if this is the case we're going to return the variation Dot sale price and else if it is not the case we going to return variation do simple price so far we covered that if it is a variation and if it is not a variation because if this variation is empty then we are going to Simply call the product dot again check the sale price if the product is on sale greater than 0.0 we are going to return product do sale price control all to align the code and again first of all if variation is not empty we're going to check that if iation has a sale we're going to return the sale price else the actual price if there is no variation we're going to get the product price by checking if it is a sale price return the product sale price else the main product price by this way we have the price over here so once we have the price we can return Now card item model which requires a product ID so we have a product at the top which contains its ID and the quantity is also being passed next we want to add other items not to add other items in the card just assign the price that we received quantity already assigned title from the product product or title then we have a variation ID so this is the variation ID it will be empty variation because if the variation is empty it is going to assign the empty string then we have the image again we're going to check if it is a variation then we're going to display the variation image if it is not we're going to display the main thumbnail image of the product same for the brand if the brand is not null we're going to display the brand name else it will be empty and selected variation again we're going to check if his variation is not empty if it is a variation then we're going to get all the product attributes so that we can display the selected variation values otherwise we're going to return null by this way this function is going to return us the cart item model by checking if it is a single product or a variable product so once created back to the function in which we are going to call this function pass the product and pass the product quantity in cart by this way we're going to receive the selected card item now in here we're going to check that if the product that we are going to add is already added in the card or it is a new one so by curing all the list of the card items which is over here it will contain all the cards currently inside the cart do index where we're going to Loop through all the cart items by curing a single cart item we're going to check that if the current card item. product ID is equal to the selected card item. product ID and also the cart item do variation ID is equal to selected cart item do variation ID if it is empty it will also be empty so after this we will be able to extract index if we have found anything or not and simply using IF index is greater or equal to zero this means that this quantity has already been added in the card or it is being updated or remove from the cart design so we just have to call again the cart items at current index because we want to update the current index quantity so what quantity we want to pass the quantity we have received from the selected cart item. quantity and if this is not the case to create a new item in the cart we just have to call cart item. add and we're going to pass the current selected cart item that we have received over here and by this way we are going to update the cart items list now the last thing is to update the cart itself or you can call it update the local card of specific user and after updating whenever this function is going to be completed we going to trigger a message or a custom tool that your product has been added in the cart Now to create a function update card function update cart values so I've created a function which is going to deal with two things the first one is to update card totals if you head towards the top you can see we have number of cart items and also total cart price so these are the total that we have to calculate and also at the end we have to store current cart items list or updated current cart item list into the card and after that we're going to refresh so that our design can be redraw now the first function which is going to update the total cards which has a simple calculated total price which is zero and calculated number of items which is also zero using for Loop I'm going to Loop through all the card items that we have just updated either added or remove so using the total card items I'm going to Loop through all the items and going to add one by one into these two variables so get the item price and multiply with the item quantity. twouble is going to get us the total price currently inside the cart items and by adding all the item do quantity 1 by one into the calculated number of items will lead us or give us the total number of items currently in the card and once we have these two variables we can easily assign to the VAR aable we have created at the top with the do OBS so whenever there is change inside these dot OBS variables they are going to be redrawn in the design that we're going to cover in few minutes okay once all the values have been updated now time to call this save items function so it is a simple function save cart items by simply calling all the cart items. map which is going to Loop all one by one and individual by calling individual item we are just going to convert if you remember the two Json function I told that we're going to convert each start item into to two Json so we are doing right over here and once all the items has been converted to adjacent list we are returning this list over here and by calling local storage. instance using right data function we're going to pass the key as cart items you can also create Keys like this but make sure that whenever you are going to create the keys these Keys should be same because using this key we going to able to fetch data stored in so this is the key and this is the value that we going to store again and again whenever there is add to card remove to card or there is any other update or when we are going to launch the application first time so this key is going to return us all the data of the card that we have stored over here now once all the process of adding elements to the card has been completed this mean that now we can create a load cart items or to fetch all the cart items it will again be a simple function name it load cart items and using again local storage. instance we're going to read this data if you open this you can see it is going to call the storage. read and previously it was storage. write pass the key and value any type of value and same way to read the data we going to pass the key over here to this storage. read function it is going to read the data and return the generic type which is a type T that we going to Define and we Define the type of T which is list of dynamic so now the return type is a list of dynamic so this is how we deal with the T so whenever we're going to assign the T over here it will use the T as the return type so we're going to receive the list of Dynamics which will be the list of Json so we have to reconvert those Jason and map them onto the part item so that we can use it so once we have all the the list we're going to check if it is not null so by calling the cart items do assign all by this way we're going to assign all the cart items so because we have currently Json strings or the Json list we have to convert that Json so Loop through all the Json do map by getting a single Json we going to again call cart item. fromjson model which is going to receive as a string of type a map of type string and dynamic from Json this function is going to extract all the data and map it into the cart item model and return it from here and once it is done it is going to be assigned all the data to this cart items again and after that we're going to update the total card so that make sure that all the values should be up to date whenever user open the app or add something or remove something the next function is we're going to create which is going to return us the product quantities of the current selected product so this is to get the product quantity in cart so we're going to to pass the product ID it is going to Loop through all the cart items and check that if this product ID exist or not if this is the product ID using the fold property we will be able to add the values so this zero means the initial value after that we have two values over here previous value the previous added value and again the element which is the current value so using previous Value Plus element do quantity it will be zero because it will be initial value it will be zero plus the quantity so by this way let's say if this product ID has been added two times three times or multiple times and this going to add up all the quantities and will return us the found item or the product quantity that we are looking for and same way I'm going to create a function for the variation quantity in the cart so this is going to get the variation quantity in cart it going to receive the product ID plus the variation ID same way but just we are going to add Loop through all all the cart items do first whereare we're going to get the item. product ID over here and it should also find a variation ID with the ID we pass or else it should return an empty card item model and by this way we're going to found or return the total quantity phone item do quantity will be returned from this variation last but not least we're going to clear the card we have all the product quantities in the card will lead to zero all the card items should be clear and call the update card so this update cart is again going to remove items from the cart and also update the total prices we have already created over here now once these functions are created we have to use this card controller to assign all these functions or call all these functions and using these variables we're going to redraw our design because it is inside the home screen so if we open the screens go to the home and down below we have the T product vertical card inside this vertical card of the product design scroll to the bottom and you can see we have add to card button created over here which is being repeating again and again okay now in order to design this if you open the home RO Dot from here and if you open the device you can see that we have at the top card total values being displaying over here so this is the first time whenever the card controller instance will be created well this is the home screen we going to display this home screen for the first time and inside this home screen we going to display the total card which is number as seven and then later on inside this vertical design we're going to display again the individual product total numbers in the card so first of all we going to add or create a new instance of the card controller right over here so open the home do go to the app home bar and inside you can see we have t card counter icon because this on press is going to lead us to the card screen so so let's open the function remove this on press it does not needed first of all inside this build method we going to create the card controller new instance so whenever this card controller instance will be created we missed one thing we have to create card controller Constructor and whenever this Constructor will be created we going to all the load card items so that we can load all the card items whenever this card controller will be called currently it is going to be called inside the cart menu icon so whenever this is going to be called it is going to extract or load all the C C items and using this controller we're going to display the card items and currently you can see we have only two card coded written over here using controller. numberof cart items. val. two string because we want to update these values and you can see the number of cart items is do OBS type this means that whenever there is change inside this variable Whenever there is any item added or removed from C this variable is going to be updated and whenever there is change we want to update the design and we're going to to use the OBX widget which will keep observing the dot OBS variable which is this one and whenever there is change it is going to automatically redraw or call the set state for us okay that's it that's done let me run the application meanwhile the application is running inside the home do do we going to go towards the product card vertical and down below you can see we have add to card button so this is what we are going to use so first of all I'm going to make it as a separate function Ive removed and replaced with the custom card so I just passed the product to the custom widget and inside this widget I have created the product and inside the Constructor we receive that product over here and I just wrap this container with the gesture detector so that on press will be called you can also call inil for the animations now inside this on Tab you can see I have written that if the products have variations then show the product details because whenever there's a variation and user is going to click on that product card we don't want want to display the product card if you see the product over here so if this is a variation whenever user is going to click on this we want to open the product details and if because this don't do not have any variations and whenever user is going to click on this one it should add this element into the cart you can also modify these as per your own requirements inside this if first of all we're going to check that if the product type is a single product type this means that this element can be added into the card so the first thing we are going to call is we have to convert the element into the cart item because currently we have a product over here we have to convert that into cart the reason is that we have to create one more function that we missed which is ADD single item to the card and also remove single item from the cart so these are the functions that we are going to use right over here and also if we open the cart we going to call these functions inside this plus and minus so only one item will be added into the cart and also one item will be removed from the card create these functions open the card controller right after this add item to the card function I'm going to create these two functions over here the first function is add one add one item or add one to card and remove one from cart we have to pass the cart item model using cart items. index where we're going to first find that if this item is already added into the card then simply we're going to add quantity as plus one and if it is new one we going to add add that item into the cart so using cart item. product ID item. product ID and cart item. variation if this is equal if we found something in the index this means that if the index is greater than zero or equal to zero we have cart items into the index do quantity plus is equal to 1 will be added plus into the already added quantity and if it is not the case we're going to add simple cart items and the item will be added because it has its own quantity in it and after that we're going to again call the update card we going to update all the pricing and also going to store the data inside the local storage and then we're going to create a function which is going to remove one from cart again going to receive the item check that if it is already into the cart or not if it is we're going to use the cart items. index. quantity greater than Z if this is the case if it is greater than zero we're going to Simply remove one from it right and if it is not the case let's say if it is at the end or if it is the last one and again user is going to press the remove sign just for the correction we going to display a dialogue over here if cart items. index. quantity is equal is equal to 1 this means that it is the last one I want to display a dialogue else simply I'm going to remove the cart items at current index and then again we're going to update all the cart values and also to display the popup I've created a function and we going to pass the current IND index to it and you're going to use the get. default dialogue with a title middle text and on confirm this button will be triggered using startart items do remove at again this one will be triggered and remove the index from the current item and again we going to update art value display a message that your C item has been removed get back is going to close this dialogue and on cancel is again going to close the dialog again head back to the widget so first of all we are going to convert the model into the cart or call the convert item to cart item pass the product pass the quantity it is going to return us the cart item model so once we have the cart item we're going to all the add one to cart item over here so it is going to do all the rest of the work for us now we want to change the values inside this container Whenever there is some values stored you can see over here if I'm going to head back over here you can see currently we are displaying text value which is 3 212 and if I'm going to open this and let's say we're going to remove these values cck okay it has been removed head back over here and this time you can see we have seeing a plus icon without a text and also we have a different color over here so for this to occur first of all again we have to wrap this with the OBX widget that is going to redraw the design for us because we are going to call a function so I'm going to make it like this in the square brackets now inside this function we're definitely going to return the widget that is that is going to be redrawn also inside this function the first thing we're going to call the cart controller. get product quantity in cart we are going to pass the product ID and this is going to return us the number of items in the card for each product so using this value I'm going to change the color over here if cart item quantity is greater than zero I want to display the primary color else I want to display the dark color remove this constant next inside this Center current we're displaying only the icon over here but using this product quantity in the cart if it is zero then we are going to display this icon and if it is not zero we're going to display the text message with the total card values remove the constant control alt l so inside this child widget we are going to first check that if product quantity in the cart is greater than zero we're going to return the text else we're going to return the icon and in the text we're going to display this quantity do two string and that's it our application is running but you can see error over here which is the variation controller not found also over here the reason is because if you open this you can see variation controller not found you need to call get.put or get. lput this means that inside the card controller we're calling the variation controller do instance which is going to call the get. find which is trying to find the already created instance of the variation controller but it fails to find the previously created variation controller instance so there are two ways the first way is because we are already using the general bindings or the bindings over here and and use the network manager inside the bindings using get.put you can or get. lazy put you can call the variation controller and import it over here so whenever your application will be run for the first time it is going to create the instance for the variation controller because we need to use variations throughout our application so that's why I'm going to display it or declare it variation controller over here you can also declare the card controller or other controllers inside the general bindings and inside the men dot in the run app method you have to just declare the initial bindings as general bindings so these bindings will automatically be created when your application launch for the first time okay so let's rerun and you can see now all the errors gone if I'm going to scroll this a bit down over here and also you can see there is no error currently we have a plus signs over here so when I'm going to click on this plus button you can see it turns to the one this means the one item has been added in the car and screen has been withdrawn so let's see at the top also you can see we have a one return over here this means that currently this total cart items and also the one over here is being working I'm going to click on this variation it is not redirecting us to the product detail screen and the reason is that we missed this L section If the product is a type of single we are adding the product to the card and else we want to open the product detail screen now save it on the code click on this plus icon and you can see we open the product detail screen now before going to add all these variations into the cart first of all let's open this cart and let's make it Dynamic and also this checkout feature so let's go to Features shop ring and open the card do do currently we have the T card items and in the bottom navigation we have a fixed checkout button elevated button with a standard fixed values first of all inside this build method we going to use the card controller okay I've created a card controller instance because already we have created the instance so we just have to find that instance of this card controller now once we have that card controller next to this app bar as a body the first thing we have to wrap this with the widget with the OBX widget because we have to redraw the design Whenever there is change inside this part items let's make it a function and using a return statement we're going to return the heading and list of card items so at the top the first thing I'm going to do is I'm going to check that if card items are empty I want to display an empty animation widget so I've created an empty animation widget which is going to receive the text Animation Show action as true action title and on press will lead towards the home screen again so this is the animation widget that we created while designing the design part of Section 3 so using this widget I'm going to check what I have to display okay inside this return method call controller do cart items do value do is empty add a question we cannot even use the value it's fine so if it is empty I want to return the empty widget else I want to return the main wiget that we have some values over here so if it is empty it is going to return the empty widget that I have created at the top else it is going to display the main widget because this can be scrollable so also make sure to wrap this pedding you can also replace this with a conditional FS like this one to make it simple now also we have to wrap this pedding with a single child scroll view to make it scrollable now if you open the cart items instead of passing all the cart items from here you can simply again call the card controller. instance because this is how we use the gex we have list view do separated and we also have a static item count first of all let's wrap this list view with a widget which is going to be redrawn make it OBX item count will be used from the card controller do card items. length now inside this children inside this column item Builder which is currently creating the one card item and also show add remove buttons If you open this you can see the previous OBX was on this list if it is empty or not if a new item has been added in the list it will add another one over here but the one I'm going to create or the one over here which is item Builder if you can see this the item Builder which is column so this column is going to create the cart item which is this one image title brand name and color and size after that we have show and add remove buttons which is going to add some space and then again using this if we're going to display a row which is going to display all the buttons over here so whenever these buttons are going to be clicked I want to update these two values as well so that's why again we have to wrap this column with a widget which is OBX add a semicolon at the end of the column and add early bracket I forget to add a function statement over here okay inside this Builder we're going to use the card controller. cart items at current index will return us the single cart item this item is going to be used inside this cart item over here so first of all we have to call this or get this cart item make it required in the Constructor because it has been called from here so inside this cart item we're going to the cart item we have just created so remove this constant now we're going to use this Dynamic cart item and replace all the static values the first thing we need to changes this static image cart item. image if it is null we're going to display the empty string inside this image URL after that update the title and subtitle the first one will be the brand name and second one will be the title and after that you can see we are displaying static color green and size as a 34 now you have to make a dynamic so let me remove this from here and also all these children values will be dynamic so the first thing I'm going to call is the cart item do selected variation if it is null we are going to make it empty variation and on top of this selected variation we are going to call the Ines this is going to Loop through all the number of selected variations do call the map property now inside this map we know that we can use the text pan to display one single entity if it is a key or value pair as a children of the text pan we're going to again use two text pans first one for the key and second one for the value control all to align and also at the end where the map ends make sure to add do two list otherwise you will be able to see the errors so what this is doing it is going to cury through all the selected variations and on all of these entries is going to call the map property and we are going to return the text pan so the first value will be key value with a different theme and the second one value will be using e do value which will be the property in this case it will be the body large okay once this one is assigned next we have the product Quant add and remove buttons If you open this you can see inside this product quantity with ADD remove buttons it has two buttons the first one is the minus button which is going to remove this and we have a text which is going to display the quantity and then again we have add icon or the plus icon which is going to add elements into the card now inside this we are going to receive three things first one will be the quantity then we have two buttons add and remove button and also make them required quantity will be required add remove will not be required because are notable let's assign the quantity to this one do two string and icon will be and inside the T circular icon using the on press we going to pass the add method remove this constant and same way to the above circular icon we are going to use the on press property and we're going to pass the remove button that we just created add remove is over here and also the quantity is over here we can head back to the function with the cart items we can pass the quantity using item do quantity call the add method remove this constant control R tell to align quantity is item. quantity and add is going to be called as card controller do add one to card pass the item and also for the remove remove one from card and pass the item and to remove this static value just remove this also remove this constant and using item do price with the multiply item do quantity and to add decimals after the DOT sign you have to reduce or remove them using Dot two string as fixed with the zero and one or as many as you want okay if we head back to the cart we are done with the cart items we assign the cart items handle plus and minus signs and now at the end we going to deal with this checkout we have to remove this static value control or tell inside the child remove the constant from this elevator button or the text button add the check out and inside the first dollar will be printed and the rest will be controller do total card price. value and because it is going to be redrawn again we have to wrap this text with the OBX widget make it a function that's it now let's save the code again and you can see the image has been appeared only one item in the cart image is not being appeared because if we head toward this cart items inside the T cart item this is the rounded image and because now the image are coming from the network so make sure his Network image is true now let's save it again and you can see the image has been loaded now let's click on the plus icon you can see the values has been updated and also the checkout value is also updated now let's click it one more time let's try to remove this when I'm going to remove this and you can see the popup has been displayed click on cancel it's right over there remove it again click on okay all the product has been removed we have the checkout as zero so we have the empty card over here if you want to hide this cart and also the checkout you can also do this go to the cart and add the statement if controller. card items do is empty add it for the bottom navigation add it right over here so if I'm going to do it like this so we cannot use the if statement so if it is empty I want to display let's say a size box like this one control all L to align add a constant bring it back let's save it and you can see the bottom button has gone let's click on this button and you can see we are redirected to the home screen let's click it two times let's try to add this one as well at the top you can see we have four items in the card we have four items over here checkout has been updated all the values are working now when you open this we have to handle the plus and minus signs from this cart over here know to handle these variations also the variations of if you open the variable product which has a variations now to handle these values as well we're going to deal with them so let's go to product details open the product details and at the top you can see we have the bottom app bar or the bottom navigation bar which is T bottom add to cart so the first and foremost we have to pass the product we have just received remove this constant now head towards this bottom and we have to receive the product over here okay now inside this build method we have to create the controller instance the card controller okay I've Creed the controller instance over here and if you reach towards a row which is having the first one which is a minus icon then again the quantity and also we have a plus icon now inside we have the on press method of this circular icon and using controller do product quantity in card do value if this value is less than one we are not going to do anything because we are not allowing the user to go below the one so let me also show you these buttons If you see these buttons so this is the minus sign if user is going to press it said two times I don't want the user to go into the minus Direction so that's why if the value is one or lower than one which is zero then we're not going to allow the user to do anything so we'll use the null value and in the else case we're simply calling the controller do product quantity do value will be minus is equal to 1 means that reduce one from the total card controller so theor is that we forget to create a function same for the second one which is going to add all on press and remove this constant and using controller do product quantity in the card do value will be plus is equal to 1 going to add one into the total value remove the static text with the controller do product quantity in card do value and make it do to string now to always get the product quantity in card for the product that we are going to open in the product details let's say I'm going to open the product which is this one and we're going to select the price like this it should update these values and also let's say I'm going to open this again this should have updated values for the latest product that is just opened so inside the card controller the last function that we are going to create which is to update already added product count so we'll pass the product and check that product type is single we simply going to call the product quantity in cart that we are using to display and using get product quantity in cart method that we already created over here plus the product ID and it is going to return us the product value that we going to assign to the product quantity in card and if it is a variable product we're going to call the variation controller do selected variation we will get the variation ID and if variation ID is not empty this means that we have already selected variation and we want to display the variation total for that case we are again going to call the get variation quantity in card pass the product ID pass the the variation ID and result will be again stored into the product quantity and card that we are displaying in the design and if no variation is already added or the no variation is selected we want to display zero so let's head back over here into the bottom card widget we just have to update the values so controller do update already added product card and pass the product now this is going to automatically update all the values and assign the latest value to this product quantity so once we have the latest value in the product quantity we can deal with the rest of things and also to make sure that our design should be updated we have to wrap the widget with the OBX inside this elevated button whenever the add to card button will be triggered I want to call the controllers again product quantity do value is less than one then we don't want the user to do anything if the product quantity has something in it then we want to call the controller do add to card so this add to card will receive the product and add the elements accordingly so now save the code let's open the function currently it's displaying two I'm not sure that if it is the value currently it has yes it's two in the card let's open this one and you can see it has one item in the card we can change these values yes we can do let's update this card you can see the product has been updated or added in the card let's head back and now previously it was one and now it's three and also at the top you can see we have count of ated so this one that we just changed to three has been updated and also the price has been updated let's go back click on this variation now let's select the green 32 the variation is now selected let's add two items of this variation but the add to card is still not active what could be the reason okay I got it the reason is because we we have wrapped the OBX with this row but not with the complete row where we have the add to card so this button is not being updated so let's wrap this with the OBX widget let's remove this also now we don't need this OBX over here control all to align refresh the code open our emulator again now let's try to add you can see the button has been enabled now let's add two items click on add to card and product has been added which is green 32 let's go and see this you can see we have two items in the card and when I'm going to open this you can see we have green 32 with the two items in the card let's reduce it to one let's head back one is over here let's open this and you can see green 32 is one and I'm going to update this it still has one not sure why it's not being updating okay we need to modify one more thing because you can see the values are not being changed because whenever this attribute selection method is triggered we are not updating this value we're not calling the function which is updating this value right so we have to go to the variation controller which is selecting or updating these variations in that we have to call this update the method which is updating these values so let's go to shop controllers in the product go to variation controller inside this on attribute selected method will be triggered every time whenever the attribute will be selected so whenever this show selected variation image has been triggered and we receive the updated variation or the selected variation we want to check over here that if selected variation. ID is not empty means that something has been selected then we call the card controller using card instance you can also directly call this card controller. instance over here and in the card controller do product quantity in card variable we want to update this variable by calling the get variation quantity in card and this is going to update the iation quantities as we wanted so let's save it open the app and when I'm going to toggle this you can see button is also disabled the value is turned to zero this is also to zero and I'm going to enable this again now it is by default one so this means now it is working let's add this into card let's go back to here one was already added and one is over here so this is what and this is how you create cards specific related to the users I hope you learn something new if you learn something new please like the video and also you can download the complete code link is in the description and also if you want to watch the previous tutorials you can watch them from the playlist link is in the description or from the right top corner thank you for watching take care Allah

Channel: Coding With T

Views: 5,414

Keywords: flutter cart, flutter cart app, cart flutter, flutter cart screen, flutter cart getx, add to cart flutter getx, add to cart flutter, flutter add to cart, flutter add to cart example, flutter ecommerce app, flutter ecommerce app with firebase, flutter ecommerce app 2024, flutter full course 2024, flutter tutorial 2024, ecommerce app flutter, ecommerce app flutter firebase, ecommerce app flutter getx firebase, flutter 2024, coding with t

Id: 0alqDixSK-8

Length: 52min 43sec (3163 seconds)

Published: Sat Jan 13 2024