Flutter Fetch Image from Firebase Storage Database and Redirect Seamlessly

am Alum and welcome back to cing with t today we're going to learn how to fetch banners and display banners on any type of flutter application and also we are going to learn how we can navigate to any other relevant screen whenever this Banner is going to be clicked so let's get started so our application is running currently loading its data and you can see the banner is loaded when we are going to move to the next Banner you can also see the banner is also loaded and now once these Banners are loaded they are cached because we're going to use the cach image to cach these images instead of loading again and again same way in the previous we learn how to add categories and we also use the cache Network image to display all these images same way we going to learn how to pitch data especially these images or the banners from the Firebase fire store and also definitely images inside the cloud Firebase storage along with that the plus point that we going to learn the roots app Roots inside our application in flutter when we are going to click on this icon you can see it move us to the cart screen currently the cart is empty so we cannot see anything head back let's select the banner it take us to the addresses screen so it depends where we are redirecting users so when we tab the third one we redirect it to the wish list so it depends where we are actually redirecting user to whenever this card is going to be selected so this is what we are going to learn creting flutter e-commerce application and we have already completed all the design part in first three sections and also we have completed the back end of login and currently our user is logged in we also see how we can redirect user based on its uh login or log out we also learn the local storage or the share preferences to store phone boarding data and also remember me passwords and bunch of other things in the section four so we are in our last section which is Section Five and in this we are about to create the second video so let's get [Music] started studio and we are inside our project we created for our e-commerce application and inside you can see see we previously learned how to create the categories and we talked about how to get all the categories and reuse the categories through in our application instead of calling again and again to reduce the number of reads then also at the end we talk about how to upload the dming categories but for today's tutorial when you open the home application inside the shop features when you open this home do dot inside you can see in the body we created promo slider which currently displaying three banners by default so when we are going to open this widget it is getting three banners we are passing the banners manually we cannot change them if you want to change them we have to change them in the code and also on top of these banners we are not redirecting to any screen and if you see for the bottom navigation dots we are using a home controller and using that home controller we learn how to create the navigation dots and redirect and jump to the next dot whenever the banner change inside this home controller we simply created a one function and the carousel index but when we started our previous section especially the back end we learn that we cannot put anything in any controller if we take the example again design should be in the design screen controllers should be managing because by name you can see controller's duty is to control things between design and the back end so the back end is in the repository repositories only dealing with the Firebase fire store if you're using SQL maybe apis anything so repositories are for the back end then model is going to map the data from Json to the model so that we can use in our application and the duty of the controller is to control the design maybe start loading then check the internet connectivity and get data from the repository once the data is arrived maybe some exception arrived cat the exception and display the relevant message to the user so these are the functions of controller so we cannot add anything in any controller right so every controller has a specific job so same way if you watch the previous tutorial we created a separate controller for the category it Duty was to add a tri Catch start the loading get data from the Repository tree assign that receive data to the variables with RX variables also filter the featured category data catch any exception and finally remove the loader so this was the work of this category controller so same way we want to handle the banners so it's a good practice to create a separate file for the banner repository for the banner controller and for the banner design so if we see the banner design which is the promo sliders this means the design is ready now we need to create a controller I've created a banner controller which is empty Banner controller extending with the gex controller if you want to extend it you can if you don't want to extend it it's your choice so if we see the home controller we need to extract these two methods because we don't want to use home controller for the banners instead we want to use Banner controller for the banners okay now we have the controller uh duty is to also get all these banners and display on the screen before creating this function go to the home controller let's remove move this in the category controller as previously we created a function so let's copy this and paste it over here it duty is to fetch all the banners we'll definitely use the loading play all the data so import loaders same way we're going to copy the is loading variable which will be triggered whenever this loading will start or Stop So based on this variable using OBS if you watch the previous Tut you know that OBS is a type of variable which has a return type of orx so you can see it's Boolean type but it has a return type of orx means that using gex we can use the OBX widget to identify Whenever there is change inside this loading it should call set State automatically and redraw the design instead of calling the category repository we have to create a banner repository and get all the banners so let's remove this head towards the data in the repositories we have to create banners repository same way we created categories Repository inside this Banner repository it has a name Banner repository and a static get find method and as a variable we going to use the Firebase fire store instance which is rivate and we going to extract them in this function but before we need to get the model on which we're going to map all the data we received from the Json in the previous tutorial we learn how to use the categories and upload all the categories data from the application and to see that if you head towards the profile and down below you can see the load data inside you can see we first uh learn how to upload all the categories Brands products and over here you can see the banners you can upload the banners as well using this code if you want to get all this data and want to upload the data you can download the complete filter project link is in the description okay so any here if you head towards the banners you can see we have a bunch of banners over here so it has three properties the first one is the target screen on which we are going to land whenever user is going to click on this we want to land on the search screen this is the image URL of the banner and is this Banner is active or not so create it inside the design currently we working on we have to first create a collection name it banners click on next Auto ID the first one is image URL currently we don't have any image URL so it's empty then we have active value it's Boolean it is true Target screen is search when you click on save it will be created like this and when you're going to click on the banners property whenever you going to click on this banners over here so it is going to use this Dy data class and it is going to upload all these banners automatically into your database whatever the database connected then we have the Dem data of user card orders categories Brands brand category relations product category relations then products itself the list is keep on going so this way you can upload all these data you can download the code link is in the description okay now in order to map this data into or flutter application we have to create a model which will have the three type of properties so I've created a banner model inside the features in the shop and in the models you can see we have a banner Model A simple class with the three Tech Fields image URL Target screen and Boolean of is active or not then a Constructor and then a map which is going to convert the data to adjacent format and upload it on the store and these values should be same as we have over here so these variables should match the variables over here so once done this 2jon is going to convert the model data and map it into adjacent format and return it to the Firebase and this model is doing vice versa it is going to receive adjacent into a document snapshot we will extend this if you remember we learned that the map is actually adjacent which is key and value pair so key will always be string value will all be dynamic so this is basically adjon so we'll extract the adjon and and using a key data of image URL means that whatever the data inside this key we want to store it inside this variable and we will return this model so once the model is ready head towards the banner repository and create a TR catch with the function which is going to return a future type of list of banner models because we don't have a single list but we will have multiple banners so that's why we need to use a list list is an array and also we have to make it future and aing because we have to use a cloud cury to make it async we have to make sure that this function is async so return type will be future and then we going to use the custom exception handling exception handling is already explained in detail in the previous videos now create a cury over here cury is simply calling the database which is Firebase fire store. instance. go to collection collection of banners that we just created and add a check where active a will be Capital this keyword or the this value active is equal to two so wherever this value is to get all the banners where they are active once we have a result in a document snapshot we will call the docs to get a single document each time because these docs contain a list of you can see a list of Yury document snapshots using a Mac property we going to extract a single document snapshot each time because we have a single document over here inside this document we have ajason so we'll pass this document to our model Banner model. from snapshot is going to receive it and return the banner model so by this way once we have the banner model returned we will do it for all of these values using maps and once we have all the values mapped and we going to use the do two list to return the list back to where this function is called so our repository is almost completed our model is completed now head toward this controller and in here now we want to call that so first and foremost we're going to create a list of banners that we will be using using again and again inside our application once we just have to initialize this list and then we want to reuse this list throughout in our application we required instead of calling the fetch banners method again and again to call the database and receive the data from the fire store So to avoid the reads we are going to create a simple list this list is going to get all the banners and that banners will be reused so whenever there is change inside this list using OBS definitely we will be able to redraw our design and display a relevant message inside this fetch banners get all the banners by first calling the banner repository which we just created create it instance using get.put once instance is created use the fetch Banner method to get all the banners and make sure to call the weight sign because otherwise you will not be able to get the banners then we have to assign those banners we have to assign those Banners To The banners above using do assign all property and we're going to assign the banners we have just received and also make sure to call this because these are the banners and also this is the banners name so you have to use the this dot banners assign all we have to assign all these banners we feted to this list once done we are done with the controller so controller will start the loading get all the banners assign all the banners to this list not returning anything once assigned it is going to in the finally remove this loader now head towards the promo slider instead of calling the home controller we're going to use the banner controller using get.put we will be able to trigger the event and one more thing whenever our application will be launched this design will be created for the first time promo slider will be called for the first time and this build is going to create the design at that time we're going to call the get.put to create a new instance so whenever we know that new instance will be created for the first time on inet method will be called so press contr o to override and H it enter to create override on init method now inside this method we also want to call fetch banners because whenever that design will be loaded new instance of this Banner controller will be created and automatically this on init method will be executed all the fetch banners and without doing anything these banners will have all the banners assigned from this function instead of getting banners from the home screen just remove this because we don't need to get the banners from here instead of getting banners from there we now have the banners inside controller do banners and again we just want to use the map property because it is going to map or start or run a loop on each of the banners so instead of URL now we have a complete Banner so inside this rounded image as a image URL we're going to use banner. image URL and next we have to call the is Network image inside the rounded image and make it true because all the Banners are coming from the network and then we have to call the onpress property of this widget and we're going to move to the next screen using get do2 named property not to get do2 but we're going to use the get do2 named property press the control R to align the code and inside the get do to name we have to provide a string when you H over this you have to provide a page itself in a string and also in the arguments you can provide anything so we also have a Target which is banner. Target screen this is a string on which this click will take us so also in the banners below we have to call controller. banners length so whatever the number of these controllers we want to display the dots as much as we have length over here okay you might have a question that where exactly we are going to get this target screen so we are heading towards that just give me a minute inside the home RO do we don't have to pass any Banner now if I open the Dy data class which I've already created inside this if you want to follow this approach so that's why I showing this banners list over here so it is a demy class A function named as banners it's not a function but it is a list list of banners and inside this list I have created almost 7 to eight banners and in each Banner model I have passed the image URL banners we have already created then we have a Target screen so this is what you have to pass over here so this is the target screen that we are going to create just now and then active or not active will be passed as well now to pass the target screens let's close it inside this live folder I'm going to create a new folder name it route inside I've created two classes the first one is the routes class routes. Dart and inside you can see a simple class t- routes contains bunch of static values which are pointing to some variables some strings so these all are the strings the reason to use a static over here is TR routes. home will be directly called instead of creating new instance so using these t- routes we can easily call any screen because get do2 name exactly require this thing to redirect to the relevant screen okay fine we're going to pass these routes to to the variables exactly this is a string that will be stored inside our database if you open this you can see I have added Target screen as forward SL search is going to be added over here when you head towards this routes you can see the for/ search is over here now we stored this data but we also have to inform the get library that this is the approach that we are going to use for that we have to create app routes list of pages because we have to use the get do2 named it is going to redirect us to some relevant page so how it is going to redirect us to some relevant screen all the screens are displayed over here using get. page feature name is the same name you can see we have over here using Tes do list of name and each name contain a page itself right you can see each name has a specific page so once we have all these Pages inside the main rart we have app in which we have a get material app inside this we have to declare the pages so when you write get Pages you can see we have to provide list of pages which are the get pages so provide a list the one way is to add all the list over here and the second way is to create a separate class and get all the pages from here so we are going to use app roots. pages it is going to get all the list and assign the list to this get Pages now get material app knows which page means what we just have to call the name of the page and it is going to automatically redirect us to some relevant screen okay here I've made some changes added a image URL and also Target screen so now let let's try to run our application okay so our application is running and because user is logged in so you can see we have redirected to the home screen but we cannot see any image over here because when we receed the data at that time our controller was unable to get all the updates so controller do Banner was empty that's why we cannot see anything over here and is loading was true but we also not using that so whenever the banners receive this data we want to update our design so to do that on top of this column on top of this whole widget we are going to create a widget which should handle loading and uh reset the new state so wrap this column with a banner which is a widget which is the OBX widget which is going to redraw the straight whenever any of the OBS variable is going to be changed so it has to be a function extract all the design and inside this function we have to return a widget so we are going to return our column widget Control Alt L to align the code now inside this OBX function we have to check few more details the first thing is a loader if controller do is loading do value is true if it is true we want to return a shimmer effect loader but we have created a dummy loader over here using Shimmer property if you want to use it you have to add this package then we have created a custom Shimmer we have to define the width and height and whenever until this is loading is true it is going to return this Whenever there is change inside this is loading this OBX is going to detect a change it is going to redraw the state a complete design inside this function and it is going to redraw it again whenever it is going to false it is not going to return this design next it is going to check the next thing which is that if no data found it is going to check the controller banners do is empty it is going to return that we have not found anything and in the else case we're going to return our actual column extract it from here now let's rerun this code and this time you can see our screen appears currently we can only scroll with the one screen because it have no other child and also you can see a single dot the same way we currently have two categories at the top just for the learning purpose and at the below we can have only one Banner we extracted the same way if we are going to add more details or the more banners over here we will be able to see all those banners I've added one more okay so now you can see it loads two designs the first one is this one and the second one when you hover over this when you click on next you can see we have two dots and also we have two designs so with the two different sizes we are able to scroll between these two banners when we are going to click on this first Banner so we are redirecting to this card screen and when we are going to click on the second manner we are able to redirect to the store screen right so this is how we fetch all the data and redri to some relevant screen okay so that's it for today's tutorial I hope you learn something new in the next tutorial we're going to talk about how we can get the product product details and how we can display all the products on the grid screen so next stor is going to be very informative if you learn something new please like the video and if you're new to this channel don't forget to like And subscribe for more upcoming videos once again thank you for watching and you can get the complete code link is in the description or you can get the complete playlist Link in the description or from the right up corner so thank you for watching take care Allah

Channel: Coding With T

Views: 4,127

Keywords: fetch image from firebase storage database, fetch image from firebase flutter, fetch image from firebase storage, flutter get image from firebase storage, retrieve image from firebase storage flutter, Fetch image from firebase storage database flutter, firebase storage, flutter firebase tutorial, get image url from firebase storage flutter, flutter firebase storage get image, firebase cloud storage flutter, retrieve image from firebase storage flutter and redirect to other screen

Id: ggSmEcAyiPE

Length: 20min 48sec (1248 seconds)

Published: Sat Dec 16 2023