Flutter Fetch Categories from Firebase Only Once | Reduce Firebase Reads

assalam alikum and welcome back to coding with today we're going to learn how to get and show data on flutter from Firebase fir store and also we're going to get the categories images from Firebase storage so first quickly have a look what we going to achieve okay so our application is running and because user was logged in so that's why instead of going to the login we have redirected back to the home screen and in here you can see we have just loaded with the categories these are the few categories that we have just loaded when you click on this you will see another loader and it is going to load some subcategories sports you can see at the top of category then we have sports equipment sports shoes and frag suits these are the subcategories of this category same way when we going to open Electronics we have two categories laptops and mobiles and by this way we have list of categories and also list of subcategories so first we going to learn how to design a model in a way that we can store categories and subcategories on the fire store and also retrieve them and display as we want and also when you head towards the store you can see see we first loaded all the categories over here and inside these categories tab we loaded relevant data of that specific category so as for today's stor is concern we are going to typically learn how to get data from fire store displ the data in our flutter application and also we will able to see that how we can avoid multiple reads from fir store and only using one read Because categories are loaded instead of loading again and again all the categories whenever the new class will be triggered you can see the categories are not being loaded they are already loaded when you head towards the previous screen also these categories are loaded and images are being cached so let's get started with today's tutorial we are creating flut e-commerce application and we have already completed the design portion and also in the last section section four we have completed our backend part for the complete Firebase authentication including Google signin email and password forget password and bunch of other activities if you new you can watch the previous videos and get the playlist link from the description below or from the right top Corner as we are going to start officially the next section or the last section of this playlist in which we are going to talk about categories and subcategories so let's get started with today's tutorial open your project and we are inside our e-commerce project that currently we are working on and we have already completed all the authentication repository that we created in the previous tutorials and we also learn how to deal with the user repository so we created a user repository that is doing a lot of stuff for us so same way now we are officially going to start the shop feature section and now inside this section we are going to deal with models and controllers now the first and foremost open your fire console and previously we created one users collection inside we learn how to add data how to retrieve this data and how to display this data on on the flutter app and also we learn how to add URL inside this profile picture how to store the data in the storage and also how first we have to authenticate so everything is overed now to start with the e-commerce we first have to design our database so the first thing we going to design is to create a new collection of categories this collection is going to store categories and subcategories because our products can be inside one category inside a subcategory maybe one product have one category or some other product have two in two categories so it will have many to many relation to map a many to many relation we create Bridge tables in SQL so same way we going to create a new collection if required but for today to keep it simple I'm going to name categories to this collection click next you can create any IDs over here it can be Auto ID but I'm going to create it one for now it should be unique this document ID must be unique so let's add the values of this collection I have created a bunch of fields over here so insert the categories the first document the ID is one we'll have a string type of image another is a Boolean type of is featured variable then we have the third value string type of name and the fourth value is parent ID which is currently null but which can be a string value right so the first one is the image of this category if you see all the categories you can see we have a sports image electronics and bunch of other images for the categories to store them we are going to use this image attribute to place the image URL or path of the storage in here and then we will retrieve the image from the storage after that we have if feature true because currently we can see only eight categories because they are featured categories and we also going to add a check that we only want to display eight featured categories then we have a name of the category as displayed and then parent ID now this parent ID is going to distinguish between parent and child ID so how it is going to work currently because this parent ID is null this means that this ID is the parent ID like sports Electronics cloths and all these categories displaying over here they don't have any parent so they are the categories that are on the topmost line right so let's add another document I'm going to name it two but for the second document you can see we have image name is featured and parent ID but parent ID is a string type of value one so when I'm going to save this you can see it has some image it is featured through name and the parent ID is one so now with the parent ID one I mean that we are going to get all these categories we will equal to this parent ID and we'll try to see that if current selected category ID is equal is equal to this value parent ID so fetch all the categories where we have one so whenever this one will be selected whatever the name of this one is whenever that will be selected it we will able to fetch all the subcategories based on parent ID so this is how we are going to map all the categories and subcategories now let's start coding because we are going to deal with the shop section so inside the model the first thing we need to create is a category model which should have the same thing the first one is the document ID then we have name image parent ID and is featured so this means that likewise we have document ID and four values over here so in total we have five things these three are string parent ID is also string is featured is the only thing which is in the Boolean and because parent ID can be null so instead of using the null we are using empty string over here this means that whenever we going to check if parent is empty or not we will use Dart is empty or is not empty feature then we are going to create a helper class which is empty going to Simply return the same model with filled with all the required empty values so now in here whenever we are going to get data from Firebase store data to the Firebase we have to receive and send the Json structure right so whenever we're going to create a model which has to send data to the Firebase fir store and receive data from the Firebase fire store we have to create two additional functions in each model because model by name you can see its work is to model data on some structure so the first function is going to be the function which is going to convert our data which we pass to or assign value to these variables which will convert that data to adjacent format and whenever the repository which is going to deal with all the fire store activities whenever that class is going to call this function it will get all the values convert these values and return Jon then same way whenever we're going to receive a document from the fire store because you can see the only single value is a document so when we going to receive this value we usually call this a document snapshot so when we're going to receive that we will return the model because our application only knows about this model model so to use in our application we first have to convert the adjacent into a model we will map all these values to on these variables and we will simply return them first create simple function this function is going to return the map type because in do Json is actually called a map so we have to call map because Json if you know the Json Json is using key value pairs so key will always be in string and value is dynamic so we can simply declare this as well you can see the error is gone return type is map of type string dynamic means ad Json return type then function name is two Json and in the function we are returning curly brackets in the curly brackets the first value is key colum name of the value which is value itself so key and value then key and value comma separated key value and key value all the values will be whatever we're going to pass over here if parent ID is null then it is going to store null if it is not null it is going to store empty whatever is pass to this variable will be stored in the F store now to receive these values we have to create a Constructor because we have already created a Constructor to create multiple Constructors in Dart we can use Factory method or you can say to create a named Constructor because you see name of this class is category and by the same name we have created already a Constructor which is receiving all the values Now to create another Constructor with a different name we use the same class name category model do from snap so this dot is going to allow us to create different names for the same class CL Constructor you just have to add a fact keyword so to create another Constructor because we are going to receive a Json you can see this is a Json format so we will see a document which will be in the Json format and we will use this document to first check if it is null or not document do data so data will actually be adjacent so document is going to point to this document snapshot and inside this we have adjacent so document or data is adjacent if it is not is equal to null or if it is null we will simply return empty Constructor not a Constructor but a Constructor actually which is having nothing which is empty using this helper class and then if it is not null we will get this data inside this variable and we will return this model to be used throughout in our application to map that data we will first receive the ID using the document. ID directly this document then ID not inside this data because if you see this first of all we are going to receive this document and document itself has the first ID so document. ID and then data is over here so document. ID is different thing document. data is different thing to map it we first have to map the ID then to map other things we have to choose the same name image is featured these Keys should be same otherwise it not going to find the key and based on this key only we are finding the value so data of name data of image data of parent data of is featured so if these things are going to be null double question mark means if they are null we will use the empty strings and if this is null we going to display is feature to false so we will return that simply our model is completed let's close this create a repository we going to deal with the back end we have to create that repository inside this data insert the repository we already completed authentication and user repositories but for now we are going to create a category repository now this category repository is a empty class if you want to extend it with a gex controller you you can extend it but if you don't want to use gex it's okay just uh don't declare this and if you don't know about why we are extending this gex controller and all this you can get the video from the right top Corner understand all this and also link from the description below to know in detail about why we extend these things with the class okay by moving forward the first thing inside this class is the variable which is Firebase fire store. instance because this repository class is going to deal with the fire store so simply create a private variable now the first thing is we will get all the categories and we will create a function we will first receive a future type of function because it a cloud cury so it might take sometimes so that's why we have to make it future and what exactly we going to receive we want list which is an array we want list of category models right single category is inside this category model by list of category we means that we want more than categories of this category model so name of this function is get all categories it will be the Asing function because without this Asing we cannot call the AIT sign always wrap your Cloud queries with a TR cach because you might get some exception ions and if you get unced exception your application will be crashed inside the strike C because we have already talked about in detail why we are going to use these custom exceptions the Firebase exception to receive any Firebase error and display relevant message and also in case of platform exception we are going to receive that code and display relevant message else if it is not the case we don't want the user to see any technical details so we will simply throw something went wrong now to get all the categories from that same collection we're going to to receive some Snapshot from the fire store or you can say collection of data so I'm going to call it snapshot using a weit sign we're going to call the database which is actually Firebase firestore do instance dot we are going to get the data from this collection so we have to name the collection it should be exactly same so you have to copy this name you can copy it from here which is categories paste it over here from this collection what we want want to get all the data so we directly call this get sign to receive all the data from this collection so so once we have all this data we want to extract single entry single document convert the adjacent into model and paste that single collection into a single model and return using a complete list so to do that let's call it list from the snapshot we are going to call the documents all the documents and to cury one by one all these documents we are going to use the map property because we want to map this Json one by one into the category model and return the complete list because the current entry e is a single entry so we have to pass this single entry to the category model we just created category model. from snapshot because this is going to require a document so let me call this variable a document as well we will pass this document to this one and whenever this Loop is going to be completed we want to convert all of them the to list and whenever this map is going to be completed it will return all the values converted into this category model to this list and we simply want to return this list from this function now the snapshot will receive document for each entry convert that and us see we're returning this category model so whenever this complete mapping thing will be completed we will add to list and that list will be returned back so we not going to deal anything like first add a loader then display some error message then anything like that because this class responsibility is only to deal with the fir store and catch any relevant exception and Do Not Crash our application so once this category repository is also completed head back to the shop and in here the controllers right click on this controller create a new controller because the responsibility of the controller by name you can see it is that it has to control everything between design and the back end so currently the back end is the repository it is going to get this data or the error because this throw is going to throw the error message so controller's duty is to display a loader once the loader is completed playay a complete data or get the data once the data is received close the loader display the data and if there is any error display some relevant error message inside this category controller what we want we want to only fetch all the categories one time when our application loads instead of calling again and again whenever that screen will be open that will be very hectic approach and definitely we will not be able to avoid the reads number of reads from the fire store so to also reduce the number of reads and speed up our application we want to only fetch the record one time and want to reuse as much as we can so for that we going to extend our category controller with the Vex controller because we want to reuse this instance again and again inside our class so we have also learned the complete thing I've already talked about why we are using this getex controller and why we are going to create it get.in instance you can watch the previous tutorial category controller create a getter method name of this method is instance and what it is going to return get do find because first we have to create a category controller instance once it's created we can easily call category controller do instance to execute get. find to return us the same instance of this class again and again now whenever we want to load data only one time whenever this application loads we want to load data using the controller so to do that whenever the first time instance of this controller will be created using this on init method we want to call category repository which is going to return all the data once the is loaded want to use that data inside our application so how we can do that so first of all let me call category repository using get.put method so get.put is the keyword which is going to create instance for the first time call the category repository so this is going to create this instance for the first time and using get. fine later on because inside this class we also have a get. fine so when we know that already the category repository instance is created we can instead of using get.put we can simply call category repository. instance but for now let's use category repository like this and let's create a function fetch categories and in here we're going to load all the data of that category future of type void future is just because we have to make our function async void means that is not going to return anything but load all the categories name of the function is fetch categories it will be the Asing function and inside this function you can see I have already used try and catch and whatever we are going to catch inside this e we will simply use the T loader. error snack bar to display that error message and inside the error message you can see we have simply displaying a snack bar with a title and message and in the finally we're going to remove the loader so the first thing we will display the loader start loader of this category after that we are going to fetch all these categories from the data store it could be any data store fire store some API some SQL or anything then we're going to update the categories list so this is the update categories list means that we're going to create a list which is going to retain its status throughout our application whenever we want to use we will simply call this list and then we are going to only filter the list and receive the featured categories so no to reuse our variables throughout in our application instead of using some Global properties using a gex we have a type of list which is rx type of list so we going to use RX list it will be the type of category model name of that variable will be all categories and again to map or create an empty list we have to use the empty list over here and then again the type of that list will be the category model and you can see it will always be OBS why OBS again because we are now covered everything in the previous videos but just for the go through this OBS is going to change the state of the design whenever this all categories value is going to be changed so whenever there is change it is going to redraw our screens so that's why we're going to use this RX list and also it will retain throughout in our memory whenever we want to destroy this controller so until this controller is not destroyed these values will remain inside these variables so now to also create a loader we're going to use the same trick this loading variable is equal to false and also make this OBS to keep observing this variable Whenever there is change inside this Observer variable we will redraw our wigets in the design so first of all whenever this function will be start loading I'm going to make this is loading to two to use its Boolean value we have to call Dot value this dot value is going to actually Point towards the Boolean otherwise it will always point to RX po so to get actual Bool we have to use this value then to all the categories using the category repository we're going to get the categories in categories value and also call the weight sign and use the category repository do get all categories and that's it now this is going to return all the categories to us now to assign those categories to the all categories list we just have to call all categories do assign all value and we want to assign all these categories to this value which is all categories now we can use this all categories instead of calling again and again this cloud cery in the home screen the store screen in the whatever screen we want to use instead of calling again this Cloud cury we're going to use already F categories in our design and also to filter all the categories insert this control D to duplicate and instead of all categories we want to use this featured category and to get the featured category featured categories do assign all now we have to assign all the items which will be list of items so we are going to use all categories do where because we have a single property inside this we so using this we we will receive category a single category so using category dot is featured and and category do parent ID do is empty so by this way we can get all the categories that are not empty that are the parent categories you can see the parent ID is empty means that this is a parent category and also it is a featured category by this way we can get all the categories which are parent and then we're going to use do take to get only eight top categories do to list is going to convert that to the list and then we are going to assign all this list to the featured categories now we just have to make sure that we are displaying the categories or we trigger this on inet method where we are displaying the categories for the first time in our application for that head towards the screen head towards the home because in the home we are displaying categories for the first time and home is the screen which will be rendered whenever the application will be open for the first time so insert this home let's go to the home categories widget which is inside this widget over here which is home categories in the previous story if you remember that we just created a list view Builder to display all the values inside this widget but now we are going to first get all these values and display them on the design so first of all we need to call this controller inside this build method so whenever this build method will be created that controller will be wed again using get.put we going to create the first instance of this category controller or create a new instance of this category controller and that instance will be passed to this category controller over here now to use this category controller and to use that list we want to make sure that first loader should be started and when that loader will be completed our design should redraw itself without using a stateful widget using a gex to display all the categories that are being fished later on we will also be able to learn how to use the future Builder but because we are not using a future method over here so that's why we have to first wrap this size box into a widget which is the OBX widget this widget is going to redraw it straight whenever that OBS variables are going to be changed because it is a function so we have to create a function cut that size box from here and using a return method because we have to return a wiget inside this function so we will return this size box add a semicolon and now inside this method first of all we need to perform few checks if category controller dot is loading value is true so using dot value we will be able to find if it is true what we want to return we want to return loader that loader is the category Shimmer loader if you open this we have created the Shimmer effect in the previous tutorial inside the common widgets and in the shimmers you can create a category Shimmer which are going to use this default Shimmer class using this class we can create any type of Shimmer so inside this category Shimmer we are going to use the same size box same list VI dot separated that we are going to use inside this home category because we want to use use this list to display a list of same events so using that same column theault item count as six you can increase or decrease that we first display the image width height and radius is 55 then we have a size box to add space and again a shimmer effect for the text with a small height so that it look like that we have a text going to appear here if his loading is true we going to Simply return the Shimmer instead of returning anything else over here then we are going to check if category controller. featured categories do is empty again want to load a center child text we is going to display no data found because the background of this categories you can see is blue so we have to convert this using text team. medium and apply a color of white so we'll display a text no data found and else this is the else case if these two are not going to return anything we will simply return a size box going to display the actual data right now remove these hardcoded strings so let's call category controller. featured categories. l so whatever the number of this featured categories we will display the list view that much of times and then inside this vertical image text instead of displaying a default image title we want to display the actual data so first of all inside this item Builder will want to get a single category using category controller do featured categories categories at current index so inside this category we will receive the actual category model and using that category model we will call category do image and then in the title we going to call category. name and later on whenever this subcategory screen will be triggered using get. 2 feature we will pass the current selected category over here inside this subcategory and based on that category we will be able to get all the subcategories and their products okay once done let me run this application okay so our application is running and you can see a loader is being displaying over here but it is still fetching the record okay I can see the problem which is when you head towards this category controller we started this loading but we forgot to add is loading to false over here so let's add is loading value to false because whenever this finally is going to be called after all this execution it is going to remove this loader so whenever this is going to remove this OBX is going to listen to this is loading whenever it is going to be changed it is going to redraw and if it is false it is not going to return the Shimmer effect so let's save it again instead we have to rerun this again so it's loading and you can see we have only one record and we also have an error over here which is unable to load assets Okay the reason is that we are displaying image which is a local image okay now to convert this image into a network image when you H over this you can see we have a feature which is is Network image when you head towards this is Network image is by default Pro and we're using the circular image and it also requires is Network image property and if it is Network image we are going to use the CIA Network image if it is not the network image we using simple image to display the asset image so head towards this variable and inside when you hover over this by default we convert this is Network image variable to True previously it was false now let's save this again and you can see currently because we don't have any image and we have an empty string so that's why we cannot find the image and you can see the exception as well so we have a default icon and also in here in the first you can see we have ABC parent ID is null is featured is true so that's why we can see only one entry in the second is featured is true but is parent value is not null so when I'm going to convert this to null I'm going to rerun this again and this time whenever we're going to see fetching the categories it's loading and you can see two records but definitely we don't have an image so again it is going to display the default icons now where we are going to upload all these categories we're going to upload those categories from the admin panel that we will start right after this playlist in which admin will be able to upload the categories Brands products each and everything but for now if you head towards the category repository inside I've created a Dy uploader which is going to upload all the images from this local assets we first have to pass a list of categories to this model it is going to check the fireb storage instance using a custom class T fire storage service create instance of this custom class what it is going to do first of all we will Loop through each category we will fetch the single category and we will try to get the link from this assets currently we have over here and all the images that we have over here inside this local folder it is going to get image from data assets I've created a helper function which is this one we have to pass the path variable to this function and it is going to convert that path and return us the image data that we want to upload to the fire store so once we will get the data because we have to pass the string we will get a file over here and using storage. upload image data which is again a helper function which is this one it is going to get a path get image in the uint 8 list and then name of the image it is going to using the same Firebase storage reference dop put data it is going to upload the image I've created two variables the first one is image upload data second one is upload image file so this one is using image data this one is using image file so these are two different things you will get the image file using image picker from the image gallery and you will get the image data whenever you're going to upload files from these assets once you upload it it's going to return the uploaded URL back to the function called so we'll receive the URL over here inside the category do image we will replace to this URL and inside this fire store we going to call the database. collection of categories and in the document using the category ID that we also pass inside this model do set is going to upload that specific category ID and also the Json to the categories now we are want to get all these categories list inside the controller I pasted a ding class which currently is not working over here because we don't have the models but if you're going to download the complete flutter project you will be able to get this class as well as the buttons to upload all the ding data to the Firebase and you will able to display that data whenever you want so you can see we have all the dummy data we have list of banners user model then card data then orders and now for the categories we're going to call this model fill all the data Dy data inside this also pass images if if you remember we have all the images over here inside the image strings using that data we first created all the parents then we have a subcategories over here furniture for the electronics and some other categories so we have all the categories over here in a list and we're going to use this D data to upload all the images to the fire store we just have to pass the dummy data categories over here and it is going to upload all the data to the fire store now as you can see the categories are being displaying over here which are the featured categories now inside the store we also want to display all these categories inside this store for that go to the store and open the Stoller do inside you can see we use the default tab controller to First give the number of categories or number of tabs that we want to display so because this is static so we have to convert that into a dynamic value so inside this build method first call the same controller category controller do instance we are because this instance is going to use the get. find property and find the category controller and return to us we not going to use the get do put because instance is already created and then inside this controller we can easily call featured categories which is the list of categories we already populated and then now inside this categories we can replace the default tab controller with the categories do length and same way when we head towards over here inside this bottom we created a tabs and also in the tab bar view we created some tab views so now how many tabs and how many tab views we want we have to change that we created dummy tabs so remove these dummy tabs we want to display list of tabs So based on categories do map property now any here we want to display a tab so we just going to call the tab over here a child property of this tab we're going to use the text and use category do name to display text and then at the end we going to call two list because we have to return list to all the tabs and that's it Control Alt L to align now it is going to get the categories map each of them and as as a single entry it is going to return a tab tab will have a name from this category and also now we have to change the tab bar view same way because we don't want to duplicate all these things so remove all the childrens's again call categories this time we want to map so let's change this element category now we want to return the category tab each time inside this Loop and as a category of this tab Curr will not receiving a category over here so this time we want to receive the category add a parameter so we cannot use now category tab without using the category so inside we have a category property and pass the category and at the end we want to use do tool list remove this constant and now we are able to display all the categories so let's rerun this again because our application is running images are not uploading and now when I'm going to click on this store and you can see we have only two tabs with a two tab bar views so our application is still working so this is how we done with all the things now let let's talk about how we can upload all the demy data to the fir store so okay to upload the categories when you go to the profile if you downloaded complete project go to the profile inside we have a load data button and in that you will be able to see how to upload all of these so when you are going to click on this upload categories it is going to upload the categories then Brands then products banners then we have a relation that we will learn in the upcoming tutorials so you will be able to upload all the collections of this relation as well and once done you will be able to see all the data coming from your Play Store all the banners all the products and everything so if you're not downloaded yet you can download link is in the description so once again 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 are new to the channel don't forget to like And subscribe for more upcoming videos once again thank you for watching take care Allah

Channel: Coding With T

Views: 6,020

Keywords: flutter fetch data from firebase, flutter fetch data from firestore, get data from firebase storage, flutter get data from firebase realtime database, flutter display image from firebase storage, flutter display data from firebase, flutter ecommerce app with firebase, flutter ecommerce app with firebase getx, fetch category from firebase and display, how to fetch categories from firebase, category and subcategory in flutter, flutter firebase categories, firebase reduce reads

Id: D0cL-rpMSQ0

Length: 33min 48sec (2028 seconds)

Published: Thu Dec 14 2023