FlutterFire - Full eCommerce App - Section 3 - Cart Screen State Management

in this section we will mostly focus on the card that we have and to get started with card first of all let's go to our models and providers folder and let us make a new file call it card.dart card.art and inside of it firstly let us import material.dart and make a class cart and give it some properties so final string let's give it card id make a final string title final string image url final double quantity no final double price and final int quantity so with that let's make a constructor out of it so there's the constructor that we have and i'd like to make it a named constructor so we need to wrap it with this third bracket and put required in front of it so r e q u i r e d space and put it everywhere great now if i leave this class the way it is firstly we do not need this import but i want to keep this import because i want to go the older route is by using or mixing it with the change notifier now this is all good for the card class we also need a card provider so class card provider with change notifier and here first of all let us expect a map a map that has string key and a card value and call it card list i'll keep an empty map here because it starts with the map or we can name it cart map i'll just go with card list better all right now we need another map of string key and card value which will be our getters to get card list and this is going to return us our card list all right now let's go to our card screen that we have so card screen here and for the card screen we can get rid of this product list that we have so let's just get rid of this we do not need this anymore let's get rid of this now you see we have an error here now to get rid of this error let us firstly go to main.dart and inside main.dart firstly we need to tell this provider that we have a new provider so paste it here and this should be our card provider so card provider it is now we can go to our card screen and inside of our card screen let's make a new variable final card provider equals to provider dot off card provider context so card provider context now what we can do is we can write here card provider dot cart list is empty then show me the scaffold if it is not empty show me the other thing and also since we are here let us see what's wrong great let's check out the cart since it is empty so this is what we are getting we can also do something put is not empty so if it is not empty we are going to see this thing now while we are talking about this cart and cart provider let's also make a method to get all the total for it and you will see why we resorted for map instead of using list like we did for products let's make a new method here and this is going to return us a double double get total amount here i need a variable which i can let let double total and then what we could do is come down here and make a logic so car list why is it cardless it should have been cardless so cartlist.4h and within 4h we're going to have a var total dota l equals to 0.0 and what we are going to do is total plus equals to should be value dot quantity multiplied by value dot price so with that now we can come after this and return our total what's the problem here i bet this thing should be here or isn't it alright so the thing is we do not have to initiate it here you know what let us just rewrite it again so we need a getter of double type so double get total amount and here let's make a var total equals to 0.0 just name it double total then we can access our cart list dot 4h so for each item that is inside the cart list and we are going to do what we are going to put all the values in the total amount so total plus equals to value dot quantity multiplied by value dot price after that let's go after this thing and return the total that we get so return total so this is the logic for getting the entire total and now we can use it later in some part of this lecture now with the cart provider and card class being set up let us work on a method for adding products to the cart so inside of our cart provider where this getter ends let's get after this and let's make a new method so void add to cart now for this method here we need to expect a few items so string cid cid stands for cart id string title string image url int quantity i'll just leave the quantity because we will get the quantity letter and double price now why do do we have so many of these items and why haven't i used the quantity inside of it inside of this method here we will be having two different logic first one is to update if we already have the same product so we will just update the quantity and leave everything as it is and if we do not have a match for the same product inside the cart we are going to put it as a new instance so let's write our cart list dot if the card list dot contains our c id so if already has the c id i want to do a card list dot update so this key should be the same as cid and the value should be existing card item value and here we just want to pass a cart so for the cid it will be our value.cid and let's just put a com after this our title will be valued.title image url should be our value dot image url price should be our value.price so all of these are existing items and quantity should be valued at quantity plus one so plus one but if this is not the case so else i want to do a card list dot put if absent put f if absent is going to take another cid and here i want to pass another card item so this time the card id should be date time dot now dot to string dot to string i'm going to set the to iso 8601 string title should be title image url as your image url prices price and quantity will be one so save it so with that that this were the two logics that we have one for putting if we do not have and one for updating if we already have now with that let us get after this bracket and use notify listener because we need to notify everyone who is listening for these changes let us use this add to cart now we are going to be using this primary for the product ddl screen if i go to feeds and then open up a product this is the button that should have access to this method here this add to cart now to work with it let us go to our card screen first of all and i'll change this to be is empty because that's our main logic now we need the item in the product details screen so i'll just copy this much from our card screen final card product and that is accessing our card provider so copy it go to our product details screen and paste it here we need to import the card provider so that's all good and done now our add to cart is in our bottom sheet for bottom sheet you cannot just pass everything from here to here that is another status widget so we need to go to this bottom sheet and ask for some dependency so final string product id final product product final card provider card provider now with that let us go to its constructor and password required this dot card provider this dot product desktop product id now with that we can go up here and pass everything that is required so for card provider we're going to be passing this card provider card provider for product we're going to be passing product like we have here and for the product id let us pass the product id so with that let us go back to our bottom sheet again and here we can access our card provider dot add to cart and for the c id card id or the it should have been the product id actually i'm going to be passing the product id one thing since we have it here at cid here i'll go to the cart and this here should be our pid instead of cid so i'm just going to copy it and paste it here here and here much better so let us pass the product id and the title should be product.title but before i do so let's put a comma here and here we'll be passing product dot title so just copy it paste it here paste it here great so now we can add to cart so i've pressed it once and let us just go to our card screen let's see what happens so now we need to go to our full cart and we need access to this image name and everything so write a final string pid final string id so ids for the cart final string title final string image url we are in the full card screen be sure final end quantity and final double price so with that put a comma here and afterwards let's write required this dot id dot image url this dot pid this dot price this dot quantity this dot title so now we can use it here so instead of this widget here let's pass widget dot image url and let's get off this const let us write here widget dot title pass here widget dot price and here widget dot quantity dot to string all right so with that let us go back to this card screen where we need to pass all of those and firstly for the card screen let's change this item count because we have 10 fixed item here it should be our card provider card provider dot cart list dot length so save it we cannot save it because we have to pass a few more things so let's pass the pid and pid should be card provider dot cart list dot keys dot do list at index our id should be cart provider dot cart list dot values dot to list at index dot cart id so i'll just copy this much because it's going to be same for everything we have the image url best dot image url we have the price it's going to be dot price we have the quantity so it's gonna be dot quantity we have the title and it's going to be same dot title so with that let us save it and you see we are here let's work with the subtotal that we have to work with the subtotal what i'll do is inside our full cart inside this build method let's make a double sub total and this should be equals to our widget dot quantity multiplied by widget dot price so let's use this variable down there where we have this subtitle a subtotal and instead of this hard coded string put another dollar sign and our subtle so save it now let's add this samsung galaxy a51 three times one two three and this should be about 153 let's check yes it is let's do a bit of tweaking let's say if we open this product up and if i keep on clicking as many times as i click and then if i go to the card screen you see i've already added it 15 times now that is a bad user experience to tackle this let's restart the app and inside product detail screen where we have this ad product where we have it where we have this add product firstly let us write a logic here so if a card provider dot cart list dot contains our product id so if it already has this product id what i want is i want to change the text to say in cart else if it is not in cart we will say add to cart now also copy this logic again and i'll put it in front of this text button so paste it here and what i want is if it is already in cart i just want to pass an empty function so it won't add any so with that let us open this up again and now if i click it once you see it became in card and now even if i click keep on clipping it clicking it and then go to the card you see we only have one item now in the next video we will implement this plus minus here so that we can change our quantity as per as we want now firstly instead of the dependency injection that we are using let us use the change notifier provider dot value again let's go to card screen where we have this card full and for the card full let's go inside first now here uh what i want is i want to get rid of all these things so comment it out comment it out i'll just take this one and put it on top so we can uncomment this and then also let's get a final card attribute equals to provider dot off card context now get this card here all right now what we can do is uh just take this card attribute and instead of this widget we can use this card attribute what's wrong with this got it all right we'll come back to it after a while um let's go down where we are using all these widgets and instead of that let us use this card attribute here too here now let's try something here since we are here for the subtotal let's just remove it put the card attribute dot price multiplied by card attribute dot quantity all right also come down here and put the card attribute dot quantity so now let us go up there and get rid of this line great now let's go to cart screen and here let us uncomment comment all of this and wrap this full cart with a center and then change the center to be change notifier provider.value and the value is going to be our card provider dot cart items dot value dot to list at index so with that if we save it and do a full restart now let's go back again let's add this one and go to our cart see we have it here now one thing i want to do is whenever i click onto it i want to go to the screen of detail so because even a user might want to see the whole thing from the card so to do that let's go inside full cart and here let us wrap this entire padding in a new widget call it inkwell and equal needs an ontap so for the on tab what's wrong no my bad let us wrap this with a center and change this center to be inkwell now put the on tap and ontap will take a function of navigator dot of context dot push named and the name is product detail screen dot route name not only that we also want to pass the argument so the argument will be arguments card attribute not really cart attribute we want to pass the id that we are getting from here it's the product id so widget dot product id with that if we save it and now click here see we can access everything now let us write a logic so that we can add products from this popular product directly to do so let us come to this product popular dart and here let's make a new final card provider so card provider my bad provider equals to provider provider dot off card provider context so with that let us come down here where we have this button and i want to bring the same logic inside from our product detail screen you see we have this logic here from here until here copy it come back here and paste it so instead of our product id and everything we are going to be using our product attribute so product attribute dot id copy it it should be here too dot id paste it paste it paste it now one more thing i also want this logic to apply here so if we already have that item inside the car i want the icon to be something else i want the icon to be check so save it now if i add it you see it's already a check i add this it's a check and this it's a check so with that let's go to our cart you see all of them are here let's work with the card screen and here we have all right let's add something first so if i add something we should now be able to work with this plus and minus now to work with this let us go to product no the card screen where we have our plus and inside of this we need to go to our full card so let's go to the full card screen instead of this full card screen if we come down we have this plus and we have this minus now for plus we could just use the one that we have here uh add to cart because here we already have an logic for adding it to plus one card screen here the full card all right so for this plus method and if i can see it for this plus method go ahead and give card provider we need a card provider here so let us get one final card provider equals to provider dot off card provider context now with this if we come down we can access our card provider dot add to cart now add to cart needs some items so we can access the product id from our product attribute that we have and to access it we can pass this thing here see here we can just pass widget dot pid for the title we can pass card provider dot card list i dot title my bat for the title we can access the card attribute that we have dot title for the image url let us access the card attribute dot image url for the price we can access card attribute dot price so with that now let's try to see if it's working yes it is working now you see we have some error that this thing goes a lot with zero zero zero now to fix that first of all let us come up here where we have that subtotal subtotal and here we can wrap it with uh dot to string as fixed of 2 so now it will never cross the 2 digit mark now we are okay with the plus let us work with the minus so let's go to cart and make a new method here so avoid agreement card product quantity and this should be the same as this so if we come here it should be the same as this copy it paste it here now what is wrong all right so now uh what we want to do is this thing should be instead of plus this should be minus so now we can use this is this name also we have to do one more thing that is we have to notify the listeners so notify the listeners here and now with that we can take this name go to our full card and where we have this minus let us call card provider dot decrement card product quantity so let us pass widget dot p id the title should be card attribute dot title card attribute dot image url and card attribute dot price so with that we can now do a negative now you see that we will go into minus that is not something we want to deal with because product quantity should never go to minus to tackle this we can write a logic here if card provider dot card list dot quantity where is that yes so the card attribute dot quantity if it is less than 2 i want to pass a null function so an empty function that won't do anything so with that if i save it let's go back and add something more here so add it now if i go here you see it won't go no more minus but if it if if we take it plus we can again come back until we come to one great now let us get started with deleting the product so firstly i want to implement a method for deleting one singular item and also one a method for deleting all the items together to do that let us go to card.art and let's make a new method here so void remove item and here we can expect a string p id and then we can just call our card card list dot remove and remove where the pid is a match after that let us call the notify listeners and this should be sufficient now this was the method for deleting singular item how about deleting the entire list to do so let's make another one void clear cart and here we don't need to expect anything we can just call cart list dot clear and then notify all the listeners so with that we are good now before i implement those methods let's go to the card screen where we have this card and let's do something let's make a parenthesis inside of which i want to implement a card provider dot card list dot length so this will show us how many items we have inside the card nice and a very nice touch indeed also uh where we have this images inside full guard where we are using all the images so here here all right let's see what happens if i remove this fit better because in the cart you want to see everything that you you are buying fully all right so with that now let's go to our full cart here and let's search for close because icons that closes the icon for this and here let's call card provider dot remove item and the id will come from widget.pid so save it and now if i click this you see it's deleting now what for removing all the items go to cart screen where we have this icons.delete let's implement our method here so it should be cart provider dot clear cart so with that save it and if i click it everything is gone now one more thing before we delete everything i want a confirmation here now to get the confirmation first of all let's make a new folder here call it services where is it services inside services let's make a new file call it global underscore methods dot dart here firstly let us import a material.dart and this should be a class global methods now let's make a future feature of type void that is known as show dialogue this should be an async because it's a future and it is going to return us a show dialogue context should be context and the builder should be a context with a return body here we need to expect a build context of context so this is what we are getting and now inside of the builder let us return an alert dialog so alert dialog has a title of text that says confirm a delete and a content that says another text of all items will be deleted and then let's set an action of text button let's set a child of no and then the next one should be yes now for the no i want to set a navigator dot pop context and for yes we need to expect a function that we will pass it from outside so uh let's let us expect a void callback of call back and for yes let us pass this call back here so call back and also we want to pass this here so after we are done calling using the function we also remove the show dialog so save it and also after we are done doing this let us a navigator gator dot of context dot push named should be home screen dot route name so these are the three items that we want to do for yes so save it go to our card screen where we to the card screen and inside the widget tree let's make a global methods name it global methods equals to let's initialize it to be a global method now we can use this global methods where we're using this cart provided at clear cart so global methods dot show dialog and context is context for the void callback let us pass card provider dot clear card so with that if we save it now and clear it well it's gone so get something else go to the cart clear it it's gone again all right so the solution is to mark in the card screen this as async ace ync async and go to the card screen that we have or the global methods get rid of this we do not need it here now with that if i add one more and do it you see we have no and press yes it's gone now let us add one more come here and i want to test something come to card screen where we are passing all of this so after the global method let us also pass this let's see if it works let's put in a weight here so with that le if we delete it yes all right we can just get rid of this all right great alright so in the card screen where we have this subtotal even if we increase it this is not changing but in the card provider we have already made this a long ago so in the card screen let's come down here in the bottom checkout section and let us expect a double total amount here and this total amount should be used here with the dollar sign this dot 2 string let us wrap it with the interpolation here and dot 2 string as fixed what is wrong dot do string no dot two string has fixed of two all right so with that up here we can pass it by going to the card provided dot total amount save it and i actually forgot to run the app so pause the video and it's running now should be working all right now let's see what happens so now it's running and if i increase it you see that the total is increasing as well

Channel: Fluttercraft

Views: 14

Keywords: Flutter, Flutter2.0, Flutter2.8, Flutter Shop App, Flutter Full Shop App, Flutter eCommerce App, Flutter Full eCommerce App

Id: vQobYWv-9-4

Length: 44min 20sec (2660 seconds)

Published: Fri Dec 17 2021