Changing Profile Picture in Flutter Using Firebase | Step-by-Step Guide

hey everyone today we're going to be covering how to create a simple app in flutter that allows users to change their profile picture we will then upload the chosen picture to Firebase storage and persist the profile picture in our app so let's start from our base Widget the top widget in the tree which in my case is called my homepage it contains a scuffled and as its child I will assign a widget called profile picture what's profile picture you may ask let's go ahead and create it so so I've created a new file which contains a stateless widget called profile picture in the build method I have a container to which I will assign some dimensions and a box decoration object so that it becomes round and it has a gray background here's how it looks so far think it's missing something yeah me too let's go ahead and add an icon to it okay that looks pretty good I will also wrap my widget inside a gesture detector so that we can detect user interaction with it I have created an empty function called on profile tapped and assigned it to the gesture detector's ontap callback don't worry we'll come back and fill in this functions body later next up we need to install a new dependency called image picker this flutter package will allow us to open the mobile devices gallery and pick images that we'll be able to use as our profile picture so I've added the package to my pope.l and followed the required Steps From the documentation on pop. dev in my case for iOS I had to add a new key to my info.plist file I'll leave the link to the package in the description below so you can follow the steps to install it as well with image picker installed let's go ahead and fill in the body of the function that we created earlier here are the different steps we'll want to turn into code for this tutorial first of all we'll want the user to be able to choose an image from their device then we'll want to upload that image to a storage service in our case Firebase storage and then we'll want to show and persist that image in our application let's start with the first step choosing an image from device first of all we'll need to create a new instance of image picker we can then use this instance to pick an image from the device's gallery we should also exit the function if the image returned by the image picker is null great so our app is now able to pick an image from the devices Gallery next up we'll want to take care of uploading our image to a remote storage repository for this we'll use the Firebase suite and specifically the Firebase storage package I've already gone ahead and installed the Firebase core and Firebase storage packages and followed their documentation for flutter fire which allowed me to link my flutter app with my Firebase project really easily I'll leave a link for this in the description too so you can follow the necessary steps for installation just to note though don't forget to initialize the Firebase app in your apps main method back to our on profile tapped function in the profile picture widget I'll now add some logic to upload the picked image to Firebase storage firstly I'll create a reference to the storage and I'll use the child method to return a relative path that includes the name of the image I want to upload in this case I called it user 1.jpg but this will differ based on your app's architecture for example you may want to call this 1 2 or 3. jpg BAS Bas on the ID of the authenticated user in your app finally I will read the image as bytes and upload it to Firebase storage using the put data method so as you can see here I'm going to select a picture in my gallery and then reload the Firebase storage page and I'll see my image pop up in the list of objects now once the image has been uploaded we need to display in the correct place in our application and persist it when the user restarts the app to do this this I'll start by converting the profile picture widget from a stateless widget to a stateful widget this will allow it to maintain its state locally and rebuild once a profile picture has been picked on top of the build method I'll declare a new u a list variable called picked image I will then go ahead and update the decoration parameter of my container widget so that it can conditionally use the picked profile image when available as the container's decoration image and finally let's not for get to update the on profile tapped method so that it sets the value of the new picked image variable calling set state to rebuild the widget and here we have it it works and now for the persistence part we want to create a new function that gets called when the widget is first buil that tries to get the profile picture for the current user if it exists it should also update the container with a picture available I'll create a new method called get profile picture I'll get my storage and object references and then inside a TR catch block I will attempt to retrieve the profile picture from my user from Firebase storage and assign it to the picked image variable we created earlier back at the top of my widget I will override the init State method which gets called the first time the widget is buil and call the function we have just created inside it there we go even after restarting the app as you can see the image persists but it wouldn't be one of my videos though if I didn't promote some clean coding principles in this case I want to isolate the storage logic into its own class so that it can be reused in multiple places across our code base and follow the single responsibility principle to do that I'll create a storage service class and I'll initialize a storage reference in this Constructor I'll then move the logic from the profile picture widget into the new class resulting in two new methods upload file and get file back at the top of my profile picture widget I will create an instance of the storage service class and simply call it storage I will then update my methods in the widget so that they use the storage service which also will shrink them significantly so let's give it a test drive I'm going to go ahead and select a profile picture pick it from my gallery it will then upload onto Firebase storage and I'll be able to see it in the application once I restart the app the image that I picked will persist and that's it for this video we learned how to build a simple app which allows users to pick and change their profile picture as well as persisting it across different up sessions I'll leave a link to the GitHub reper in the description down below so you can dive deeper into the code if you want to if you found this video useful don't forget to subscribe and hit the notification Bell so that you can be notified when new flutter coding videos come out on my channel see you next time

Channel: KarimCodes

Views: 267

Keywords: profile picture change in flutter, flutter firebase storage, flutter image_picker package, karimcodes, changing profile picture in flutter using firebase | step-by-step guide

Id: tCN395wN3pY

Length: 6min 56sec (416 seconds)

Published: Fri Feb 02 2024