Flutter Firebase Instagram Tutorial

User Profile (Part 2) | Flutter Firebase Instagram Tutorial 2019 (Ep 5)

hey everyone welcome back to another flutter of firebase Instagram tutorial in today's video we're going to be learning how to implement firebase

storage so users can add and update their profile image the first thing we have to do is add a bunch of new dependencies so I'm going to copy pasted them in and I'll link all these in the

description so we have image picker cache network image firebase storage flutter image compress path provider and UUID and I'll explain each of these as we use them throughout the video we also

want to add a user replace holder image so I described a placeholder image off of Google and then added it to my assets folder under images and I have user underscore placeholder jpg and then back

in our pub spec diamo file we need to change our assets section here so we can run comment assets and then change this to asset slash images slash and it save and that's going to import all the files

under images next let's deal with our profile image in our profile screen so if the user logs in and they don't have a profile image we want to just show the user placeholder jpg and the way we can

do this is by getting rid of network image here and changing to an if statement so we can say user profile image that URL and check if it's empty because when the user first likes in

their profile image URL field is an empty string so we check if the profile image URL is empty and if it is then we just display the asset image so asset image assets slash images user

placeholder dot jpg and then if the user dot profile image URL is not empty so the user has a profile image then we can use the cached network image provider and that's

the cache Network image package and we can type in user profile image URL now that's going to do is catch the image that we just requested from the server through the user dot profile image URL

and it's going to store it locally on the device so whenever we reload a page that uses the user dot profile image URL it will load instantly let's also add a background color to the circle avatar

and make it colors that gray and hit save and let's how to restart the app and we can see that the default profile image is the user placeholder image that we decided now let's go to our edit

profile screen and we want to add a file variable for our profile image and that's going to import dart IO and this profile image is going to be picked from our image picker and we also need a red

function called handle image from gallery async and we're gonna say file image file equals a weight and now we're using the image picker plug-in that we added before and import that dot pick

image source image source gallery here we have to check if the image file is not equal to null which means that the user selected an image and then we set the state of our profile image to the

image file we just selected and it save in order to use the image picker plugin on iOS we have to open up our iOS file in Xcode so right click iOS and it open in Xcode

and then the project of a load we go to info.plist and there are two keys that we have to add we can do this by hovering over any of the existing keys and clicking the plus button and the

first key is ns photo library usage description make sure you spell it all right and then the second key is ns camera usage description the first key gives us access to the users photo

library and so for the description we can use for a post and share photos and then for the camera usage description we can say the same thing so post and share photos when the app requests permission

to access the photo library or use the camera then the description would be post and share photos for both of them let's close Xcode now let's save this hot restart and now if we go down to our

build function in edit profile screen we want to change the flat button to access the image picker handle image from gallery it save and now when I click change profile image and we got the

missing plugin exception error which means we just have to close the app completely and then relaunch it now if we click change profile image we see that flutter and surround clone would

like to access your photos which is the photo library post and share photos and that's our reason why we hit okay and then it opens up our photo library and we can select any of these photos and

these are the default photos that are loaded onto the iOS simulator and now when we select the photo image the profile image file is set to the image we just selected and now we have to work

on displaying the image in the circle avatar so let's go down to our background image here we can change the background color to colors not great and then forward

background image let's write a function called display profile photo or display profile image and it's ready to buff submit there are multiple cases we have to deal with when displaying a profile

image the first thing that we have to check is if there's a new profile image so no new profile image will say if profile image is equal to null else there is a new profile image so if the

profile image is not equal to null that means that the user selected a profile image that they want to upload and in that case words can return a file image profile image then we can see that since

the profile image was set to the image file we just elected our circle avatar was updated to show the profile image and now let's deal with the no new profile image case so now I have to

check if there's an existing profile image so there's no existing profile image we do that by saying if widget user not profile image URL that is empty which means that the profile image URL

is an empty string then we want to display the placeholder in that case we return the asset image assets images user placeholder JPEG once it save when we click edit profile we

see that the asset image is loaded and then the other case we have to check is if these are profile image already exists and in that case we do the same thing as in our profile screen where we

return the cached Network image provider and pass in the user dot profile image URL and that's going to cache it on our device and now let's test out selecting a profile image and we can see that it

updates immediately the next thing we want to do is to start handling our submit function so let's go down to submit and then in between our profile image URL and user we're going to want

to check if the profile image is null so if no profile image is selected then we'll just set the profile image URL to the existing user profile image and that means we're not updating the profile

image in this case otherwise we want to update the profile image or add a new image and then we'll set the profile image URL to a firebase storage function let's go to our file tree and then under

services we're going to make a new service called sword service dark cloth storage service and then we need to write two functions here the first one is a static future string upload user

profile image and that's going to take in a string URL and a file image file and that'll be an async function an import dart IO and the second function we have to write

is a file there's a function to compress images so a future file compress image string photo ID and file image and that's also a sync now before we go any further let's go to

our firebase console and then go to storage and then click get started' next done and then that's going to create our firebase storage bucket where we're going to be storing our photos

now that our storage bucket is set up let's go to our constants file and then let's add a new variable that's final storage ref firebase storage and import fire be storage instance ref and that's

going to make a new reference to the root of our firebase storage the first function we're going to write is our upload user profile image and we need to create a string photo ID and the photo

ID is going to be the ID of the photo inside our database and it's going to be randomly generated so we need to use our UUID package dot v4 and that's going to generate a random UUID and then we want

to use file image a weight compress image and we're going to pass in the photo ID we just generated and our image file we want to compress images so photos don't take up as much space as

they normally would and so we have more space in our storage bucket especially because we're building Instagram we're going to make a variable called temperature equals a weight get

temporary directory and that's using the path provider package that's giving us access to a temporary directory where we can store our image file so a final path is equal to temperature dot path and

that's the pathway so we're making a file called compressed image file equals a weight and this is where we use the flutter image compressed package dot compress

and get file and the first path is going to be our image dot absolute dot path and that's getting the path of this image file that we pass in and then our target path is going to be the path that

we just created in our temp directory slash image and we'll store it as the photo ID dot JPEG and then we have a quality parameter that we can pass in and that's on a scale of 0 to 100 and we

can just put 70 so the quality would be 70% and then we just return the compressed image file now going back to our upload user profile image we want to upload the profile image to our firebase

storage bucket so there's something called a storage upload task and that imports firebase storage we'll call it upload task is equal to storage ref and that imported constants dot child and

now we're specifying the path we want the image to be stored in so inside our storage bucket we wanted to go into images users and then we'll make a file called user profile underscore photo ID

now JPEG and then we just have to do dot put file and pass an image then we can save have to write is storage task snapshot storage snap equals await upload task

done complete so our sword snap is what's returned from our upload task when it completes and then we want to get the download URL and the download URL is what we're storing inside our

database for the user profile image URL field and that's what we used to download each image so weight storage snap dot ref get download URL and because get download URL is async we

have to await it and then we just return the download URL going back to our at our profile screen we can now use the storage service once we just wrote so weight storage service dot upload user

profile image and the URL is going to be widget that user dot profile image URL and then the image file that's going to be profile image now let's make the submit function async and it saved so

now if we restart the app and then add a profile image let's select the leaf and then hit save we see that our profile image is now updated and we can go back to edit profile the image doesn't have

to load it all be as it's cached and if we check the firebase database and refresh it we see that an images folder was created and inside images we have users and the

inside users we have our user profile image and we see that it's the leaf photo and if we check our database and go to users and check our account we see that the profile image URL is now the

download URL to get the image that we just stored so there is one thing we have to be careful about and that's when we add a new photo so let's say we change the

profile image right now let's make you these flowers we see that the profile image changes here and then when we hit save profile we're going to call sword service upload user profile image again

and what's going to happen is that a new photo IDs going to be created we're going to compress the new image and then upload a new user profile to our database and that's not what we want to

happen instead we want to update our existing profile image and in order to do that we have to get our photo ID from our screen URL so now when we hit submit we're passing in the widget dye user

profile image URL and in our case since we already updated the profile URL once we already have a user profile photo ID link so in between image and upload tasks we need to check if the URL that

we passed in is empty or not so we're going to say URL that is not empty so if the URL is not empty that means we're updating the user profile image and we have to get this photo ID to update the

exact file in the storage bucket and the way we can do that is by using a regular expression so regular expression reg X the X P equals reg X and then just follow what I type here so our user

profile underscore parentheses dot asterisk dot jpg [Music] we have to write photo ID is equal to exp dot first match and then we pass in

the URL and then sub index 1 and we can print the photo ID so to recap what the function is doing we're passing in a string URL and an image file we're creating a photo ID which is a random

string of numbers and letters and then we're compressing the image that we passed in here we need to check if the user is updating their profile image because they already have an existing

one and so we check if the URL is not empty which means that it's not an empty string and then we use a regular expression to extract the user profile photo ID section of our URL and then we

do that by saying the XP dot first match URL and then taking the index of one down here we make an upload task where we put the file into the exact location in our firebase storage bucket

in the directories images users and then the file user profile with the photo ID and then lastly we just get the storage snap which is what's returned on upload tasks Don complete and then return the

download URL which is what we store in our database now if we hit save on that and since we already selected a new profile image here we can it save profile and we see that the ID of our

existing profile image download URL is the photo ID and that's what we're updating here and now we see that our photo updated we can go back to edit profile we see the photos updated here

and if we go to our firebase storage bucket we can refresh it and if we click on the image we see that it changed from the leaf to the flowers the last thing we have to do is in our

edit profile screen we should add a loading bar up here so when the user had saved profile they can see the loading bar and know not to click off the screen and that their profile image is being

updated because right now when we hit save profile after changing our profile image we don't actually know what's going on as the user so the best thing to do is show a little loading bar up

here so inside our edit profile screen let's go up to the top and add a new variable and that's gonna be bool is loading and we'll set that equal to false inside our submit function

underneath our current state dot save we can do set state is loading and set that equal to true go down to our build function and let's change out our single child scroll view to a list view and we

can get rid of the container here and instead let's going to take in children widget remove the child from padding and we can just copy all this and move it up one and delete this extra parenthesis

here and reformat that and then let's also add a gesture detector on our list view on tap and then focus scope of context dot unfocus [Music]

and that's going to let us click here and then click anywhere on the screen to minimize the keyboard so to add the loading widget we can say is loading and use ternary operator and then pass in

linear progress indicator where the background color is going to be colors blue we'll set that to two hundred and then the other value is value color will say always stopped animation color

stopped blue and if it's loading is set to false then we can just say size box odd shrink and then it save so now if we try to change your profile image and hit save profile we see the nice loading bar

appear and then it pops the screen when we're done and updates our profile image that's all for this video in the next video we're going to be learning how to implement search functionality so we can

actually search for other users within the app and view their profiles remember to leave a like in the video subscribe to my channel and to start the rebound github so I know that you guys are

enjoying the series thanks for watching see you in the next one [Music]

Welcome to my Flutter Firebase Instagram tutorial series where you will learn Flutter and create amazing apps using Dart. In this video, we add Firebase Storage to our app to allow users to add and update their profile image. We also learn how to use the image picker and compress images to save storage space. Throughout this series we will implement and interact with the Cloud Firestore database, model data in Cloud Firestore, learn Cloud functions, and more!

» Remember to like, subscribe, share this video, and star the repo on Github 🙂
https://www.youtube.com/MarcusNg?sub_confirmation=1

» Resources
Source Code: https://github.com/MarcusNg/flutter_instagram_clone
Packages:
https://pub.dev/packages/image_picker
https://pub.dev/packages/cached_network_image
https://pub.dev/packages/firebase_storage
https://pub.dev/packages/flutter_image_compress
https://pub.dev/packages/path_provider
https://pub.dev/packages/uuid

» Flutter and SQFLite Udemy Course Coupon
https://www.udemy.com/course/flutter-and-sqflite/?couponCode=749216595DBD298E3599

» Studying for coding interviews?
https://algoexpert.io/marcus
Use promo code “marcus” for a discount!

» Socials
GitHub: https://github.com/MarcusNg
Twitter: https://twitter.com/MarcusLNg

» My Gear*
Logitech Master MX 2S Wireless Mouse: https://amzn.to/35BZoYy
AirPods 2: https://amzn.to/2MdpJVb
Apple Magic Keyboard: https://amzn.to/2nCXqpu
Blue Yeti USB Microphone: https://amzn.to/32cs6wM
JBL Charge 3 Bluetooth Speaker: https://amzn.to/2IZuxeT

*Affiliate links

» Outro Music
Harmony – Joakim Karud (https://www.youtube.com/channel/UCVBUm9ccjHy0utvlChyrPHA)

#Flutter #FlutterFirebase #CloudFirestore