Flutter Fetch Data from Firebase | Fetch and Display Products on Grid

and welcome back to coding with today we are going to start a very important tutorial in which we going to learn how to fetch products from fire store including all the images of the product and how we are going to display that product on a grid so in general we are going to learn two things how we are going to fetch the products and we're going to display those products on a grid okay so first of all let's quickly have a look what we are going to create okay so our application is running if user is logged in he will be redirected to the home screen as you can see and data is loaded we have already learned how to fetch the categories how to fetch the banners and also add loader to it and also down below you can see today we are going to learn how to fetch the products and display in a grid as well as when you are going to click on any of the product you can see currently it other images are being loading and also down below we have all the data or details of this product this is a single type of product and this is a variable type of product which has variations when we are going to open this you can see we have different type of attributes we have a color and specific to that color image is also being selected and it is being loading and you can see specific green color of this size of image has been loaded also the black size then the red image is also loaded so this is what we are going to learn when you click on this image you can view this image in detail you can add all the dynamic images into the image slider then we have a discount tag we have a price range and also when we are going to select any of this image you can see the price range is being changed in stock status price of this variation currently this one is out of stock this one has a sale for this variation so this is what you will be able to learn in today's tutorial and you can see when we are going to switch any of the screen head back to previous screen none of the images loaded from the fire store but they all stay intact instead of reloading again when the widget will be rebuilt so this is what we are being learned in previous tutorials and also we'll learn in today's tutorial so let's get started we creating F e-commerce application and if you're new you can get the complete playlist link from the description or also you can get a complete code from the description below we have already completed all the previous first four sections in which we learn how to design how to create a project right from from the beginning till end we have completed every step to design this application and we are about to complete our playlist with a last section and also we are going to learn how to add different type of payment methods once this playlist is completed how to deal with the orders and also how to add and manage reviews and we will also learn after this playlist admin panel using the flutter so let's get started with today's tutorial the first of all today's tutorial is going to be breakdown into various parts because this tutorial is a bit long tutorial so I am thinking to divide it into two parts so how this tutorial will be break down so first of all we are going to learn how to create a database design because most of the people coming from the SQL backend with the SQL knowledge create databases using SQL approach but we are going to use the non-sql approach so that's why we're going to learn how to design a database in a way that any type of product can be incorporated into a collection do we need subcollections and everything related to the database will be discussed first so once we understand all the design we will try to convert that design into our model model so we will try to create a model and create its helper methods that are going to convert data to Json and receive data from Json then we are going to start from a beginning flow the first of all a design will be opened and whenever this design screen will be opened we have to fetch the data from the database so Journey will start from the design design maybe some event will be triggered or maybe some screen opens on that action we want to receive the data design is going to request to get this data from the controller controller's duty is to maybe check internet connection start a loader request the repository to get data or to return data into specific model structure because design only knows about this model then repository duty is to request data retrieval from the database using a specified query and when database Returns the data so this will slow backs down database will send data to the repository repository will going to send data or if there is any exception will send exception or data to the controller so controller will receive that handle the exception if any display a relevant message to the user and if data received controller is going to get the data and return data to the design and design will display the data so this is actually the complete flow of anything that we are going to do from design till back end so let's get started with today's tutorial first and foremost you have to open your Firebase console and in here you can see we have opened our firestore database and in that we have a new thing previously we learn how to add user with all these details the profile picture then we learn the banners categories and today we're going to focus on the products and you can see I have uploaded 40 Demi products okay in here you can see if we head towards the profile to upload all the data if you downloaded a complete code you will be able to get this option over here which is load data you click on it and inside we have six different options to upload different type of data so you just have to click on this categories it will be able to start loading all this data for you once that will be start uploading you will not be able to cancel it so just have to make sure that your internet is stable and everything is working fine same way you can upload all the products when you click on it you just have to make sure your Firebase is connected with your project and fire database is enabled also storage is enabled over here then it will automatically upload all the data to your backend so same like this you will be able to see all the 40 dummy products uploaded so let's talk about a single product so a single product can have a title over here then we have some price sale price thumbnail of that image maybe stock status SQ is stock keeping unit number and then bunch of other descriptions and bunch of other things uh you might want to display for a simple product that don't have any variations they don't have anything related to Brands associated with that product so if you don't have those things uh you're pretty fine you just have to add those fields simplyy those fields and you're done but if we have different type of Brands as well inside our project how we going to handle those so let's say if we have a brand this product is related to some company whose name is Nike and they have some image over here so these are some additional Fields products count and is featured they're not necessary to be here but we only require two things image id id image and name these are three things so we only require these three things because we want to avoid reads as much as we can so let's say a new company or a new brand registered in our store in the admin panel they created their account if you're going to go for the multivendor they created their account they give the brand name brand logo hopefully that brand logo and name is not going to be changed for most of the cases instead of only storing brand ID over here which we will receive in the back end and using that brand ID we again have to cury Brands collection which we will create in next video so from that brand collection we are again going to get the same details so instead of that avoid reads we are simply going to copy the brand directly from the Brand's collection saving in the admin panel and store it over here inside a map and you can see purpose of using a map is that we can store different type of keys as well this say string string string then we have a Boolean string and number so brand is stored in a way then we have list of images this is an array at the zero index we have a string string again so it is a list of strings right then we have a Boolean number and so before going to discuss with the product attributes you can see we have two type of products in our application the first one is a single type of product second one is a variable type of product single product has only these few things brand category price and some other things nothing to do with the product attributes and product variations because it has its own price it has its own sale price on stock stock keeping unit thumbnail title and all these things so that's it for the single one but let's say we have a product type which is variable product type so what does variable product type mean so if you see this let me go to the home screen in here we have a product which is this one which is a variable type of product so this product has some colors has some sizes different sizes this size is not available which is disabled these sizes are available so we going to call these things as attributes attributes of a product so if you head back to the design you can see the product attributes you can open this and now you can see we have a color over here same way we have a color over here as a title and then we have three values green black and red so we have green black and red three values of this one title at zero index So currently we have zero index and one index and we displaying that two things at zero index we have some title and values then at one index we have some title and values so these are the product attributes right over here so this is again a map you can see product attribute itself is an array at zero index we have map again these are the map values by this way we can add as much attributes as we want so if you open this you can see inside this map the first value is a string the second value is again an array so we can add as many values as we can as many sizes as we can so this way we can add product attrib rutes after that definitely we have a product type over here it will be only this is just for the demonstration but we will only have a variable or a single written over here in a string then we have the product variations So based on these attributes we will have to create variations in the admin panel so each variation is going to have specific attributes or collection of specific attributes right so the way we open this product attributes you can see the first one is color we will get the name from here the attribute is selected which is color and one value will be selected from here so which is color green and same way we have other attribute which is size and its value is 34 so we have attribute values inside a product variation so by this value attribute value we're going to identify which product variation we have to show whenever these type of combinations will be selected so let's say I'm going to select green 34 so select green and 34 is selected and you can see over here the price is 122.6mi specific variation 122. 6 and actual price is 134 for this variation and also it is in stock this means that we have 34 items in the stock so this means that this is enabled and When selecting these two attributes from these two values whenever these two attributes be selected we will match from all these variations and when we found any match we will display that specific variation in front of user it has its own description ID price stock keeping unit status and you can add as much details as you want in the variation same way whenever some other variation is selected you can say it is out of stock which is black 34 when you open this which is black 34 you can say it stock is zero this means that it is not in the stock and later on when we going to deal with the c tutorial we going to add it into the card click on add to back you can see selected variation is out of stock this means that this cannot be used 30 is disabled because we don't have 30 size for any of these not for the color green red or black so that's it I hope you understand the basics of the design so because we have everything in mind let's head towards our project and in here we are going to first of all map that data into the model so we are dealing with the shop feature so let's go to the feature models in here you can see we have a product model so let's open this this is the product model which has all these values created over here which we have just seen in the database collection so all the values are over here but to get the brand we created a separate brand model if you open this I have created also this brand model over here so it has ID name images featured and product count we have two functions over here we will get back to these functions you just have to understand all these things in order to execute so we have created a brand then we have list of image strings we will get the images over here and then over here you can see we have product attributes first of all so I have created a separate product attributes name and list of values name will be color values will be green GRE red blue black ET so this is two Json if we want to store the data into the Json we have to follow this approach and if we want to receive the data from Json we have to get the Json over here because Firebase return everything into Json format so we'll get the Json over here and it is going to check if it is not empty or empty then in the product attribute model if it is not empty we're going to get the name store it over here into this variable and again using list of string. form we will store all the values into this list same is for or case for the variations because variations have bunch of values so nothing to worry about we have all these values Constructors created but only attribute values that we going to match with the actual product attributes will be stored in a string and string format if you head back over here open the variation in the attribute values you can see we have first value is a string key value pairs key value pairs so these both will always be in a string and it is also a map so it is a map then we have string and string will be stored in the attribute values again G to Json is to store the data into the fire store but this is what we need we will receive the Json over here in the data first of all we extract the ID then we extract the price then we have stock keeping unit stock sale price image and attribute so these are the values that we are going to receive so convert it map of string string. from data will be received from this Json whatever we have stored in the attribute values will be received using this key store it over here how we going to call all these so let's insert back and see the Json format want to upload the data you have to use2 Json because we're not uploading and we are going to receive the data if you're going to use the stream you might need from cury snapshot method and if you are receiving from a document you will receive data in this function so first of all let's talk about this model we're going to get the ID get all the details from the key which is data of title data of stock we just have to make sure that these Keys should match all the values over here so if it is brand written over here we we should have to receive the brand with exact name right so data of brand should be received over here because brand is again adjacent format we going to receive this as adjacent in the curly brackets because it is a map so map will always be received as adjacent format so you just have to remember this so map is again adjacent first of all this all the data will be received in adjacent format in ajon we will have another Json so whose key will be brand value will be this right same as goes for these things so we have to receive this you can see we have a brand model. from Json which is receiving another Json remember always map is going to be used as adjacent so in adjacent we have key and value pairs key will always be string value can be anything value can be another map as well a string an integer or anything so we just have to remember this key so when we get this brand we will receive another Json so we'll pass this Json to this model brand model it is going to receive this Jon convert it and return this brand model over here and we will store that brand model to this brand value same we going to receive all these images data of images not is equal to null we will receive list. from and we will receive the complete list over here else we will receive nothing then for the product attributes we are going to get these product attributes because we have a list of Json in this case you can see this is a list and each value contain another Json you can see the curly brackets each list contain j so you just have to get all these attributes go to the product variation and you can see we have all these values over here we have to map those values so we will first get this data as a list of dynamic in the dynamic we have anything currently we have 0 1 2 3 and complete list inside this list we have adjon using map map is going to convert that data to a specific format so inside this EU when you hover this you can see we are going to receive a unique Dynamic which is basically adjacent and we will pass this to this product variation and product attribute when the adjacent will be received again it is a map of string Dynamic it is going to convert the data and return this product variation model that product variation model will be receive over here and this Loop will be ended all the product variation models will be received converted to two list and assigned to this list over here which is product variations we created a list of product variation models so I hope you understand the basics once you have everything created all the brands are created be careful while creating the models carefully create all the values once you have a perfect model you don't have to be worried about getting the data and displaying it to your screen so once we have all the data created the next step is to go to the screens inside the shop and head towards the home screen because inside this home we want to display in this grid the design grid which we have already created display products okay if I open the current project which we are currently working on you can see we have have a list of categories that we already fetched we have the banners and down below we have a static two products being displaying in the grid item count is two we have to convert it into four items and we want to get those items from our database so how we are going to trigger that the first step is to get the data so whenever this home screen loads into the database and this build method will be created we want to get all the data and displayed into this grid so to trigger that we first have to trigger the controller in that on init methods whenever that build method will be created controllers instance will be created and its on init method should execute using get.put we have already covered in detail why we using the get.put and get. find get.put is going to create a new instance for us create a product controller new instance will be created and on ined method of this class will be executed so using this class we are going to then assign all the data to this grid so first of all let's create this product controller inside this shop go to control rollers create a product controller inside this controller I created a new empty class which is product controller and extended with a gex controller so that we can use the gex features so first of all whenever this gex controller will be created we want to run its on init method so press control o search for on init create inside this on init method we want to call a function which should get all the data and assign that data to a variable which are going to use inside our application inside this variable we're going to get the data which is list of product models but it is rx type of list and at the end you can see we have the OBS so this OBS is going to make this list as Observer so whenever there is change inside this list we will be able to redraw our design using set state so let's create a fetch featured products because on home we have to display the feature products create a new method feature products is not going to return anything but we will be able to get all the products and assign those products to this variable and we'll use this variable inside our design this function will be Asing because we have to call Cloud cury inside this and because we have a cloud query so always make sure to use TR catch and then in the finally we are going to remove any loaders that we're going to start so also create a loader over here so this is again going to be OBS so when this is loading is going to be changed because this is observable whenever this is loading will be changed our screen will be redrawn so let's try to change this is loading do get get the actual value from this OBS we have to call the value so is loading is a type of RX bu if you over with this you can see it is type of RX bu and to get actual Boolean value we have to call the value and pass through it means that start the loading and then we're going to stop that loading inside the finally whenever this function will be completed in either case of completing the try method or the catch and if we catch anything we're going to display Aros snack bar which we have already created over here inside the loaders do Dart using static method we can directly call El loaders and inside we have a method error snack bar which is simply a get do Snack Bar Method so we'll display that with the title and messages e do string whatever message we received once loader started we want to fetch the products first from the repository and then we are going to assign those received products to this featured products variable so to do that we first have to create a repository so we will send the request from here to the repository so we going to use this variable using again get.put we will be able to create a new instance of this class product Repository which is over here and then using the a weit sign we going to call the product repository dot this function which we are going to create now get featured products it is going to return the products and we will receive all the products over here then to assign the products to the feature products we have to call feature products do assign all and assign all the products to this now let's create method in the product repository inside the data repositories in the product I have created empty class which is product repository extends with a gex controller it has already upload Dy data function so if you want to see this we're going to create a helper function from the Firebase storage service the service that I created we're going to use this function to get data from the assets assets are over here so we have all the images inside this assets you have to pass the path of this asset and it is going to return the image that we'll be able to store to the server then using Loop because we're going to receive all the products the dummy products that we have already created over here in a list and added ay data on all the models you can see product attribute values then we have product variations 1 2 3 and so on after that we have other product models same way we have lot of products Loop through each product get the thumbnail using the method that we just so inside this fireb storage get this thumbnail using a storage uploader that we already learned to upload images inside the fireb storage upload images get the URL sign URL to this thumbnail store this data also if you want to upload all the list of of images you have to Loop through all images with the same procedure then upload variation images and once done you just have to upload all the data using 2 Json and it is going to store each product individually inside this for Loop okay let's close this now first thing we have to get over here is a Firebase instance which is Firebase fir store. instance and inside this we going to get the future products we have created a function which is going to return list of product models and its name is get feature products it will be async return will be future because it is going to call the cloud queries now first of all we going to receive a snapshot of documents from the database because it is a cloud query so you have to add a weight sign then call the database dot you can also directly call Firebase fire store. instance do collection and name of the collection is products make sure you have to write exact names in order to get the data now we only want to get the feature products and we only want four feature products so we going to use a we Clause inside this where we have to call is featured also make sure these names should match exactly with the name in the database fora is equal to property is equal to and pass the value to true this is going to get all the products which are featured value is true and then we only want to limit the products to four this is going to return the four products and using the get we will be able to get all the products using this query this is going to return all the products at once but if you want to use a stream you just have to write snapshots so stream will be learned in upcoming videos don't worry about it so we get all the products receive it over here inside the snapshot now we want to convert because we receive a Jon a document snapshot type of Jason you can see map of string Dynamic so this is what we receive we have to convert this and map it on our models and return that complete list of product models back to where it is being called so let's return snapshot. documents because we requested a lot of documents so it is going to return us all the documents so get the documents and on each document we are going to run a map which is going to convert each document into format which we going to return over here if you H this e you can see it is a map of string Dynamic so now we have to pass this Json using product model do from snapshot pass e to this one and when this all operation will be completed we're going to use do to list and that list will be return using list of product models so whenever this from snapshot is going to receive a Json in this format which is map of string Dynamic that Json we will get this data to this you can also add additional check before running anything if document. data is equal equal to null you can simply return an empty product model product model do empty function it is going to return empty model instead of executing everything over here so this is the empty model that we already created and we are going to return it from here so once we receive this we know what I have to do we have converted everything map it into the product model and that product model will be returned back over here each time inside this map and when all all these items will be executed we will convert it into a list and that complete list will be return over here so let's head to the product controller error is gone now we're going to receive all the products assign those products to this OBS list and if we go to the home R do inside using this controller we can assign the products dynamically so first of all let's wrap this widget press Alt Enter and wrap it with a Observer widget OBX this Observer is going to trigger set States for us automatically Whenever there is change in the observable variables it requires a function we have to cut everything and inside we have to return a widget that widget will be displayed in this design so we have to return the same grid just like this but we are just going to add some other checks over here if use the controller do is loading do value if it is true if it is loading we want to return a simple loader you can display circular progress indicator but we already created a loader if you go to Commons in the widgets you can see see the folder shimmers you can see a vertical product Shimmer that we have just created it is again using the grid style width is 180 using a size box creating a column first created an image using the default Shimmer effect that we also created over here so we're going to use this class and create an image create a text with a small height then again another text with a small height with a different width once created we can use that vertical product Shimmer and add a constant so if this variable is loading we are going to return this V in the next scenario if we have nothing inside this controller feature products dot is empty if feature products receive nothing when the loader stop this if will be executed if they are empty we want to display a message that no data found using a text and a center widget and in the L scenario if these both fail to be loaded we are going to Simply return a grid currently it has static values so change that with a controller do featured products do length add a comma over here and also you're going to modify ify this vertical product so that it should receive a product create a product model import that model over here every time whenever we're going to call this now we have to pass a product then inside over here we are going to call controller. feature products at current index now this current index is going to be received from here inside this grid layout and remove this constant sorry we have to first create a product and then pass it okay now each time inide this Loop we are going to send a product to this vertical card we have to modify a few things inside this design first of all let me display this grid layout that we have created if you're new you can watch the grid layout over here we have item count which we can pass we have main access extent item Builder I suggest you to watch the design tutorial in order to know these things okay once we have a product we have to pass the same product to the product details screen in order to display the details of that product so inside this product detail screen we again have to create a product over here import it and make it required inside this product detail screen and now in here we have we have to pass the same product remove the constant and by this way when we are going to tap this we will be redirected to the product detail screen with an actual product details then inside this container that we have already designed we're going to replace the things with the real values first of all if we talk about the thumbnail image we have to replace this static image with the product thumbnail image remove this constant so product thumbnail image will be displayed as the main image then over here we have a sale but we are going to create a function that will return the S percentage value and we will display that percentage over here then we have a favorite icon button we will deal with in the next upcoming videos when we're going to deal with the favorites then in the details we have a static title so let's replace this title with product. title we have to replace this constant and also in order to display the brand over here we are going to call product do brand. name of the brand called brand can be null so let's add this sign over here add a constant then for the price we have to check two things instead in of displaying a simple static price we have to see if we have a single price a product type is single we have to display a simple price over here and if there is a sale price of this simple price we also have to display a sale price and same if we have a variable product we have to extract the minimum and the maximum price of that product and we have to display it over here we are going to create these functions in few minutes and then this is the add to card button that we will learn in upcoming tutorials how to add elements to the cart so first of all let's try to create few functions instead of creating the design we are going to create those functions in the product controller so first create instance but this time we are not going to create a new instance using G.P but we are just going to find already created instance product controller do instance this is going to return the already created instance using get. find and we can easily use that over here now inside this controller we are going to create a function get the product price or the price range in a string format so we going to call this get product price and pass a complete product to this so first of all we have a smallest price and largest price smallest price is double do infinity and we'll try to keep reducing this price as lower as we can and largest price is zero so you have to keep on going to the upper side now the first scenario is we don't have any variations we have to get the price and the sale price so we're going to call if product do product type is equal equal to product type so this is the enum that we created single and variable also when storing the data we are going to call this same enum and store the data so in order to check if we have a same product type we have to call product type dot if it is a single just use do two string if you are storing data in this way product type. single you have to extract it and equal with the two string if you are storing data using name then you don't even need to use this two string right so if product type is equal to single we have to return a string so first check if product do sale price is greater than zero this means that we have something in the sales so we going to return product. sale price and in the else if there is no sale sale price is zero or less than zero we're going to return the actual price and because we have to return a string so let's wrap the complete if statement in this and return two string at semicolon so in short string will be returned from here in the next scenario if we have some variations let's use the lse statement now we have to calculate the smallest and largest prices among each variation so for that we have to run a loop on all the variations so run a loop we have to create a variation variable in product do product variations because variations can be n so add exclamation mark we know that we don't have a product type which is single so this means we have something in the variations you can also add additional check over here if you like in here we want to consider sale price or the actual price so in order to compare the price we first have to get which price we want if there is some sale at this current variation we want to get the sale price if there is no sale we want to get the actual price so we're going to use the variation if sale price same way we have used over here if there is sale price any if it is true we're going to return the variation sale price else we going to return the actual sale price so this will be the price that we're going to consider if it is smallest or largest update the prices if price to consider which is the current price is less than the smallest price this means that there is some price which is smaller so we have to assign that smallest price is equal to price to consider currently the smallest price is infinity and the first item we receive is let's say 100 so that 100 is definitely less than the smallest price so smallest will be 100 in that case and same for the second one if price to consider is greater than largest price which is zero largest price will be at the start will be the price to consider and by this way we're going to run the loop and at the end we will have a smallest and largest price in these two variables and if by any chance we have the same price which is smallest and largest price we have to return the same or a single price so if smallest price is equal to largest price return largest price do two string and else otherwise we're going to return the smallest price then assign if you want to display a sign you can use any sign and then a largest price so from smallest to largest now this function is going to return us price range or a single price we just have to pass a product model to this function next we also want to calculate if there is any sale percentage on this product so create a function which is again going to return a string or maybe null we're going to receive two prices orig price and a sale price in this create the if sale price that we receive is equal to null or sale price is less than zero means there is no sale we're going to Simply return N means we don't have any sale currently on and if also original price is less than zero this means that this cannot be a true statement we will return null from here next in order to get the percentage of the sale we have to get the original price then minus the sale price divide it with the simply add a percentage formula you will get the percentage convert that percentage to string as zero so that we don't have any something like 26 point something number so to avoid that you have to add a zero so that you have fixed numbers like 26% 27% Etc return that percentage the last function is to get the stock status get product stock status is going to receive a stock in integer format and if stock is greater than zero we will return in stock otherwise we're going to return out of stock string message so once we created all these functions let's head towards the design which is the product vertical card we want to display all these using this controller inside the sale tag we have to pass it so we can even get the sale over here so we calculated controller do calculate sale percentage pass the current price of this product and also the sale price of this product is going to calculate sale percentage and return the sale percentage over here inside this variable we can replace this with a sale percentage so just keep the sign call the sale percentage over here and that's it so we have the sale percentage created then favorite button is also done we created all the details then we have the price zone so this is what we have to modify we also have to modify the design incorporate these changes so first of all we have to display a price over here controller. get product price and we have to pass the product remove this constant now this is going to return a string either a string of range or maybe a simple string that will have a single value but to display a discounted price because this is the actual price now to display a discounted price we have to create another variable inside this and also the range can exceed its limit so we have to wrap this padding with a column because we have to display two prices on top of each other so we're going to use the column and also we going to wrap this column with a widget which is flexible so that in order to have a long price our design should not crash if you see this we have currently a small price but if we have a price range so it might enters into this add to card button So to avoid that we're going to use this flexible widget over here okay once done we have the actual price and we just have to add if statement to check we have anything on the sale or not we are only displaying the sale price if we have single product if you want to display a price range as well you also have to create another function but for now createe statement product type is product type do single two string and also the sale price is greater than zero this means that we have something on the sale we want to use the same spreading over here as a widget we want to change how this button will look like so use a custom text style will be label Med medum and also align through means that this price or this actual price is no longer exist so you can see we're displaying actual price over here product or Price which will be the actual price now let's try to run this application and let's see if there is anything that we need to change we are using the product vertical card multiple places just to run this code we are going to change because we have to now pass the product so I'm going to pass product model. empty for now so that we're able to run the complete Command okay so I hope we are done with the changes now let's try to run this application okay you can see products has been loaded four products been received but we have to change these images so that images can be loaded as well we have discounted prices at the top we forget to add dollar sign along with these prices and also we have a one price range product also you can see the yellow tags means that we have some Dynamic discount rating so let me minimize this head towards this vertical card inside this rounded image we have a variable which is this network image make it true let's save it open this and you can see they are being loading and we have all the products being displaying over here they are ready but when we going to click on any of them you can see currently we have some static details these are not selectable also these images are not being selected we cannot open these images this text is not Dynamic so this is what we're going to create in the next tutorial in part two there's one more thing that you need to change you can see these circles are bit small as compared to to all the images so in order to fix this you just have to add width as 180 of this rounded container and also you can wrap this with a center widget just to be careful let's save that and now you can see all the sides are perfectly aligned we don't have any extra white space over here and also images are in the center 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 don't forget to subscribe and hit the Bell icon to get notified for all the upcoming changes you can also get the complete code link is in the description or you can get the complete playlist link from the description as well or from the right top Corner once again thank you for watching take care Allah h

Channel: Coding With T

Views: 3,751

Keywords: flutter fetch data from firebase, flutter firebase, flutter firebase tutorial, get data from firestore flutter, flutter retrieve data from firebase, fetch data from firebase firestore f, flutter product app, flutter ecommerce app with firebase, ecommerce app flutter firebase, flutter ecommerce app with admin panel, flutter ecommerce app product, flutter firebase firestore crud operations, flutter firebase firestore read data, read data from firestore flutter, coding with t

Id: B-Zycy24Vno

Length: 38min 33sec (2313 seconds)

Published: Tue Dec 19 2023