Get image from Firebase storage using Flutter Web app | Read image from cloud Firebase storage

[Music] hi everyone welcome back again to another friday tutorial and in this session we'll be discussing about how to retrieve a data that is a image from the firebase storage and display them in our flutter web application okay so we'll be having a image which you see here right now in this right ui screen that is the flatter logo itself so we will be having a flutter logo in our firebase storage and what we will be doing is we will be just getting our will be making use of the download url function and we'll be just retrieving that image from the firebase storage and display and will be showing up in our ui screens okay so this is what we'll be discussing in this video tutorial and with this idea let's move on to the coding part well this is for firebase console and instead the storage option you will be able to add files or you can upload your files over here with the help of this upload file button you will be able to add files over this storage option and i have now added a single image file which is the flatter logo and what we'll be doing is we will be just retrieving this image from our firebase storage and display them in our fretter web app okay and additionally to get this all done you need to change the rules of your firebase storage that is initially the rule would be like i hardly remember it should be firebase or dot not equal to null i think so so but you just to have a read write access and for a debugging purpose i have just modified the rule as read and write as true that is i just want them to allow the read and write options so i just set the rule i just changed them in such a way but this is just for debugging purpose if you want to have a real-time app then you just need to provide a strong rule to ensure the privacy okay and after this is done you can just go back to your vs code and start with the coding part well first we need to add two dependencies in our perspective file and the dependencies are firebase core and firebase storage and always checks for the latest version as for the video recording date these are the latest versions and after adding these two packages in your prospect you just need to go to the web folder and instead which you will be having index.html file and within which you need to provide your firebase credentials you can get your firebase credential in your firebase console so inside the project you'll be having it will be having your credentials that which includes the api key and the project id and so on just place them in this folder that is inside the index.html file and after adding these two things you can just move on to the main.file and we have a main.file over here and inside the main.file you just need to add these two lines which is ensuring sliced and insulis app and after adding these two files let's move on to the my home page this my homepage is just the ui stuff i have a simple ui which in turn will be returning a future builder that is responsible for building up the image okay so as far as the firebase is concerned we can either go for stream builder or future builder but in this case i just stick with the future builder okay and the future what i have provided is the function call this function call is written down in a separate class that is in a separate file here we get this function there is the get data as a function which is responsible or which contains the code logic for getting the image from the firestore okay from the firebase storage and inside this function it is an async function you can see here and it just it returns a type of future okay and this in turn makes a call to another function which is written down here and this is the core logic of the code snippet which is responsible for getting the image that is the url of the image from the firebase storage you can just make use of the firebase storage instance and pass in the file name okay in our case it is flatter.png you can just pass in the image file path as well and make use of the get download url this will be providing a string that is the url which is of type string okay which is later returned as a result of this function call okay so by calling this function will be returning the string of the image which is provided in the firebase storage now let's go back to the home page and which is so the returned image url is captured in the snapshot and with help of snaps or the data will be able to access the url of the image but the snaps of the data in turn is an object but the image.network widget will be accepting the source as a string so in order to convert that object into string we have made use of two string method and with which you will be able to to convert the object of url type into a string which is then displayed up in the ui screens okay so we have a simple two conditions that that is we'll be checking for error conditions if it is error it will be returning a text widget stating something went wrong or else if the connection is done and everything is a success one then in such cases we will be returning the you will be building up the image widget or else if none other conditions get satisfied then we'll be just simply returning a circular progress indicator okay so it's very simple now let me just quickly summarize the following steps once again so that you can remember it vertical and first with the pub spec you just need to add you just need to add these two dependencies which is firebase core and firebase storage and after adding these two files uh after adding these two dependencies move to the index.html file and provide your firebase credentials once you're done with that go to the main.file and add these two code snippets then go to my my homepage where you have provided you you might have either used the same build or future builder but in for the future you just provide the call to the functional you can directly write the code snippet that is the logic for right getting the data from the firebase for now to be a structural one i just wrote down in a separate class but you can just copy this entire line and place it in the say the future call so that nothing is going to change so you can just make a call to this function which in turn returns the image url right it is then captured in the snapshot data and it is just displayed with the help of image.network widget right this is all about how to get the data that is how to get image from the firebase storage and display them in your flutter web application okay well that's it guys hope you guys enjoy this video if you do so consider subscribing and i will see you in the next one bye [Music] you

Channel: vijaycreations

Views: 12,565

Keywords: flutter, widgets, color, gradient, images, mobile, app, assets, icons, text, style, code, picture, gradient color, container, buttons, rows, columns, containers, dart, google, gradient colors, audioplayer, colors, listview, card, UI, darkmode, mobileapp, flutterapp, flutterapps, flutter web app, appdev, flutter web, flutter and firebase, flutter and firestore, firestore, firebase, firestore and flutter web, flutter firestore web, firebaseapp, get image from firebase storage, image from firebase storage, firebase img

Id: nHtzU0bovng

Length: 7min 33sec (453 seconds)

Published: Sun Oct 31 2021