Flutter Tutorial - Upload Images using Firebase Storage.

hey what's up coders welcome back to my channel in this video I'll be showing you how to pick images from the image library and also I'll be showing you how to stole the selected image on fire store so to perform these actions are shall be using the image picker and firebase storage plugins so I'll leave a link in the video description with the details of the plugins and the version details as well so today's use case is a very simple edit profile screen which has a profile picture and the user details and with two buttons so all I'll be doing is selecting a profile picture and uploading it on the firestore so let's see the demo page as I mentioned I would be selecting an image and uploading it onto the fire stone so when I click the camera I can hear ur first time when I'm doing it for the first time I would be prompted with the dialog asking if this app can access the photo and the media files so if you give the permission a love then I would be routed to the gallery page and I can select a sample image and after selecting the sample image I would get the image displayed here and then when I click on submit I get a snack bar saying profile picture uploaded now this does not confirm if it is uploaded on the firestore so let's quickly check the firestore so here we're gonna check in the storage tab and in the file section when I'm implementing our this particular use case I'll show you how to set it up and I'll show you how to do the other details so as of now all I have to do is just refresh to see if the picture that I selected from the gallery is uploaded on fire store and there you see you can see the images uploaded now if I click on the image you can see the image that we selected so this gives the confirmation that in the image that was selected from the app has been stored onto fire stop so now let's move on to the implementation and we'll see what are the basic setup process that we need to do in order to get this functionality working alright so moving on with the implementation first thing get your plugins set in your pop spec file which is the fire storage and the image because these are the two plugins that I have used and and there's just one page that I've used which is the profile page in my use case so make sure that you had these packages which is the image picker file storage and also have used path dot dot so this is basically used to get the filename of the image that you're selecting from the gallery so that you have unique names when you store it on the fire store so that's the reason I've used here but I'll show you the implementation path as and when I move to that particular section before I start with this particular state widget we need to make sure that we have a project set up in our firebase so if you watched my file store with flutter series I have in detail explain step-by-step how to create a project how to add dependencies how to ensure that if you get the Android X migration issue error how to tackle it so I'll leave a link in the video description which contains at the other video detail as well please watch that video if you're watching it this video for the first time so you will have a better understanding of it and once you have set the project right with all the dependency set then you can come to the storage section which is on this left click on it and make sure that you have even the rules set which is like a loud read and write so if you do not have this then if you add images that you will not see it on your fire store so make sure that you have them set it right so once you have all the set then we can move on with our UI power so here I have a very simple stateful widget nothing complicated with just a simple up bar with an arrow left so moving on to the body section I would be first referring a builder now why am i referring a builder class is if you have seen my other friars tutorials most of the time what happens is I will try to refer the context outside the scaffold so when we are doing that then what happens is you would get an error something similar to this yeah it says scaffold of called with the contact does not contain scaffold so then it says you cannot use this the reason is if you had seen my UI when I click on the submit button there is the snack bar displayed here now this snack bar is totally out of the scaffold it's in a particular function and there when I am using a snack bar I use a context reference so when I'm using a context reference it does not identify a scaffold there so in order to overcome this they have given you a detailed description what are the options that you could use and they say that the only efficient and the simplest option is to use the Builder class so I leave a link of this particular document also in the video description so that you can go through it and understand in detail has to work this builder class does and this build build context does so there you go so the first thing that I have is my builder class and inside this I would be using a property called Builder and the context so this is the only thing that I do in order to get the context outside the scaffold and then what I'm going to do is let me close this once I'm done with this inside this I will start with the container so that's the main container of my UI so inside the container I'm going to use a column widget because all you have is just one below the other if you if you look at the UI you have every section just displayed one below the other so I'm just going to add a column widget to so first thing what I'm doing is I'm adding a sized boxed height just to give that extra spacing I'm going to start with a row Bridget now why am I using a real budget here is you could see have a circle avatar and a camera icon next to each other so I'm going to tackle this using a row budget then I use a circle of ATAR with a radius hundred now to get that particular border and the clipping part this part I'm using the clip oval widget so I'll show you how to use this and all right now inside this I have to display particular placeholder image so in my case all I'm doing is I'm just picking up an image from the network so I'm just gonna add that particular image here but when we move on to the firestore section or the firestore part we would have a condition here to check if the image is null if not pick the image from the file that we have used and all that so as of now it's just a simple static image all right so now we have added the circle image now we will add the camera and then we will build it and we will see how it looks so to add the camera section I'm just giving some padding here just to give that space in between your circle avatar and it appears at the bottom corner so if you look at this it appears here if I give if I don't give that padding or any other parameters it will just appear next to it so what I've done here is I have added the icon and on traced I've left it empty at the moment so first let's finish the UI and then I'll show you the entrence of both the subnet and the camera icon so when you build this and see you get this particular section now let's focus on the other section which is getting these details so I'll show you how to do the first one this the second third and the image is just the repetition of it with just the content being changed so for that let's move on to the section which is after the rule so here I'm just going to add another spacing sized box here I'm gonna use again a row and a column combination the reason is if you see her you can see that its first I've considered this as one row and this as another row and inside this I've used a column digit for username and the name so that's how I've used the combination and just to give that alignment of the name on to the center left and the other one is on the right side so inside this I'm adding a child with the container and this container contains a column digit so this is where you have your username and your name displayed you and now I'll be adding the other text which is the now I'll be adding the pencil icon which indicates that you can edit this where we are not focusing on the editing part of the edit profile here there you go so have builders and you can see the username and the pen icon here I'm gonna follow the similar procedure for the other text as well so I've added another row element which has the similar birthday and the profile details alright so there you go so I have follows the same UI structure and added the other details now we the only section that is left is the two buttons which is a cancel and submit so again it's a rule with the combination of two raised buttons so I'm going to quickly add that and then move on with the implementation part you so there you go so I've added a raised button and on press since this is a cancel button all I'm doing is just closing the screen by using a navigator pot with the elevations flash color and the text that said it's a similar way I'm going to add the other raised button which is the submit but on on press it will have a different functionality there you go so you have those buttons but on pressed I'm using a different image which is called upload picture so we will see the implementation of this upload picture and clicking on the camera so you can see these buttons so first here we have two pending functions to be implemented first thing as the camera click and next as these submit so first let's click focus on the camera click so if you look at the UI of the camera we had left the on pressed empty so here what I'm gonna do is I'm gonna create enough function call get image and now let's implement this so to start with the implementation all I'm doing is first thing I'm going to create a variable of type file and that's called image so first thing now let's focus on the get image implementation so I'm going to use future and then say get image and since I'm using future I'm going to use async now inside this all I have to do is create a new variable and I'm going to say await and what does does is it's going to use my image picker plug-in so I'm gonna say image picker dot click the image so in our case it's an image so we're gonna say pick image and the source is image source gallery so as I mentioned at the beginning of the video you can use camera file assets anything so here in my case I'm using gallery once we have set this we have to use set States so in the set state what I'm doing is I'm assigning my underscore image which is the type file to this particular image then what happens is whatever I've selected in the gallery gets updated in this underscore image which is of type file then if you want you can do any action here so at the moment I'm just gonna use print the image path so that you can see the path of the image and also the focus of our UI is the moment you select from the gallery it has to get updated in your circular avatar so let's do that section as well so in the circular Avatar we had just updated a static image but now what we're going to do is we're gonna check if this particular image is available or not if not then we will update it with a static one so we're going to do that check we're going to say if this image is not equal to null that is the image that's going from the gallery if it is not equal to null then we will say pick it up from the file and then we are gonna say fit box fit fill then if this isn't equal to null then set this to your static image if not set it to the image that is being picked up from the gallery so this is the only condition that we add here this is the only line that allows you to get your image from your gallery so if you add this you good to go which will help you in picking up the gallery image now once you have picked a gallery image we need to add this image to the firestore we need to upload it so we had created a function called upload picture so let's see how to implement this so let's quickly add that function as well so that function is also going to be our future function so it's a future so in this since we are interacting with the firestore okay before that if you had seen my image when it gets stirred here it was not storing with the entire path name that's being picked up from the gallery instead I want just the image name so for that reason I have used this path dot dot file I'm in the package and inside this what I'm going to do is I'm going to create a variable called filename and I'm going to use the function called base name this will ensure that I can get only the file name and not the entire path so that way you can make it more readable and now what we have to do is we have to get the fire base storage reference so for that we are going to use and this would be firebase storage instance dot F dot child and the path would be the name of the file name so when you do this it will pick up this particular file name and add it in your fire store in the storage section and then so this part is just getting the reference and getting the file name now we need to put the file onto the firebase so to do that we are going to use so this is the one that ensures that it adds the file with this filename okay this filename and then on complete we need to check if it is completed or not so for that we use storage task snapshot there's another and this completes your your file to the fire store then we also going to use set state and in this section I'm just gonna make sure that I print a message saying or display a snack bar saying profile picture uploaded so here you can add any other functionality of your choice or maybe if you want to route to another page saying conformation or a dialog or something like that so here I'm using a very simple all you're doing is get the reference get the filename put the file onto the firebase and complete it and then display the image so this is the uploading part so let's build this so there you go it has built and as usual you can see the static image because initially the image from the gallery is null so I'm going to select the sample image again you can see that it gets updated here and then when I click on submit you can see a snack bar and when i refresh my firebase here you can see the image getting uploaded so yeah there you go so I'm going to click this and you can see it so if I had not used that particular file name here the base name here you would see a very long path name which would be the path of your gallery it's the same thing you would see hurt so just by using this you are able to just see the image picker and the name of the file Hara so so this is how you upload images to the fire store and select the images from the gallery it's pretty simple straightforward all you need to do is make sure you have your firebase setup plugins used correctly and then use those two functions which I showed you and you could to go so hope you like this video if you do like please give it a like and do subscribe and if you find this informative please do share it thank you

Channel: whatsupcoders

Views: 62,387

Keywords: FlutterTutorial, FlutterFirestore, Firestore, Firebase, uploadImages, image_picker, firebase_storage, gallery, whatsupcoders

Id: 7uqmY6le4xk

Length: 21min 6sec (1266 seconds)

Published: Sat Apr 20 2019