Flutter • Firebase • BLoC Tutorial #10 - Profile Picture

all right guys welcome back for episode number 10 of our flutter Firebase and block Siri where we are creating an entire app using those uh 3D services so today we'll focus on the profile picture uh so let's jump right into it so the goal for today is going to be here on the top left of our app being able to click on it uh take a picture from the gallery of the phone upload this picture to our Firebase storage see here navigated to the pro to the Firebase project that we have so we want to store the picture somewhere here instead inside the storage we want to get the download URL of this picture and paste it inside our user document inside our firestore database and basically replace this empty string right here with the URL of the picture so basically I've actually started to implement a little things before uh we get started I've actually recorded the video once but I had a problem so I'm just going to walk you through the procedure here so first what you want to do under your main perspect that yaml file is import those two packages image picker and image Cropper image picker is going to help us in order to access the gallery of the phone and select the picture and image Cropper is going to allow us to Define that we want an image that's a format of one by one a square and we can then compress it a little bit so it doesn't take much space so once you imported that you will want to navigate under the iOS folder the runner folder and info.list and right here you see I've highlighted a series of keys that you need to import in order to make the app working so you need to import all of those right here all of those key values and then you need to close your app and rerun it again okay otherwise if you just hot reload it's not gonna work you need to close the app and relaunch it and what should once you've done with that we can move ahead so close that close the perspect that gml file and I will make it a little collapsing here so if you navigate to your folder lib app view you'll see right here I have actually added a new blog provider to our multi-block provider that lead us to our home screen and this block provider is update user info block okay and this block we didn't create it yet and we are going to create it just after that basically what this block does it's going to be able to take the event that we want to update the user info Fields so we want to update the picture field right here of our user on my user that we're dealing with inside this Siri and then do the uploads and and the transformation in firestore that I told you about and then return the state rate of upload picture success or something like this so basically you want to go ahead and save that inside your app view dot Dart and now we're focusing on we're going to be focusing on the uh the uh user info block so you want to navigate under lib blocks and then create a new block which is called update user info block and with those three files with it remember if you just click on blocks right click on it and block new block you can directly create it here and this is available because you have added the extension block right here now just a little side note so the update user info event so we are going to create our abstract event class here update user info event okay so that's standard and then we add our custom event which is going to be upload picture we take two Fields a file so the picture itself and the user ID so we can identify the right document inside our database to uh to uh to put the the the download URL of the picture Constructor and probes because we're extended Equitable so that's done for the info event very straightforward now let's move to the state same here you have your uh normal uh update user info State class and then you have different kind of of States so the initial State that's fair enough and then you have upload picture failure okay so if there is a problem inside the upload loading okay and you have upload pictures success which takes a string parameter and this user image parameter is going to be the download URL of the picture that we've stored inside Firebase storage and with that we'll be able to actually reset our picture field from our our my user class to this user image right here that's going to have as a consequence to display the URL right there so user info State very much done straightforward no problems now let's talk about the block itself so basically you have your custom block as as we created before with a user repository parameter we are inside the Constructor of requiring a user repository parameter and affecting our private user repository parameter to the one that was passed inside the Constructor yelling at first emitting at first sorry the update user info initial State and then on our event that's called upload picture okay we want to do several stuff so first we want to emit upload picture loading as a state okay and then inside the try catch if there is a problem some sort of Errors we want to emit upload picture failure as a state and inside the try we want to have a string which is our user image and it's going to await user repository dot app load picture so the the the method the function upload picture that we are going to create right now that takes a string for the file and a string for the user ID which you will find inside your event right there of type upload picture and then you want to emit upload picture success state with this download URL string that was just passed from the upload picture so now let's go for the upload picture method so remember uh so we we're gonna navigate and they're not under lip under packages user repository lib Source user repository user repo.dart and here you want to add this new method upload picture which is a future a future of type string and takes a file and a user ID both strings as parameters and then you want to navigate to your Firebase user repository.dart to actually implement this method which is right here so let me walk you through the entire method so we transform the file the string that we have as a file and basically the file here the string that we are passing for the the method is just the path the entire path of the image okay so we are passing that and transforming it into a file then we are creating a Firebase storage reference okay by importing the Firebase based storage package so you want to go inside your perspect.jaml file in the user repository level and actually import Firebase storage and Firebase core okay you want to do that save this file and it will do a pep get and then you can navigate back here okay on your firebaseuser repository. so utilizing the Firebase storage package Dot instance.ref.child and here is where the path of the the the the picture that we're gonna send to Firebase storage so basically we're going to create a folder that will have as a name to user ID then another folder under that which called PP for profile picture and then we'll put the file itself that we are renaming by the user ID underscore lead and that's going to be the name of our file okay once that done we want to await Firebase storage reference that we've just created and use the method put file okay and passing in the image file this file that we just created from our path for the the path of our photo right there okay so this as a result is going to upload the picture to Firebase storage then remember we want to get the download URL from that so now this is exactly what we're doing from here we want to so the string URL we are awaiting so same Firebase storage reference so here we know exactly the the right document that we want to get access to and accesses accessing the method get download URL okay and this returns a string and so basically then we want to update fire Firebase fire store our database by accessing our user collection right there and the document which has as our user ID and then use the method update that takes a map okay and we want to access the parameter picture and replace our empty string that's actually there with the download URL that we just took from Firebase storage and then because we want to return a string from this from this method we're just returning the URL and if there is an error we are rethrowing and logging the exception right there so basically this is exactly this is exactly right and this is uh all you have to do for uploading a picture so basically this method is gonna it's gonna first upload the picture to Firebase storage right here under the same file structure we talked about and then get the URL from this file and put the URL under the right document inside the picture field inside our database okay so that's done okay so we can close Firebase user repository we are not needing that anymore another thing sorry before we closing user repository you'll want to navigate under user repository lib Source model my user and here remember we had you you should have all your your your Fields final just put your picture field non-final you're going to have a little exception right here but you don't care it's just to make everything more simple for everyone inside this series so that's that's the only thing that you need to change right there okay the same the other the all the other stuff are the same so once you've done that you can really close and close the user repository you won't need that anymore so here we are remember on the app view.dart and we are navigating to the home screen so the home screen it's this screen right there so our picture is here inside the app bar so if we navigate and and scroll a little bit down you'd see we have our app bar right there and under title you won't have this block Builder but we'll you'll need to add it because you only have this row with the container that represents what we have on the screen right now so basically what you want to do is wrap the row that you have with the block builder of type my user block my user States and then a block Builder we have a builder okay that takes a context and a state here in my user State and we want to say if the states dot status is equal to my user stages.success okay so we have well received the document from Firebase okay from Firebase firestore our user document our my user document we want to return a row of that okay and so if you navigate to appview.dart you hold you already have that but here it's exactly where you're doing that you're feeding your home screen with a block provider of type my user block and adding a state of get my user and this get my user event is remember gonna navigate under the rights documents inside our firestore document database take the map that represents our my user object and then my user entity is going to take that map transform it into a my user object and then we're using this my user object right here inside our UI so you've wrapped everything inside the block Builder nice here now it's where it's coming we it's coming a little different so I've prepared this so we want to say if States dot pick dot user.picture okay is equal to an empty string which is default normally in our app we want to return only like a normal a normal widget which would be which would be exactly the widget that we have on the screen right now okay so we can remove that and just do that okay so if our state.user.picture is equal to an empty string we want to return well this widget right here otherwise we want to be able to return the actual image that we have from Firebase storage okay so let me navigate under that and just take that okay don't worry so here same container okay really same container same width same height everything is the same except that inside the Box decoration we are accessing the image parameter setting into a decoration image and a network image and the network image sorry takes a URL and this URL well it's the state.user.picture okay that's pretty good if you save that you'd see that nothing is changing that's very normal why you'd ask me is because here you can see inside your console we are actually taking my user State okay so my user State that's that success so we have well received our document and our my user document actually looks at something like this so we have our ID our user ID right here our email right here our name and here is actually an empty string which is our picture and if we navigate to firestore here you'd see that's email ID name and the picture is empty so that's pretty that's pretty good now we want to actually upload an image so what what we want to do we want to be able to click on that so here wrap our container with a gesture detector you might have seen in just under all that as commented code it's because I've already did it once and the recording didn't work so I'm just going to do it again so accessing the untapped method of this gesture detector okay and here we're gonna utilize the code after I've just done okay so here we first want to do that so let me take that code and paste it right here so you see so first you need to import image speaker okay and then make your on tap method asynchronous because there is going to be some async Gap right here so first we are creating an image picker object okay and then we are creating this X-File uh parameter that we call Image okay and it's just gonna await the Picker so the image picker that we've done accessing the pick image method okay and saying that the source is Gallery so it's here for instance that you can also say camera right if you want to make a pop-up on your app saying you want to either take camera or gallery go ahead and do that but for now we're just going to keep it sing keep things very simple you can set a Max 8 Max Max with quality of image and a lot of other stuff right there so basically now if if I save all that and perhaps um rebuild my entire app okay you see if I click on it the the gallery of my emulator is going to open which is pretty good but if I click on something nothing is going to happen yeah well of course yes something's happening here because I took a gpeg method a JPEG picture instead of a PNG picture but if you take a right one nothing is going to happen that's pretty normal so the next step is to say all that so basically I'm gonna take all of this if statement and paste it under here and I'm gonna walk you through it so basically you want to First import crop image Cropper so import image Cropper so then what we are doing right there so we're creating a cropped file which is an object of cropped file of type crop file okay and then we are awaiting imagecropper dot crop image which is a method from image Cropper all right we are passing in the source paths which is our image dot path so the image that we just picked with the image picker okay and we're having an if different than null here because if well we cancel let's say we click on here and cancel the image will be new and we don't want to go here with an empty path okay and you have different parameters from the image Cropper that you can access aspect ratio here we want to be one one we also want to set the preset to be only the square preset and you can access as well some UI settings if you feel like it and customize your app really as you need and here now if we uh reload reload everything if I click on it this is done by the image picker okay I select an image with the image picker and this is the image Cropper that allows me to crop my image so it's basically done here I have nothing else to do I click on done and well nothing is happening yet but let's finish this on top method so we want we've done through that through that and now the last thing that we have to do is this so up under that just under here we want to say if crop file which is the same logic as before except it's not images here if crop file is different than null okay we want to say set State and access to context.read dot update user info block remember the block that we've created at the beginning of the video and add a new event which is called upload picture and pass in the image.path and the context.read.myuser perfect but here is not going to be the the the image it's going to be the crop file path yeah the cropped file path that was a mistake I did the last time isn't it yeah that was a mistake I did perfect well anyway that's done and so right here it's gonna be it's gonna be done for the on tap method and will be pretty much set well almost because now if we upload a picture we won't be able to see it directly for that we need to wrap our entire scaffold with a block listener and see I've already done it so here you have your scaffold and you want to wrap your scaffold with a block listener of type user update user info block and update user info State and this block listener has a listener method a context and a state so here it's going to be a update user info State and basically you want to say well if the state is upload picture success you want to access our current my user object and the picture field inside my user object and set it to the user image which is the download URL from Firebase storage that we have okay and so right there because we are using set state will be able to see the image right there so let me reload my app and show you if it works so we are going to take this image so the image picker is here now it's the image Cropper we're going to click on done and now see perfect the image is right here and if we navigate to firestore so Firebase storage you'd see here that our picture field inside our user document was updated and if we navigate to Firebase storage you'd see that there is a new folder which is we text the the ID of the user another subfolder which is called PP and then to profile picture and then you have the user ID underscore lead which is the actual image and this is the URL that we are that we are taking inside Firebase storage uh Firebase firestore sorry our database and so that's pretty much it for uh the picture now it's working perfect and every time we reset our app well we'll all the time be displaying the picture because remember here we say if the state.user.picture is equal to an empty string we do all of this and if not right here if not we are returning a gray container and all this but here we are returning not a great container sorry we are returning our Network image right there another perhaps Improvement that you can do is allow the user to change the picture once he already has one well that's very straightforward you just need to wrap your container right here with the entire same method of on top that we just created right there and you will allow the user to change his profile picture even though he already has one okay guys that's pretty much it for this video thank you very much for watching it and I will see you in the next why in the next one don't forget to subscribe and to like this video bye bye guys

Channel: Romain Girou

Views: 1,719

Keywords:

Id: 7KF9bnEqrgU

Length: 22min 40sec (1360 seconds)

Published: Mon Sep 04 2023