Flutter Fetch and Display Products Dynamically | Sort All Products | FutureBuilder

and welcome back to coding with te today we are going to learn how to use one single screen and display any type of product which is typically to display all the product as in most of the applications we have view all button in almost every screen so how we are going to view different type of product on different screens and also we are going to learn how to sort product using a single wiget and quickly have a look what we are going to achieve our application is running user is already logged in and if we head towards the bottom of home screen you can see we have four products that we learn how to retrieve these type of product in the previous tutorial and how to handle single or variable products we also see how we can add loaders add all the images all these functions how to handle these attributes everything is done in the previous tutorial if you are new you can watch the previous videos or you can get the playlist link from the description below and also if you want to download the complete code link is in the description but for today's tutorial when you are going to click on this view all button you can see we have one view all over here head towards the store inside scroll a bit below and you can see currently Sports is selected we have a view all for this sport button then for the electronics we have again view all and we going to open the electronics this is the screen that we want to design it is going to load all the products that are specifically related to electronics and also we have a sort option at the Top If we head back and go to the home screen when we going to click on this view all and this time it is going to get all the popular product you can see a relevant heading then all the popular products are listed over here we can also sort them with a higher price with a lower price and with all the options if you want to sort them with the sale you will get sale products first and at then end we have two non- sale items so this is what you will be able to learn in today's tutorial creting flut e-commerce application and we have already completed all the previous four sections in which we learn thoroughly each and every step to design this application we already completed the back end for login in which we covered almost every tutorial that needs to be there to create a user authentication and let the user login we learn how to upload images of the user profile how to get images and bunch of other things has been completed and for today's tutorial which is the last section we are about to create view all [Music] products so open Andro studio and we are inside the project and inside this project let's head towards the features in the shop and in the screens you can see we have all product screen it has nothing inside it has just a reusable widget which is a sortable products if you open this the sortable products has one drop down a space and a grid which contains list of products now we have to provide the list of products to this grid which we already created and this grid is going to display all the products in a vertical style and also using this dropdown we will be able to sort all the list and pass again that list to this grid model to be displayed so first of all how we are going to cury this we are not going to receive list of products because let's say we have tens and thousands of products inside our database if we we going to retrieve all those products and save them inside our function that will be not a good approach because even if user open the application for the first time reaches the home and close the application only this click is going to get all the thousands of products to be loaded inside your application that will definitely take time and also there will be lot of reads from the fir store and if you're creating your application for the client he is not going to be happy because all those reads are going to be very expensive So to avoid that we are going to only display relevant products we are going to get those products from the database let's say 10 products 20 products as many products you want we will only retrieve those products when user is going to click on view all button right so to do that we need different type of ques to be performed let's say we want featured products let's say we want products whose category is ports or let's say we want a products of some specific brand so to do that let's take an example of the home screen inside the home home do you can see we are displaying list of products which we learned in the previous tutorial and passing those products to the script and right on top of that product we have a heading Which is popular products and on on press we are simply redirecting to all products right now in here what we are going to do we are going to create two different options inside all products we want to receive two things first one is a title and second one is optional cery a Firebase query if you can pass to this function and this function will be able to execute that c by its own self and also if you want to pass a complete future method that should be triggered whenever this view all button will be called again here I have created three variables the first one is a string which is going to receive the title which we want to display to this product so title will be replaced with a manual title over here and we cannot use a constant now after that title we have a cury parameter so if you want to use this cury parameter you have to import Cloud fire store. doart and at the third we have another method so you can see these are nullable so it's optional you can provide a Cy or you can provide a future method so future method is a future of type list of product models so you can provide a future method which should be of type list of product models because we at the end want to display a list of products so we will see these both in a few minutes so first of all because we want to call the future method and we cannot use a wait sign because future method takes time they are going to go for the cloud queries and Cloud queries definitely depends on your internet connection and takes the time so for that we need to call the weight sign in general and that compiler should wait until that process is completed but in here in the design because we cannot use a weit sign and we cannot make this build method an async function so to use a function which has a cloud query we have to instead use a future Builder future Builder as by name you can see it handles all the methods that are related to Future not to use the future Builder we want to use that future Builder on top of this sortable products so Alt Enter and first you can go for the option stream Builder now change this stream Builder with a future Builder instead of the stream use the Future Property and also this cannot be a constant we have to return any type of widget over here inside this Builder and this Builder has a context and a snapshot so this snapshot is going to get the data which has been returned from the future function now inside this future we are simply going to pass a future method if we have anything inside this feature method and by using double question mark this means that this future method is null if it is null we are going to create a method that is going to receive this query and execute it as a future inside our own controller now inside this build method create a new instance of controller which is all products controller using get.put I'm going to create a new instance of this controller and when you open this controller it is a simple empty class which I've created inside the shop in the controllers and and you can see we have all products controller which is the empty class and it has nothing inside okay inside this products controller the first thing we need to call our product repository which is going to deal with the backend with the fire store you can see I'm not using get.put to create a new instance rather I am using product repository. instance which is using get. find this means that it is going to find already created instance of this one which is the product repository now create a new function this function is going to return future type of list of product models so whatever cury we receive over here we are definitely going to cury it to get list of product either it's a one product or multiple products but we are going to receive list of product model and over here this function is going to be called inside this function first create try catch and inside this try catch first of all we going to check if cury is null the cury we received over here is null we're going to return empty list else if we are going to catch any exception we're going to display a popup which we have already created using get. snack bar the class you can see over here which is a static class so we can directly call T loers class. method which is eror snar and send the message and again we're going to return an empty list now if this is not the case we are going to call repository do fetch products by cury we're just going to create that it should be an await sign because it have to wait until this operation completed and it is going to receive list of products inside the product repository we have to create a function with this name so let's open the product repository in the previous tutorial learn how to get featured products and display on the home screen and this was for the dummy uploader that we also learn in the pr tutorial so same like this function I'm going to copy this one and paste it over here to use all these exceptions just to change the name this is going to receive a query this cery is not null and in here you can see we're using the same TR catch but inside this TR catch first of all we are going to get this query and call the get sign so whatever the query is it is going to call the get means that return data whatever has been asked by this cury and it is going to wait until the data arrive so because we know that we have a data of type product models so we are going to run a loop on all the documents that we receive and using map we are going to run a loop and in each document we will be able to receive adjacent type of product model so if we receive with the jent we know that we have already created product model from cury snapshot and basically multiple people are having an issue that we receive null or typically I don't remember the actual error but it is something like if you receive error which is null cannot be assigned to string or to integer or some other variables this means that when we going to receive data from this stock keeping unit which is basically a string value and if you see this SQ it is a nullable type of string so this can accept null over here but if you hover this title it is a type of string and it is not nullable this means that this title cannot receive null values so if we add data of title and we forget to add double question question mark which means that if this value is null assign empty string instead of null if you don't have anything like this over here like if you see the stock we have integer type of stock so they can only accept integers the stock can only accept integers we cannot assign string or null to this stock so if we receive the data which is null from this stock we don't have anything like this stock in the database and we receive null over here then this double question marks will be triggered and instead of using the null value it is going to assign zero to this stock right so this will be able to overcome so again if you don't know about all these we have covered in detail each and everything is discussed in the previous tutorial so if we head back using this product model from cury snapshot we will be able to get all this data and by using two list we are going to convert it into a list and we will be able to return that list from this function now if we head back over here you can see this function has been executed now we receive the product we just have to do same we have to return those those products and the error is gone now open the all products do do and in here if it is itself a future method we don't want to do anything else but if it is a cury now we know that we have to call over controller. fetch products by cury and pass the cury to it now if it is a future method we can handle the future method if it is a cury we can handle the cury as well and we will be able to get all the products and we will receive all those products inside the snapshot you can see it is a list of product models now before doing anything else over here let's go to the home RO do and in here now in the all products we have to pass required keyword which is title title will be popular products add a comma Control Alt L after this title we have two other optional attributes the first one is the future method second one is the cury if we are going to use this query object so to pass the query we just have to remove the constant over here and call the fireb fire store do instance do collection the way we created a cury simply instead of you just don't have to call Dot get over here so do get requires a weit sign definitely we are not going to wait over here until this operation is completed so we also need to use the future Builder so instead of executing this cury over here we are just passing this query to this attribute and this attribute is going to get to the all products and will be executed so this is one way to do this if you don't want to use cury and you have already created a method whose Duty or whose function is to retrieve all the products from the repository you can also pass that function instead of executing that function now in order to use the next one which is future method we need a future method so because we have all the methods in the controllers so open the controller you can see we have one method which is fetch featured products uh this method is only getting featured products which is four featured product from the repository so first of all we have to duplicate this function and you just have to write get all featured product remove this limit because we want to get all the featured products where is featured value is true and inside this products collection now it is again going to return all the featured products and also inside this controller we have to create a future method fetch all featured products it don't have to load anything and also don't have to assign anything over here so if there is nothing loading we don't need finally but instead we have to return list of product model and if we caught any exception we just have to return empty list and return actual products from here so now we have a function whose duty is to get all the feature products now instead of triggering this function we can open the home do do and because we already have an instance of controller of this product controller down below where we are calling the all products we can pass future method controller. fetchall featured products now this is going to only pass this method to the Future controller and by this way we will be able to call this screen as many times as we want and we can pass anything which we want to pass if we are going to pass the future method so first priority is the future method it will be executed if we don't have anything in the future method then it is going to look for this query so let me remove this cery go back to all product now in here so far we get the query we are able to execute this cury and we receive future method we pass the future method to this future and we will be able to get the result inside this snapshot in both cases we are triggering a future method so this is also a future method and if we receive anything it is also a future method now let's talk about if we receive anything over here so the first and foremost thing is that we need to start the loader until future completed its operation and return the result to create an if statement if is going to check if snapshot. connection state is waiting we want to return this loader which is again a widget we must have to return any widget so we are returning a widget which is the vertical product shammer that we created in previous tutorials using grid layout so it has an item count of four if you want to increase this to six as as many times as you want you can use that so it will start the loader until the connection is waiting then we are going to check if snapshot. has data which is not signed you can see uh exclamation mark means that if we don't have any data or snapshot. data is equal to null or snapshot. data dot is empty if any of the case we will simply display that no data found and at the end we going to check that if snapshot do has error we are going to display center widget with the text something went wrong and if none of the cases above triggered simply this return sortable products will be triggered and we will be able to display all the products okay so at the end we received the products we found products without any error so snapshot. dat is going to return list of products to us so we will receive the products over here and now we want to pass the products to this sortable products widget which has one drop down and then it is going to display all the products so first of all let's create a variable which is going to receive list of products created a variable over here and call that variable with the required keyword in the Constructor so we receive all the product inside this grid layout instead of passing a single product which is empty product each time we can simply use these products and at current index index of this grid layout we will be able to pass unique product each time okay so far we receive the products pass the products over here and it is going to display the products which is very fine nothing wrong with this one but if we are going to toggle with this drop down let's say we want to sort first products with a name then with a higher price with a lower price or any other option then definitely we want to Resort the products list and display again on this grid layout this means that we have to redraw or call the set state to redraw the design again and again whenever this drop down triggers so first of all for the back end we again have to use this all products controller so just create a new instance of this all products controller and whenever this build method created I want to get this all products and assign products to RX type of variable which is rx X list of these products so whenever that variable is going to be changed we will be able to redraw this screen again and again as many times as that variable is going to be changed so let's open this controller close this function I've have created two variables the first one is simple string you can see it is a simple string which is selected sort option and but default value is the name and it is the do OBS type means that this is observable variable and it will be observed Whenever there is change inside this variable we will be able to redraw our screen so you can see it is type of RX so same we going to do list of products model we will receive the products and we will be able to assign all those products to this one because it has a type of OBS so whenever there is change for this OBS it is going to redraw itself again so instead of calling or using the same products we are not going to use them we are going to use controller do products this one one and get the current index to retrieve a single product now whenever there is change inside this product it should be redrawn so we have a widget which is going to redraw this which is OBX widget it requires a function like this so whenever there's change inside this OBS variable this OBX which is Observer is going to observe the one who is being observed and redraw the grid layout for us before assigning all these products let's open the all products controller and create a sort method void sold products it will receive a string that we are going to compare sort option inside this sort options we first have to change the selected sort option do value is equal to new sort option and then we're going to run switch statement pass the S option to the switch and then each case we are going to check this and you just have to make sure that we are going to receive each time these values so you just have to copy these strings and paste it over here so if if we receive sort option as name we just going to call the products all the products which we have just received do call the sort option because it is able to be run on a list of elements so it is going to get the first element and the second element as a function so for the name attribute we are going to compare the title so it is going to get the title of this product a do title. compare to B do title and we'll sort it with a name word and same way we're going to do for the all the variables second case is higher price it is going to sort with the B dot price value of this products model then we again have the lower price it is going to you can see first for the higher price it is going to use B do price first and then for the lower price it is going to get the a do price and then B do price for the newest we are using a do date comparing with the B do date of the product and for the sale if B do sale price is greater than zero this means that if we have anything on the sale we will compare it by this way with the sale price else if we going to return minus one and return one because these are the options that we again returning from here one or minus one for the sort options and if none of these cases we are going to use the default attribute which is the title one which is basically a name sort and at the end I'm going to create another variable it is going to receive list of product model all the products and simply assigning all the products to this list which is this. products do assign all assign all these products and all the sort products with a default name attribute inside this controller whenever this controller is created or simply whenever this build method will be created whenever a view button will be triggered this sortable products will be created and the build method will be created again and right inside this we are going to call controller do assign products and we are going to pass all the list to list method this is going to Simply assign all the products to this list of products which is a type of obs now whenever there is change inside this OBS values it will automatically be redrawn now we just have to change the values of this OBS because we are changing inside over here inside the products do sort these sort options are changing the positions of these products so as I already told about that whenever there is change inside this products it will able to redraw itself again so we just have to trigger that inside this dropdown so whenever this on change will be triggered we will receive one of these options that are select Ed so inside this function whenever we receive one of these values we just have to call the sort product method which is this one and it is going to trigger change inside these products and this is going to redraw all the products for us so whenever on change will be tapped all the products will be sorted by its own self and to display the selected value we have to use a value tag and all the time we will have selected sort option inside this variable now we have to pass something where we are using these sortable products we have to provide empty list and now inside this future builder at the very end we just have to call the products and pass all the products that we received from the future remove this constant and we have nothing and all the errors are gone now let's run this application okay so our application is running and you can see we are inside our home screen and we received all the products when we going to click on this view all button you can see a loader and then we have an error which is that we not using using OBX properly open portable products because we received the error over here not in the drop down but inside this grid layout where we are using this OBX okay the error is because we don't have any product which is using do OBS inside this grid layout so we using static count which is item count as 8 we have to replace this with the controller do products. length now we have a variable right next to this OBX variable a widget which is using OBS type of variable so let's save it and you can see we are able to display all the four products that are popular now if you see in the all products we are working on future Builder that you will be using inside your applications later on or maybe inside this current application multiple times first of all you just have to check the connection state if it is apparently loading show the loader then we have no data found then we have something with the if there is any error in the snapshot we have to display that and sometimes we forget about this so that's why to overcome from this problem and also to reuse this again and again I've have created a custom class so if you go to the utils inside the helpers I have created a cloud herle function so this class main functionality is to deal with the functions that are going to help us related to Cloud queries or Cloud functions so you can see we have a first method which is check single record state it is going to receive any type of snapshot right over here it is going to first check that if we have a waiting connection it is going to display a center circular progress indicator if we have has data or the data is equal to null we are going to display a simple widget no data found else we are going to have error we are going to display something went wrong and if we receive none of these we are going to return null from here you can see it has return type of widget and definitely it's a static widget same way if we have a list of snapshots like in current scenario we have a list of product models so in that case we have a list of type t means any type of model any type of value we have to pass the snapshot if snapshot is waiting we can also pass the custom loaders you can see it is a required if you use the curly brackets you can use required sign to make some some variable required and all the other variables are nullable if you pass the loader we going to check if loader is not null we are going to return your own created loader if it is a waiting state if you created error widget custom error widget that you want to display we're going to check if have something in the error widget instead of displaying a simple Center text display a specific error else display something went wrong and if nothing found widget is passed same way we going to display that else we're going to display no data account and we're going to Simply return null instead of all these how we can use that class we have a custom loader over here so let me remove rest of the things because in this case we want to display a custom loader instead of displaying a simple circular progress indicator I'm going to call this function which is a cloud hel class do check multirecord State because in this case we have a list of models inside the snapshot and as a loader variable I'm going to to pass the custom loader that we just created which should be a widget and if we add a comma and press control space you can see I can pass error widget nothing found widget as well but as we don't want to pass it it will use the default values and to display any of the widget we just have to check that if the wiget we received is not null if it is not null we want to display that widget and simply return it from here in else case we want to return our own main widget so now you can use only this one line and also if the widget is not null so these two lines are going to work perfectly for your future Builders if we run it again so data is loaded again so click on view all you can see the loader and now everything has been displayed now let's click on the sort option and click on higher price you can see the values has been shuffled let's click on figure the lower price and you can see the lower price values are now at the start also we can deal with the sale price because all the products are sale so definitely we can currently see all the products we have a newest category they are same still and also you can sort with the popularity because we don't have anything for the popularity tag so that's how you can deal with all the products okay so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming videos if you're new again you can watch the complete playlist link is in the description and also you can download the complete code link is in the the description or visit coding with.com once again thank you for watching take care Allah

Channel: Coding With T

Views: 2,567

Keywords: fetch data from firebase database flutter, fetch data from firestore flutter, flutter fetch data from firebase, product sort and display, flutter product detail page, flutter product page, flutter filter search, flutter filter products, futurebuilder flutter, flutter futurebuilder, futurebuilder flutter firebase, flutter fetch data from firebase using futurebuilder, flutter sort products screen, flutter sort listview, flutter ecommerce app with firebase 2024, coding with t

Id: Ujj-efLh-yw

Length: 27min 33sec (1653 seconds)

Published: Sat Dec 23 2023