Flutter Upload Images To Firebase Storage | Display Images From Storage

and welcome back to coding with today we are going to learn how to add or upload image in the Firebase storage we're going to upload the user profile image and try to see how we can display the user profile on the flutter application so let's quickly have a look what we going to create application is running let's head to profile and inside you can see a default picture and I'm going to click on this edit button and in here we have a button which is going to change the profile picture so click on this it is going to display list of images so I'm going to select second one you can see a loader it is going to take few seconds upload the image and you can see success message as well and the image has been uploaded okay so this is what we are going to achieve following you know that we are creating F e-commerce application and we are about to create the last video of section 4 from now onwards we are going to start the section five in which we will be focusing on the back end for specifically e-commerce application and in the previous three sections we have already completed the complete e-commerce app design so if you're new you can watch the playlist link or get the complete code link is in the description destion so let's get started first all open your browser and in the console where we have created our application you have to head towards the build and inside you have to enable the storage so click on it we previously enabled while creating the first video of this section 4 in which we learn how to set up Firebase INF flutter we enabled authentication fire store and storage without enabling you might not be able to access anything over here so once enabled in here you can see we have currently nothing in it but we can create a folder any folder name it a folder is created inside this folder we can upload file we can create another folder and things can keep on going so this is how this storage works okay once enabled okay we are inside the project we are currently working for our e-commerce application and in here in the previous Tut we learn how to save user record fetch user details update user details update single field for specific user record and then also how to remove user record and delete the fire authentication if you're new you can watch the previous video okay today we are first going to create a function which is going to upload image for us but before that head towards the pub spec and in here we have to add image picker so in the terminal I'm going to write flutter Pub add image picker hit enter it is going to add the latest version so you can see the image picker over here remove it from this location add it over here make sure to add two spaces from the start okay now head towards the user repository in this we are going to create a function return type future string because it is going to return the uploaded image URL in a string format and as a parameter it is going to take two things first thing is the path and the second thing is the image itself to receive the image we have to use x file which is the image picker file so you can name it file or image so let's make it image now inside this function we first have to use the same TR catch and remove whatever is inside this try we already covered everything related to these custom exceptions so if you're new you can watch the previous videos now inside this try first thing we have to do is we need need to use the Firebase storage instance and using that we going to upload our image so we will receive a reference is equal to Firebase storage to use the Firebase storage again we have to add the Firebase storage in the pub spec so do the same open Terminal flutter Pub add fireb storage hit enter and in here you can see a latest fireb storage package will be added for you head back over here now we can import the fireb storage import library fireb storage. darar and using instance we can call do ref this is going to point towards the reference of some specific path on which we are going to store the image so I'm going to give the path path will be in string so I just passed the path which we will pass in few minutes to this function and once the path is added then as a child we can add the image to the Firebase storage so we have this image do name So currently we're not adding but referencing towards a path with a unique name of that image inside Firebase fire store on this location you have to add the image Now using the same reference we first have to call the weight sign because this will run a cloud cery and once we call the weight we also have to make this function async wait reference dot you can see we have a bunch of options put log data file and string so we are going to upload file so file will be from the file package we have to converted use the file and pass the image. path now it is going to get the complete image from here convert that image into a file and we will pass that file to this put file and it is going to store that file on this reference or on this location which we have just created a it is going to wait until that image will be uploaded after that we need to get the URL of that uploaded image and store that data inside our Firebase database so when we are going to fetch it back again we will be able to do that so get the URL from the same reference because reference currently added the image reference. get download URL now this is going to get the downloaded URL over here and we can easily use this URL to display the image and return the URL so now this return URL is in string so we are returning the string and this function is now completed now we just have to call this function pass the path pass the file and this is going to store data for US Open the profile do do in which you can see we are displaying an image first at the Top If you edit this you can see we have first the image at the top and then we have a button which is change profile picture so this is that button and the image is over here so when we going to click on this onpress event it should trigger a function get the user new image from the gallery and change this image so first because you can see we using user controller add all the details so we will open this user controller class in which previously we try to fetch the user record and use our user to display record and save as much reads as we can from the fire store and also in the Google sign in tutorial I was talking about that before storing the record again and again we first have to check that if user record is already added or not so inside the save user record because this is going to be called when the Google signin will be triggered so using this method before again storing record again and again whenever user signin button will be triggered just simply call this method again to refresh the record first refresh user record this is actually not directly related to the image tutorial so that's why we're going to do it quickly fetch latest user record what this record is doing it is going to update this user again so we can add the if statement I've added a detailed comment over here to update the RX user value to get the refresh record and once done we're going to check the same user. value. ID is not empty this means that there is some already user inside this if it is empty if there is no user we are going to store that user right so that was a quick Thing Once done now inside this you can see we have function upload user profile picture so head towards the profile using the same controller we are going to on this on press call the controller. upload user profile picture whenever this button will be called this method is going to be triggered which we are just going to fill and we are going to replace the dummy image with the image from the user as this user which is over here is a user model it contains if you see the model it contains a profile picture which we will receive from the Firebase database so if it contains any picture we are going to display that image and also if you're new to gex I talked about the gex in detail in the previous video so first I am going to wrap it with the widget which is OBX widget which is going to redraw the image again whenever this variable is going to be changed so we are going to use a function inside this function we have to paste return the same image add a semicolon Control Alt L now inside this let me get an image which is Network image controller. user do Valu because this user is RX user so to get actual value we are pointing to dot value to get the model Dot and inside we have a profile picture now if we have anything in the profile we will get the network image otherwise we are going to get the default image so image is equal to network image do is not empty if it is not empty we're going to return the network image else we're going to display the default user image we have currently so just copy this image now and replace it with the image over here and remove this constant and also we have a property inside the circular image if you remember is Network image so how we can check if it is Network image or not so using the same thing if there is something inside Network image and it is not empty this means that his Network image is true otherwise it will be false so when you head towards the the circular image inside you can see we are checking if it is a network image by default it is false if it is Network image it is going to display a network image otherwise it is going to display asset image but if you don't want to reload again and again images and the files from the Firebase which will definitely take time and definitely it is going to be a costly procedure So to avoid that we are going to use the cachia network image in the terminal simply call flutter pop add use the cash Network image hit enter once it's added instead of displaying the simple image and using the network image over here we can simply replace it if is Network image is true we are going to display the cache Network image and we will simply pass the image over here and we're not going to check the network over here if it is a network image use the cach network image it is going to download the image cach that image for the first time and then it is going to reuse that image again and again whenever we are going to open our application so we have a progress indicator Builder which is going to add the progress as well so I have added the Shimmer effect which we talked about in the previous tutorial so I added that as an error widget we have a default icon and rest as a image URL I have added the same image also to make a circular we we have to change the radius to 55 once done now we are calling this function to upload the image so inside this function the first thing is whenever user going to click on this button this function will be triggered we are going to open the user gallery from where user can pick his image so we will receive the image and how we can pick it because this user might take some time to select the image so this operation is a time consuming so we have to add await now we are going to use the image picker package we have just added image picker inside we going to use the pick image property so in here you can give different sources so the one I'm going to give you can also allow the user to select any option but I'm going to directly use image source. gallery but you can see we have camera Gallery both so I'm going to go for the gallery and after that when you press the space you have a lot of options that you can add image quality Max height Max WID preferred camera device request full matter data and things like that so I've given the image quality 70 Max width and height is 512 you can also so once you have this image over here you can pass this image to a new screen in which you can display a complete large image as in a popup and if user is going to select that image you can use the crop tool as well but for today's tutorial we are not going to do that I'm going to Simply check if image not is equal to null if there is anything in the image we have to upload the image so we will receive the URL from this function from the user repository which is this one we have already created a function inside it so user repository do call upload image inside we have to pass the path in string I'm going to give this path users images and in the profile using a forward slash we are going to add our own image so image is already received over here that's it because this is also a time consuming make sure to add a wait over here so once we have the image we want to image URL we want to upload this image URL inside the currently logged in user account now to update that we have to convert data into Json because we know from the previous tutorial Firebase receive and send back the Json so we know that map is a Json Json also have the key and values so map of string Dynamic which is a key and value Json is in curly brackets so add the curly brackets the first value that we are going to update is make sure that it should be same as we added in the user model while storing and while receiving the record and when we open this fire console go to firestore database inside the users you can see we have a profile picture so this name this string should be same it is not going to add it over here so what I'm going to do it is Same by adding or deleting from here so let's head back profile picture as a key and sorry it value will be image URL that we just received now the Json is ready now we have to upload this again Cloud query will be in the weight keyword and using the same user repository we have a function to update single field record and we will pass the J to this function this function is going to call the users get the current logged in user and it's U ID to get the current document in which we are going to update this Json so this only field will be replaced which is profile picture and once done because we are using the user value user do value to display our image so user. value. profile picture is equal to image URL that we have just uploaded so this is going to update the value of this user which is the RX type of user so whenever this value is going to be changed OBX that we just created will automatically be triggered and redraw the image widget and by that we will be able to upload our image and also I've wrapped this in the tri catch and also added a success message deer. success is going to display a message whenever this image will be uploaded and otherwise in else whenever we are going to catch any exception if you want to display that exception you can display it if you don't want to display it just print that message so let me try to run this application okay so our application is running and we are inside our login screen let's click on sign in it's processing and supplied credentials is mail form because previously we deleted this account so we cannot use this so let me go for the Google sign in it's processing and we are successfully inside our application so let's head towards the profile and here currently you can see we are displaying the default image but not over here but inside this currently you can see the image being displayed from the Google account so when I going to it's not centered because we are using the center and we forget to wrap it with a widget which is clip r rect as a border radius use border radius. circular refresh the code and now onwards all images will be in the circle okay so when we are going to click on this change profile image it is going to trigger successfully the popup so let's try to select image the third one it is processing but we cannot see the progress and you can see a success message this means the image has been updated so let's head towards the storage and inside you can see a new folder users folder open it in in that we have the images and also we have the profile image folder and then we have the image which we have just uploaded when I head back and click on it again you can see the image appears now to add a loader as well because the image was uploading the user don't know what's happening so that's why we have to add the uploader so inside the user controller I'm going to create a new variable image uploading is equal to false if image is not uploading it is going to be remain as false so let's head back over here where the image start uploading inside if image not is equal to n first we going to change the image uploading do value is equal to true this means that now image is uploading and also using finally keyword we can change this image uploading to false Control Alt L now head towards the profile and in here instead of directly displaying the image we want to display a loader as well so first I'm going to check if controller do image uploading is true if this is true it means that image is uploading so we want want to return a loader else we want to return this image so I change it to controller image uploading value if it is uploading then we want to display a shimmer effect or you can display a simple circular progress indicator and else if image is not uploading we're going to display the image itself and the r drawing of these states is not being done by the stateful widget but it is being done by the OBX which is the gex state management so let me try to rerun this again okay so our application is running but in here in the profile picture uploaded whenever this picture New Image will be assigned it is going to change the variable inside this RX user so we have to tell that this user. refresh the purpose to do this that it is going to be refresh this user and wherever this user is used it is going to be refresh itself redraw it again and we'll show the updated image let's head towards the profile click on this button click on change profile image and select the center one you can see the loader it is being loading and you can you can see a success message and the updated image is also being appeared right away so this is what we have created in today tutorial and by this way we are ended our section 4 of anything related to user if you have any confusion you can ask me down below in the comments if you want to download the complete code you can get it from the link description below and you can also watch the previous videos from the playlist link is in the description or from the right top corner so that's it for today's tutorial I hope you learned something new if you learn something new please like the video and if you're new to the channel don't for for get to subscribe and hit the Bell icon to get notified for all the upcoming changes once again thank you for watching take care Allah h

Channel: Coding With T

Views: 6,824

Keywords: flutter upload image to firebase storage, how to upload images to firebase in flutter, upload image to firebase storage flutter, firebase storage upload image flutter, firebase storage upload file, save image to firebase storage flutter, display image from firebase storage flutter, upload images to firebase storage from a flutter app and display them on the ui, upload image from gallery flutter, flutter display image from firebase storage, show image from firebase storage flutter

Id: -NQWNy-5i2E

Length: 17min 36sec (1056 seconds)

Published: Tue Dec 12 2023