FlutterFire - Full eCommerce App - Section 2 - Home Screen State Management

in this section we will be diving deep into state management and in this video first we will be talking about why do we need state management now if you come to our feed screen where we have this feats product uh my bad in the screens and here the feed screen you see we have a list here that has a array of products which we are using for the feed screen and even if we want to use it somewhere else for example um when we click into something and in the last video what we did is for the suggested products we have commented it out because we had to pass the properties of each product and it was a big hassle because our list is here and then we have to pass it somewhere else and then get it from there and then show it on the ui a lot of things to do now a simple way to get around this is by using state management now what is state management before i describe so firstly we have already used state management for our theme we have defined what a light team should look like and what a dark theme should look like and then we have wrapped it with our change notifier so that the entire theme is a global management for the entire app so if we change the theme the theme is changed globally for the entire scope of the app now we want to do the same with the products so if i make another class with products that changes with a change notifier and we can hook it up with any server anything and we can then provide that product class wherever we need instead of using a big list each and everywhere and that would be a very nice solution to do because we can just change things in one place and it will change things everywhere now in the next video we will get started with change 35 now let us get started with the provider for products firstly what i'd like to do is change this provider folder name to be models and providers because i want to bring the models and providers together so models and providers and i'll bring this product data into my models and providers get rid of this model folder don't need it anymore now what's wrong here let us get the new path because in main.dart we have an error since we have changed the directory that is and get rid of this now inside our product dot dart here after we have this class we need this class because our provider is going to be dependent on this class let's make a new class so class product provider with change notifier first of all in this class i'll be having our product list so inside our feed screen this list that we have i'm gonna cut it out bring it here and let us minimize it first of all great now after this list i want a getter for this list because this list here is a private class and if this is private we cannot access this uh variable from anywhere else in this project right so we need a getter i'll make another list of products or product and name it products without the underscroll and this should return us the products what's wrong yes now what we can do is first of all go to our main.dart where we have this multi-provider because the providers must be a top level widget that stays above our material dart so material app so that the entire provider could be provided throughout the entire app so we already have a multi-provider here now we're going to use our second provider so i'll just copy this line here copy it paste it here and change this to be product provider yes that is great now for our feed screen where we want to use this provider first of all come to the widget tree and make a list here final product provider equals to provider dot off context and this is of product provider context so product provider context now we need another list so a list of product name it products list equals to product provider dot products now i can use this products list and use it here where we was using our list before so if i save it what is this we don't need this great so now we already have the same app that we had before but our product is being provided from a very different place now one more thing if you come to our product detail here if i come to product detail you see we don't have the suggested product anymore this is because in the last video we have commented it out and now we are going to be working on it to do so let us go to our product detail screen but before we do so also copy this because we'll be using the provider there as well to pass the products so copy this match and come to our product details screen and under the build method before we return the scaffold let us paste it now we can come down where we have our commented section down here and let us uncomment it first now we need to pass the required parameters for feeds product now feeds product here and frites product here are exactly the same so both of them are requiring the exact same amount of argument so we can just copy this much as well so copy it come back here and paste it now if we save it we have our feeds product here but the problem is each of them are taking a humongous amount of space to tackle this let us wrap this in a size box so make sure that your feeds product is inside a size box so wrap it with a size box and give this size box a width of 200 save it much better now what you see here uh for the feeds product that we have so in our product details screen we have this fits product and this is known as dependency injection and we are doing the same for the feed screen here now there is a very nice way to get around this is by using our change notifier even more we can get rid of this delete it come to our feed product here get rid of the things that it is asking for get rid of this and here also get rid of this so we basically got rid of everything that each of the widget is asking for so all its attributes now what we can do is firstly come to our product the dart and for the main class of our product we can wrap it with i mean we can mix and mix it with another change notifier after that let us come to our product screen and here what i'd like to do is wrap this feeds product with a center and change the center to be change notifier.value and its value should be our product list it's a product list at index with that let us save it and for the feeds product we will come to our build method and make a final product attribute uh variable and make it equals to provider dot of product context so our product class context now we can just copy this product attribute copy it and go everywhere where we need it so instead of widget let us make it product dot image url product attribute.description we have it here and here so with that we are okay for this file now we can also copy this much because we have the same exact products feed copy right over here and we do not need anything here because we are actually bringing this feeds product directly from here so with that if we save it go back to our feeds and we have everything here as you can see even if we go inside one of this all right so we have some problem now to get around this also wrap this with a center and change the center to be exchange notifier dot value change notifier provider.value and the value should be our product attribute do we not have an attribute here need this product list so we come here product list at i so save it and we still have it all right that is great now let us talk about how we can pass what what we want to select from the categories and how we can see it in the feed screen now there are many ways you can go about it firstly we can pass the entire product to the feed screen and then we can filter it there now the drawback of this approach would be when you would be interacting with a server you do not want to fetch all the data you have for one single item so for example i want just all the phones iphone samsung huawei whatever i do not want to fetch the dell laptops the asus laptops i do not want to fetch the clothes and so on so this approach has its own big flaw the approach that i want to take is if you come to category you see all our uh items has its own cat name so phones has this cat name of phones in common so i can just filter through this cat name or the category name and only show the items that are appropriate for it now if you come to category the dart you see we are already accessing an integer here which we are using in the home screen inside the list view builder if i come down here we have a row and this is inside a listview builder which is giving us access to the integer and then this is the integer that we are passing to the category now to set up a bare bone structure first of all let us change it to a stateful widget save it all right now inside the category let us wrap this container in a ink well so first i'll wrap it in a center and then change the center to be ink well now inkwell has an on tap argument where we can do something with the tap now first of all let's see what we can do with the print so let us bring this print function and inside of this let's bring a dollar sign because we have to convert everything to the string so firstly let us wrap it with a dollar sign and then let us in go inside our categories list where we can access our index which we are getting from the item builder and here we can access our cat name so the cat name that we want now what is wrong here all right so now with that if i i'd like to save it though but what's wrong we need to access the i by writing widget dot i yes so with that if i save it now if i click phones you see we have phones here and if i select furniture we have furniture here so now we can detect what what is the item that we are selecting and that is the name that we can pass into feed screen and then inside feed screen we can run the filter logic to filter out the items that should be shown and we will do that in the next lecture to finalize category filtration let us first get up with the feed screen that we have copy it completely and let's come to the inner screens folder and let make a new file here call it categories under scroll feed under scroll screen dot dart let's paste it here and now let's just change this name so i want the name to be gory's feed screen copy it paste it here and let us change the name here too this should be a const by the way categories feed screen save it great now let's go to main.dart and let us also copy this match copy it and paste it here now change this to categories feed screen so that we can access the route name and pass the route argument so save it get rid of the feed screen come to the category.dart now here where we last use this print statement now let us have the navigator so navigator dot of context dot push named and for the named let us pass the category feed feed screen that route name put a comma so that we can pass the arguments as well now to pass the arguments i'd like to just copy this much that we have so copy from here until here because this is the argument that we want to pass we do not need the print function anymore so for the arguments i'm just going to paste it with a comma great now let's go to the categories feed screen where we have this product provider logic and above this let's make a new file a new variable so final capped list or should be cat name equals to modal route dot off context dot settings dot arguments as string so with this method here what or with this logic here statement here what we are doing is we are accessing the ralph name that we are getting when we click the button here all right now let's do a null check here all right we're good now now you see here in the in this screen we are accessing the product list and this is the entire product list but i only want the product list that matches our category name now to have that logic i could either write it here but a better place would be to go to our product.art where we have this provider class and underneath it let's make another method it's a list of product because we will be getting products so list of product and name it cat list or should be get by cat name and here we need to expect a string of cat name because we need a category name and then with that category name we will filter the entire list here we will have another list of product and let's name it catalyst equals two what we want to do is access our products this products here so products dot where and where is a method that we can use to filter through the entire list after this we need a dot to list now here we are accessing all the elements that are within the list so here we can write element dot product category name dot to lower case because we want to get rid of the upper list and lowercase thing and this should be equals to the cat name that we are getting for this method so cat name dot to lower case now with that let's come down here again and we can finally return this entire list so return me the catalyst so with that if we go to category.dart and go up here where we have the logic my bad inside categories feed screen now for the product list we do not want to access the entire products anymore we want to get by cat name and for the argument to pass we are going to be passing this cat name here so cat name the cat name that we get from the click so now if i save it and if i come to phones you see we are only accessing the phones but we have some range error ranger because if you come here we have a item count and for the item count we have set it to 20 but this should be our product list dot length so with that if i save it we only have three phones to show if i go to laptops we have four laptops if i go to clouds we do not have any clothes so nothing to show for watches we have a lot of watches to show and hence you can see it here for furniture we have a lot of furniture and hence a lot of furniture to show here but for beauty on health we do not have anything and we don't have anything here as well now one more thing for the app bar we are accessing we are putting the feed screen here but i would like to change it to be the cat name so cat name dot to string alright so if i save it and go to phones we have phones here so now we're going to be working with the popular brands that we have here so we should be able to click into something and see the items that are related to it's a brand now one thing this is going to be very similar in in the implementation case like the categories filtration with that being said firstly let's go to product.art where we have our product provider and firstly we need a method to search by brand and that should be very similar to this method here so i'm just going to copy it and paste it here change the method name to be get by brand name instead of cat name so it should be brand name and here we should be getting the brand name now this brand name should also be used here and instead of product category name we will be using the brand with that we are done building the method that we need now let us go to the brand navigation rail.dart this widget here where we have all these if conditions here first of all let us wrap it with a center and then let us change the center to be a change notifier provider.value so uh change notifierprovider.value and the value needs to be something dynamic so here first of all let's make a final product data equals to provider of product provider context now final product brand should be our product data so our product data please come product data dot get by the brand name and the brand name is the name that we are getting here in the content space so let's pass the brand now with that we can copy this product brand come here and this should be at the index of h also for the item count this should be our product brand dot length now we have to work in this brand navig brand navigation rail widget so for the brand navigation rail widget let us firstly make a provider class here so final product attribute equals to provider dot off product context and we can set the listen to be false now let us use this product attribute copy it and instead of this image url we want our product image so paste it dot image url save it and for editors we do not have anything for apple we have so this is what you can see for apple all right for the price let's get rid of this hard-coded text and let us bring the dollar sign here and pass the product attribute dot price i'll just copy this much what went wrong all right now for the name do the same and change it to be the title title and for the category let's paste it here and here let's make it product category product category name now with that if we save it we have it here great so i can just come to h m we don't have h m we don't have dell we have huawei we have some samsung and that is it so everything is coming dynamically here to work with this popular product section let us first go to our product of dart and firstly let us make a new method so list of product because we'll be having a list of product and this will be a getter so get let's say popular products and here i want to return our products list dot where of course dot to list after this thing and where element dot is popular so wherever the element is popular return it to me now we are going to be using it so let's go to our home screen and we have to wrap this popular product with a change notif change notified provided.value or you could go to inside this widget here and ask for dependency injection but i'll go the notifier out so first of all here let us initiate two variables so final product data equals to provider dot off products provider product provider context so product provider context and then let's make another variable final popular product and inside this variable we'll be saving all the products that are popular so product data dot popular product products now let's use it come down where we have our popular products section and firstly let us change this item count to be popularproduct.length and now let us wrap this with a center and change the center to be change notifier provider.value and for the value we'll be passing our popular product at index so with that let's save it and now let us go to popular product dot dart inside your widget folder and call make here a new variable so final product attribute equals to provider dot off product context so now it let us use this to copy it where we have this image url paste it dot image url where we have this price here so dollar sign with the third bracket product attribute dot price now i'm just going to copy this much so that we can use it down below and instead of name here paste it use your title here we have description and let's use this encryption now save it and this is what we have now we have a little bit of error here to fix it let us change this font size to be 18. save it and now we are good so that was it for the popular product section up until now whenever we were clicking on to to go to any detail page for example if i clicked onto something here and this was the static detail page that we were getting now it's finally time that we show dynamic data here to do so firstly let's go to product. and what i want to do is for each of this detail screen i want to get the data for those item by its id because id is a very unique identifier right it's a identifier that is uniquely given to it so this time this should be just one single product and should be get by i d and where i'll be expecting a string id or should i say prod id so pro id stands for product id where i want to return my product list dot first where element dot id is equal to my prod id so the prod id that it gets doctors to list all right let's just ctrl z to go back first where and dot it should be element dot id equals to prodi all right yes so with that firstly let's go to our popular product section so popular product is inside our home screen down here so if i click something i want it to go to the details screen now to do so for our popular product section or the purple product widget we have this clip r inside of which you have this network so wrap this clip r with a center and change the center to be inkwell on inkwell take the on tab and for the on tab give a navigator dot of context dot push named and the name will be products product detail screen dot route name also put a com after this because we'll be using the arguments and for the arguments we have this product attribute here so we will be using this product attribute so product attribute dot id now save it and what i'll do is i'll use this in some other places so just copy it go to our feeds product and in feeds product we have this as well so feeds product is saying about this widget here and instead of using this let us paste the one from the place i'll change this to be here all right now copy this much again go to brand navigation rail widget where you have this item here so if i go to one item we have apple and this thing has an inkwell so here pass the same thing get the product detail screen save it and we're good to go now we are passing the id for each and every item to our product detail screen so it's finally time that we work inside of the product detail screen so for example i have clicked this image here right and we have the static thing here so for the product details screen let's start working firstly we need a product id that the id that we are getting so to get the id we will be using final product product id and the product id will come from modal route dot off context dot settings dot arguments as string now to get the final item so final product should come from our product provider dot get by id and inside id i'll just pass the product id that we're getting so product id now to use this let's copy it and first of all let us go down where we have this image and instead of this let's paste our product dot image url save it and we have it here great come down where we have this title and pass a dollar sign with this product dot title paste it great for the price i'll just copy this match ctrl c paste it here and this should be the price great now for the description where we have this brand and brand name so here what i'll be doing is putting the same thing and pass the product dot brand product dot quantity here the category name so product category name and here i'll do a check here what i'll do is do a product dot is popular if this is the case i want to pass popular if it's not the case i want to pass barely so save so as you can see is this item is popular hence we are having this popular word here if it wasn't it would have said barely now i guess that is it there is nothing more to do here do we have some reviews i don't think we have some reviews alright alright so one thing that i have missed in the last video was for our uh detail screen i left the description unchanged please go ahead and add this product description into your product detail screen so that you have all the description for every uh product all right now we want to work with our view all here so whenever we click into view all you see we have nothing here that's because we haven't set any brand that is all now to tackle this come to our brand navigationrail.dart and where you have this content space let us write a logic for all so if brand equals to o so what i want to do is i want a for loop all right so for loop here so let's write end i equals to zero so for i equals to zero i is less than our product data so product data dot products dot length so until i is less than this and i should be incrementing so i plus plus now product brand product brand is a list of product where i want to add product data dot products at my index so with that now if i save it we have all the items here let's work with the view all for the popular products here let's go to this place here where we have this popular products inside our home screen and for the on press let's set a navigator so navigator navigator my bad navigator dot context dot push named and for the named i would like to pass our feed screen so feed screen dot route name and as an argument i'll pass a string of popular just this popular now save it now inside feed screen let's come back here and let's do something what i'd like to do is get a final popular equals to modal route dot of context dot dot settings dot arguments as string now here let's make a if statement if popular if this um variable popular is equal to equal to popular so if i actually get the argument here so bob peeler of model route i want to show for the product list product list should equals to be product provider dot popular products so this list here that we're using for the entire place if we get this thing for our variable i want to set this list as the popular product so with that let's save it let us also hot restart and come down let's view all and see we only have the popular items now one more thing for the home screen here for the products feedscreen.dart we have this item count and this item count should be products list the product let's dot length save it and now the error is gone even if we come this way let's do a hot restart if you come this way uh so this thing is giving us a now where is it this thing is giving us a null so if this is not the case i'll just set as nothing so i'll pause the video uh all right so i found the solution the solution was uh we was using a string right we were using a string here but this thing if we are not going through this view all and instead if we go through these feeds directly this thing is not a string anymore because this whole statement returns us a null and now cannot be a string what we could do is we could change this dot to string so null to string is null as well so with that if i save it and hot restart and if i go to feeds now we you see we have everything here and also if we come down and go to view all we have everything here

Channel: Fluttercraft

Views: 41

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

Id: xXBRWmUMJCo

Length: 43min 8sec (2588 seconds)

Published: Thu Dec 16 2021