FlutterFire - Full eCommerce App - Section 4 - Wishlist Screen State Management

so in this section we will work with the wish list that we have so now we just have some dummy wish list first of all uh let's do the same like what we did with the card so inside of models and providers go to car.dart and copy the entire thing so copy entire thing from cart and here let's make a new file call it wishlist dot dart and paste it here now change this to be wishlist because we need to change the places where it calls where it says card and change here change here change here change here change here all right now wishlist doesn't need a quantity so get rid of this quantity we do not have any need for this total amount anymore we do not need this line not this line as well not this one too all right so uh now let us get rid of this if statement here so i'll just get rid of the logic that is inside the if statement i'll do it later let's just try to do here and let's name it add or remove from wish list great so with that we do not have the need for incrementing or decrementing so let's get rid of this and i'll keep this too because i want to remove singularly also i would like to remove at all so with that we come here and we just want to pass the remove item here with the pid that we are getting and we are good so this was the logic for wishlist and now let's go to our main.dart and let this file know about the new provider that we have so this should be wishlistprovider have we given it the name no should be wish list provider also let us since we are here let us change the name to be wish wish list wish list list or whatever and this should be also the wish list but without the under scroll come down here and this should be wish list my bad this should be wish list this should be wishlist all right so inside main.dart we have the wishlist provider so let's get it all right all right so let us start working in the product details screen where we have this uh wishlist added to wishlist icon here now this is down in the bottom in this class bottom sheet and like before we have to expect an output from the other place so final wishlist provider call it wishlist provider and this should be a required parameter now required this dot wishlist provider so let's go up there and first of all let us initiate a new final wish list provider and i'll just make it a wishlist should equals to be provider dot off wish list provider context all right so now here we can pass it wishlist provider is the wishlist provider that we just made and come down here now inside this what i want to do is first i want to check if wishlist provider dot where is wishlist list that contains the product id so the product id that we are getting if it contains the product i'll id this much so until here copy it so if it contains and if it doesn't contain this all right so if it contains i'll change it to be just favorite with a color of colors dot red or should i go the other way around so i'll just copy this match copy it cut it and let's go back my bad we could have simplified it even further all right so let's remove this and paste it here if this is the case i copy this much again and do this so now we just have one icon button and inside that we have a check for different icons so for the first one if it contains we're gonna make it a whole favorite with a color of colors dot red and to make it work let us access the wishlist provider dot uh adam add or remove from wish list and let us pass the product id so product id and here we need to pass the product dot title i'll just copy this much paste here and paste here and after that let's put a comma and then a semicolon so with that save it and now let's see what happens so you see now we are adding and removing it from the wishlist now the rest of the thing for card and wishlist is exactly the same so inside our card screen and go to our wishlist screen you see inside our cart screen we now have quite a few things that we need to utilize now first of all let's come to our wishlist screen and like card screen we also have to wrap it in a change notifier but before we do so let's come to our wishlist screen and let's make a we do not need this anymore first of all let's get a final wish list provider make it provider dot of wishlist provider context so with that we can use this and instead of this what we can do is which is provider dot uh what's wrong wish list list dot is empty if that is the case then we show this other than that we show the other thing now also for this app bar i'd like to wrap it here and pass a dollar sign that says uh which is provider dot wishlist dot length so i'll just make it this right now so that we can have a look all right now for this here let's go to the card screen we have this global method here copy this bring it to our wish list paste it here also of course you have to import it now go to the card screen again and like this icon button that we have let's get this entire on pressed and copy this much come to wish list and just paste it here and instead of cart provider this should be our wishlist provider wishlist provider great now let's go to the card screen here we have a few things that we need to take care of firstly let's change this container to be to remove this and this method should return as wishlist provider dot wishlist dot length as for this thing here it should be wrapped in a center and then let's change the center to be change notifier provided that value and it's a value should be the same as what we have here so copy it come back here paste it and instead of a card provider this should be our wishlist provider so wish this provider dot wishlist.value one more thing the way we have passed this pid i also want to do it the same here so let's go inside and paste it here so instead of cart provider this should be wishlist provider and instead of cart list it should be wishlist list great so do we have anything that doesn't match no so with that being done let's go to the full card screen now inside full card screen it should be the same as the full wishlist screen so i'll just get this much so final string pid copy it we need it here and we will pass it to the constructor as well so for the constructor we are going to take this copy it paste it here now in the full card screen mind you we are taking it from the full card screen and the full visual screen we have this two items here so copy this match let's come to the wish list screen and let us just paste it inside the build method of the final full visual screen so paste it and instead of cart attribute this should be our wishlist attribute so i'll just make it wish list attribute and this should come from the and this should come from the wish list let's get the provider and this should come from wishlist and here it should be wishlistprovider so wish list provider and this should come from wishlist provider great now it's about time that we start using it so let's change this do we wish list attribute dot image get rid of this const let's just go out of here let's add something to the wishlist first so come here add it to the wish list now go to the wish list what the heck all right we'll come back to it this name should be wishlist attribute dot title we give a price here of a dollar sign wish list attribute dot price and let's just do a dot to string here dot do string as fixed of two description should be our wishlist attribute dot description so do we have a description so just make it like this keep it here keep it this much actually everything in the last video was alright i just forgot that in wishlist screen i have added this earlier so this whole line was saying no so now with that if we go to the visual screen here we have it and also for the full wish list what i want to do is whenever i click onto something i want to go to the product detail screen so let's go to full cart where we wrap this ink well and let us just get this entire thing so copy it go to full wishlist wrap this padding into a center and then change the center to be ink well and on tap should be this thing here so let's import the product details and we're good all right so one more thing that is that is i would like to remove the description that we have here so let's just come after to this row and get rid of this entire flexible along with this const size box so remove it get rid of it now one more thing that we have to also implement this here like if i'm just wanting to remove individually we need to be able to do that too so come to full wishlist and down here we have this icons.close here and for this ontap for the body let's pass wishlist provider dot remove item and here let's pass the pid and we are good should be product id yes you should be widget.pid so save it and we're good

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: yV6xU-D4w3g

Length: 16min 12sec (972 seconds)

Published: Fri Dec 17 2021