Firebase Storage Load and Display Images | Flutter

so inside this lib folder i'll create  a new folder and i'll call it services   and inside this services folder i'll create  a new file and we'll call it firebase storage   service dot dart okay now over here we'll create  a class and class name is firebase storage service   this one and it will extend the service now what  service it will extend actually get x service   since we are using get x now  at the same time we need to   import the libraries so first we'll import the  get all right and then we are good to go now   right inside this will create a method because we  want to up get the image from the firebase now if   you want to get the image from the firebase you  have to pass the name the name should be string so that's what we are passing and over here  first we'll check if the name is empty or not   if the image name is null then we're  going to return null okay all right   now we need to go ahead and get a  reference of firebase storage but   before that actually we need to install the  plugin so let's go ahead and install the plugin   so here we do firebase storage let's see what we  get and i think it got one and trying to run it   we need to wait and it's getting it now and  i guess we are done if it's so then we'll go   ahead and check our pop spec file we'll see okay  it's been installed the latest version i guess   so this has been done now after this we'll get  a reference from firebase storage the reference   type would be reference and we'll create a  getter and we'll return a variable over here   and we'll call it firebase storage since we are  doing a getter and then we have to get firebase   storage dot instance instead instance dot ref   now of course we need to import the packages  let's see if it recognizes or not it doesn't   so if it doesn't we'll manually import it so here  is this package and its reference so now it's   working now here we'll get the image url because  we are giving the image name and based on that   image name we'll see if we have an image or not so  here we'll use a try clause and if things go wrong   we'll fall into exception so here we do  catch and right after this would just return return null okay now instead this try clause   we'll try to get the image url and how to get it  to get that first we created this storage over   here storage object okay so from this one we can  access child actually you can see child property   now child property it takes the path so we need  to give it a path now we need to give it the path   the path name is the folder path now the folder  path is the path that we created early so   let's see so this is the folder folder name is  question paper images so this one so we'll go   ahead and write that one here we do question paper  images okay but now that's the part of the path   but we need to do more so here we do another  child now here actually we'll apply the actual   image name okay now image name is coming from  here actually we are giving the image name okay   now because this is inside a variable and object  so we need to use this one so here we do img img   name and then we do get oh sorry not get so here  we would do two lower case so it converted to   lower case and then over here because all of our  images in png format so that's what we are doing   and right after this we'll return so over  here we will get the folder name and the   image name together and then we'll save  it to a variable and we'll call it urlref and after that we can just return the download  path so this is our folder name and this is   the image name but firebase is more complex but  all you need to do you need to apply or give it   the folder name and image name and after that  you'll just return like this await url ref dot   get download url so this is the built-in function  inside firebase so we don't need to worry about   that one i mean firebase storage and of course  this is the actual path now we also need to save   it so i would call it img url save inside this  and then we'll just return okay return img url   now here uh because we are using a weight so we  need to work on this async so we need to put here   sync otherwise we'll get error as sync okay  now arrow should be gone now what what are we   returning here actually over here we are returning  a string as you see so we need to do a string   return but because this is a weight so we need to  wrap the string type inside a future so here we do   string but actually we can return it inside  we can wrap it around inside future object   and over here we would do string but now  the string could be null because as you   see over here if we have error so we return  null otherwise we'll return the image url   now with this you are pretty much set up how  to load images from firebase but now this is   firebase storage now with this you're pretty much  set up how to load images from firebase storage   but now we need to go ahead and display them now  to be able to do that we need to create a new file now inside the screens folder i'll  create a new folder and i'll call it   home okay now inside this home i'll  create a new file and we'll call it home   screen dot dart now here i'm going to create a  stateless class and we'll call it home screen all right and right inside this will return a  scaffold okay we might need to import libraries okay now for the body itself what  we'll do we'll go ahead and return   a list view okay list view all right now we are  going to return this one list view that separated   so all right here we are and this is the place  this is the home screen where we want to show   our image but remember we are loading images  using a service which is called getting service   and we are loading it over here  and returning as a string but   because this is a service so we need to get  this string this this string over here in a   controller but we don't have the controller so  now we'll go ahead and create a new controller   so we'll come inside this controller folder which  we have over here and inside this question paper   right inside this will create a new controller and  we'll call it quiz paper controller or question   paper controller question paper controller dot  dart okay and here we'll create a new class   and the class name is question paper controller  this one and over here it will extend get x get   x controller we're going to have to import it  manually so let's do that import get dart okay   all right and here we have a typo so let's fix  that so once again over here we'll override a   method and the method name is unready method  which we have seen before so here we'll do   unready so void on ready and we know it gets  called really actually immediately after   everything gets booted up now over here we need  to override super dot unready great now over here   we'll create a new method and the method name is  get all papers okay so here we do get all papers okay now here inside this first we'll create a  list of uh paper's name but we'll tag them as   image name so here we do list and here inside this  will have string type and here we do img name and   actually this name would be correlate to the files  that we have uploaded in the firebase okay so here   i'll declare a list and now each of them here i  will have biology and then i'll have chemistry then i'll have math and then i'll have physics okay so this is the list of string here but  as image name because these names are stored   in the firebase backend so yeah i'm sending this  image i'll send this image to the firebase backend   now inside this i'll have a try clause  and once again here i'll have a catch   for catching an exception now inside this  over here we'll just simply well we can   print something print e which means stands for  error but anyway now instead this try clause   will run a for loop okay so here we do four and  i could name the variable as a paper inside this   in img name or actually i would say img in img  name that sounds better so we'll look through   whatever is here and now we'll call the method  that we have created over here as get image   let me close this window we don't need that  so we'll call this method get image and at the   same time we'll pass the image name and image  name would be going from here in this for loop so here we do get dot find now because that's also  our controller which is get x service so here we   do firebase storage service this one okay and then  we'll do get image name now over here inside this   we need to pass this image name so here each time  as we look through each of the image name would   be saved in this variable okay all right now here  because this is an asynchronous operation as you   see it returns the future so here we need to do a  wait okay but now we need to save this information   every time we get the complete path of image  we are we need to save it to a variable okay   now here we'll declare a list actually  we could do it at the top over here   so here we do final all papers all paper images  like that okay now inside this we'll save a string   type variable because we're returning a string  as the image path okay now here that would be   a list so our list would hold string type and  it is also obs type since we are get using get   x because uh this would be reactive so this list  would be reactive okay all right now as we do that   over here first we'll save it in a variable  and we'll just call it img url okay   all right and i guess we need to tag a  sync let's do that yes right over here   okay so we pass whatever the name is here  and we get that name in a loop one by one   and we pass it there and based on this  name it gets the complete image path   from firebase and then it returns to this variable  now as it does actually what we can do we can   add it to our uh list okay so the all paper  images is a list but here that's what we do   now here we need to make sure that this is  not empty because what it returns over here   this could return something like null okay  yeah like that so we are telling that okay   we won't get null all right so now with  this this variable this variable over here   this would have all this so this variable  eventually have all the image path it means   that which means that that would be as a  string which also means that if we can look   through this one later we'll have the complete  image path name from the firebase and we'll be   able to view them now this is the time to go  ahead and call it so we'll call it from here   okay perfect and over here we can also define  something like this future void because we are   not returning anything all right now with this it  makes it nice okay so we are pretty much done over   here now would come to our home screen over here  and over here we need to make a lot of changes   while the first thing we want to do so we need  to get a reference of this controller over here   okay so this is the controller we want to get a  reference of this one so here what you're going to   do we cannot write here question paper controller  and here would say question paper controller   okay and would just simply do get defined so  it would return us the controller and save the   control instance in this variable great so right  after this here we do well item builder now item   builder would take build context and context and  over here we would do int index okay and after   that we are going to return right so that's part  of one part of it and over here we also have item   count so we'll use this one over here and we know  that using this we can refer to all i guess what   we have here let's see so all paper images which  is this one so we'll access that one from here and then we'll also do length so we get the length  now what about this one now this one the same as   build context the one we did early over here and  right inside this we can just simply return a size   box size box and here we do height say  height equal we could do 20 all right   and then our error is gone now definitely inside  this we also need to return something uh before we   go ahead and return i think we need a const over  here otherwise it would be cranky okay great and   then we have to return all right so now we'll come  over here now inside this we are going to return   something now we're going to return a clip our  right okay now of course this will have a child okay all right that's obvious  cold little cranky all the time   now inside this will have sized box as a  child so we just child sized box now for now   we are going to set height  and width for it actually so here we do height 200   and with say 200 now after that we'll have a  child for it and let's go ahead and do child and now inside this we are going to use  fade image widget okay now fade image   the good part about it that if your image is  too large fade image widgets helps you to wait   and show something different of course i think  we have a type over here we need to do fade   in image okay now it takes some properties well  the first property we could set over here as   image property and it will take a network image  network image we can see it over here network   image now inside this network image we need  to send the image url so we can access the   image url so here we do question paper controller  dot all papers images and then we just simply do   index over here now index would look through it  and take each of them and send it to this one okay   all right now this is another option that  another property that we need to fill this   is called placeholder this one the placeholder  is to show the images from your asset folder   as the network images are being loaded first  it will show you something that's in your local folder otherwise your screen might be white  or empty so here we do asset image now our images   are coming from assets images folder and we know  that we have as app splash logo logo.png okay all   right now we're gonna save it and after saving it  let's see if we could run our app or not okay so so now we're going to run our app so i'll restart  everything from the scratch and looks like it   started all right so now i'll open up the terminal  to see if we have any error or not so here is our   debug console okay so far everything is great now  as i'm going to click on this i'm expecting to go   to a new page which page home screen page the one  that we built over here now let's click on this   and see what happens now it does look like that it  says that this controller has not been found okay   so which means that we didn't inject the  controller okay so we need to find a way to   inject it because we just created this controller  but we didn't inject it now what happened   over here if you see home screen we are trying to  use it over here but actually we didn't inject it   now to be able to inject it we can actually find  our routes file so let's see this one over here   now inside this after this so we  can use a property which is called   binding and inside this we can use  binding builder let's see binding builder bindings builder actually okay and right inside  this we could do like this so here we could do   get the put get that put and inside this would  do question paper controller and you are good   to go now let's save it actually we need to do a  semicolon over here now let's save it okay okay so   we restarted our app and this time everything's  went smoothly so now i'm going to click on this   and we'll see what happens now of course we don't  have any error now why we don't see anything   well to know why we don't see anything let's  find our home home screen over here so what   happens you have to know that uh this question  paper controller it loads images in this one now   this image is actually comes from this firebase  over here now this page only gets called when you   click on this link over here when you click on  this button the button we had earlier this one   so when you click on this then actually that's  gets triggered okay and then it loads things   but it actually loads the thing but  after loading our ui doesn't know that   images are there it means images path are there  so we need to tell a way to the ui that hey   our images has been loaded so you go ahead and  display them now to be able to do that actually   we can simply wrap this listview builder  using obx okay so what i'm going to do   i'm going to uh so i'm going to cut it  from here so i'm going to cut it from here and first i'm going to use obx over here  and obx uh inside this i'm going to return   using a single fat arrow function and then  i'll put my list view inside this so with   this because obx is coming from get x so  right now my ui became reactive with this   so you i would know if there are any changes  in my variables okay now this this all papers   as you know that it is obs type okay  now i wrapped this widget around obx so my you i know okay this variable has changed  so let's see if we can redraw something on   the screen okay now this time we're gonna  go ahead and restart our app one more time   now here we are and we want  to see if we get images or not   now here this is our first logo that you have  seen and these are the four images that we had   in our firebase backend so let's go ahead and  check with the firebase back so these are the   four images this is the biology image the one we  have and this is the first one and over here we   have this chemistry image uh which is the second  one so yeah congratulations so we so far we have   made a long way and did everything smoothly and  congratulations for that one okay so that means   now we know how to so now we know how to load  images from firebase and display on your ui

Channel: dbestech

Views: 18,259

Keywords: get image from firebase storage flutter, display image from firebase flutter, firebase storage, firebase tutorial, firebase firestore image, show image from firebase, firebase image upload, firebase image upload android, ios image firebase, flutter firebase, firebase

Id: AQQJJw3zOqs

Length: 23min 25sec (1405 seconds)

Published: Mon Aug 08 2022