Flutter Firebase Instagram Tutorial

User Profile (Part 1) | Flutter Firebase Instagram Tutorial 2019 (Ep 4)

hi everyone welcome back to the flutter firebase Instagram series in today's video we're going to be learning how to create our profile screen where we're

going to show our users profile their post count follower account and following account and we're going to be able to update the user's name and their bio the first thing we want to do is

look at this profile screen here and we can see that we're going to need to create a row widget and inside the row what we're going to have a column widget and inside the column widget we're going

to have three separate columns for each of the user statistics and then an edit profile button at the bottom of this column so let's start by building that out let's make our background color

colors not white and we can remove our text widget here let's create a ListView and inside the ListView we're going to have a row widget with a circle avatar and we'll set the radius to 50 our

circle avatar takes in a background image and for now we can just set that to a network image and I'm going to use a link I found online and we can see the image shows up here

now we need to create our column for the user statistics and the edit profile button so let's make a column widget and inside the column widget we're going to have a row for the statistics and each

of the stats is its own column which contains text so we'll say twelve post counts style textile we'll make the font size 18 point O and the font weight again set to W 600 and now underneath

our count we're going to need to put the label so posts and the style color and color stop block 54 and now we have the layout for the first user statistic so let's just copy this so copy our column

widget and more paste it here two more times it save and then we can change posts to following and followers and we'll change the numbers too now we

can see that the row is much together and we want to space evenly like we see in this image so we can do is go up to our row widget and add main axis alignment main axis alignment spaced

evenly and then we need to add an expanded widget to our column and what that's going to do is allow our column widget to expand to the remaining space of our row widget up here and we can add

some padding to the row so edge inset at all and let's use from ltr' be so left will be 30 point oh top will be 30 point oh right will be 30 point oh and bottom will be zero

[Music] well it's saved and that's looking good now we need to add our edit profile button now if we go below our row widget inside our column widget

we can add a flat button with child text edit profile we will set the style to font size 18 point oh and then we need to add the color of the button so we can just set the color to color stop blue

and we also need to add the on pressed method so it updates so a print edit profile and we can change the color of the text by accessing text color and choosing colors white now to make the

edit profile button expand to the sides we can add a container widget around the flat button and just specify the width so container with we'll make it 200 and now let's looking pretty much the

same as our motto now below our user image and these statistics we want to add the user name and space for the biography let's go outside our padding widget and now we're inside our list

view widget so this is separate from the padding widget which contains the header so let's make a column widget there children the first one will be the user name and

the second one will be the bio and to make this left-aligned we have to access the cross axis alignment cross axis alignment dot start and that's going to bring to the side we can add padding

widget to add some spacing symmetric horizontal 30-point oh and vertical we can do 10-point now now let's add some styling to our text widgets we'll make the font size 18 0.04 the user name and

the font weight can be bold and now for the bio we'll set the font size to 15 so it's just a bit bigger than default now let's add some spacing between our username and bio you can do

that by adding a size box with height of 5.0 we can add some more space to our user bio by adding a container widget and then setting the height to a tee so now if the user has a lot of text here

it's not going to get cut off at the end it's going to keep going down to the height of the container and then it will cut off there lastly let's add our divider widget now that we created our

UI we have to figure out how to get data into the username in bio field and the first step to doing that is by creating a user class so let's make a new folder called models and inside our models

folder we're going to make user model dart class user and our user class is going to have the variables final string ID and ID will be the UID of the user in firebase a name of course profile image

URL and email and then a bio now I have to create a constructor for the user do this by just typing in this dot ID this dot name and this profile image URL for every single field

[Music] and then the last part of our class is to create a factory constructor so we can type in factory user dot from Doc and that'll take in a document snapshot

from Claude fire store so make sure you import the package and factory allows us to return a user document so we can type in return user ID and document snapshot has document ID and now for the rest of

these we can just do doc name profile image URL doc profile image URL email doc email and our bio will be doc bio and the reason why we know what our document

looks like and what the keys will be is because inside our database we set it up here where our users collection has documents with the document ID and then each document has an email name and

profile image URL but there is one more check we have to do for our doc bio when the user signs up they're not going to have a bio field so we can do an OL aware operator by doing two question

marks and then adding an empty string so it's going to return a user and if the bio field does not have anything so it's equal to null then we're just going to set bio equal to an empty string and

that's going to prevent our app from crashing now let's go back to our profile screen in order to know what user we're looking at we need to know the users ID so we can have the profile

screen taken the variable string user ID and add the constructor and it's safe now with this idea is the one who loves do is fetch the data in a future builder and then

using the user that gets returned in the future builder we can populate the data in our screen and that allows the screen to be more flexible to allow us to view other users besides just ourself so

let's wrap our ListView in a new widget called a future builder and that's going to take in the future and right here we're going to need to create a constant called users ref and that's going to

allow us to access the reference to our users in our database throughout multiple screens or an application without having to redefine the reference so I'll show you guys how to do that

here let's make a new folder called utilities and a file called constants dark inside constants at dark we need to create a final firestore variable that accesses the firestore instance and that

allows us to access the database now let's make our users ref which is equal to fire store dot collection and the path is users and that's accessing our database path so it accesses fire stored

at instant and then goes into our collection called users and then now we have access to all the documents inside back in our profile screen you can now access users breath

by importing constants and now we need to get the document of the widget that user ID then we can just call get and that's going to get us the document snapshot as a future we need to add our

builder build context and a sync snapshot and we have to add the pending curly brace [Music] [Music]

now let's hot restart the app and now we're logged in if we got our profile screen we're going to see that a build function return null future builder document snapshot and what this means is

that we're trying to access widget user ID but we never passed in our user ID to our profile screen anywhere so the first place we need to look at is our home screen because that's where we're

navigating to our profile screen and right here we have inside our page view profile screen and now that needs to take in our user ID and we want that to be a widget user ID because inside our

home screen now we need to add the same thing so final string user ID and the home screen is now going to take in a user ID whenever we want to instantiate it

and now we have to think where are we trying to navigate to the home screen from and the first place is made art so here we can now take an user ID and our snapshot that's returned from our

firebase user screen builder that returns snapshot data dot UID and that's going to be the UID of the current user who is signed in and so whenever the user opens the app this function is

called and if the current user is found then we send them to the home screen while passing in their UID and that's going to allow us to send it to the profile screen so we don't get that

error anymore let's have restart the app and then click profile on our profile screen we just need to add return if we print out our snapshot dot data it's saved we can

see that we do get an instance of document snapshot and let's try to access name we can see that Marcus has returned so now what we have to do is check if the snapshot does not have data

to be safe and if it does not have data then we're going to return a central widget with the child circular progress indicator and then if the snapshot does have data which means a user was

returned then we're going to go into our list view and return this screen now that we know our snapshot does indeed have data at this point we can import our user class so user user equals user

dot from dock which is the factory constructor we wrote before and say snapshot data and that's going to be the document that we pass through and if we print out

a user and it saved instance of user and we can access the name by doing user name we can access the bio by doing user dot bio and the email by doing user that email and we can see that we have a name

wave an email and our bio is empty because inside our user model we checked if the bio field was empty or not so if it's null then we return an empty string and that's why the bio is empty now

let's scroll down to our username and then we can put username and our bio will be user dot bio and it's safe and we can see that my name and bio updated accordingly now let's work on our edit

profile screen so let's go to our screens directory create edit profile screen dark we're gonna make a stateful widget edit profile screen and import material our build function is going to

return a scaffold with an app bar we can set the background color to color soft white and also set the background color the scaffold to colors that way then we can make the title text edit profile

now when we navigate to edit profile we want to take in a user which is going to be the current user so let's import our user and then edit profile screen this dot user and now go

back to the profile screen inside our container with the flat button so this button right here we're going to change our on press to a navigator dot push context route material page route it's

gonna take builder with no parameters and then inside our builder we want to return edit profile screen so let's import that and our edit profile screen is going to take in user user and user

here is the same user we defined right before our list view now if we hit edit profile we segue to the screen in order to make the back button show right now it's white so if we hold down we can see

that the back button appears we can go to our main file and inside our material lock let's add a new theme theme data [Music] and we can add primary icon theme theme

of context that primary icon theme dot copy with and then inside copy with is going to be the color we want so color colors black it's save and now the back button shows

let's start making our editor profile screen so we'll go back to edit profile and we're going to have a body a single child scroll view container high media query of context size height and what

that's going to let us do is scroll the screen when we click on the text field so our keyboard does not cover any of the text fields and I just noticed that our edit profile is not showing up here

and that's because we need to add style textile color color stop black once it save now edit profile shows so back in our container we want to add a child and that's going to take in a form and our

form takes in a key and this is going a lot of Fallot 8 our name and bio to make sure that it's a valid name and bio so above our build function let's type in final form key equals global key form

state and save and then restart the app let's go back to edit profile and our form is going to take in a child of column children circle avatar radius of 60 and the background image will be the

same one we put before so network image and then I'll go back here to copy it it save underneath our circle avatar we want a flat button that the user can press on to change the profile image so

change profile image child text change profile image we'll set the style theme dot of context and we'll use accent color and we can increase the font size on that a bit the font size try sixteen

and that looks good next we want to create our name field in our bio field so let's go back up to the top add two new variables called name and bio and we'll set those equal

to empty strings underneath our flat button let's add a text form filled with the initial value name a style we can set the textile font size to 18 [Music]

and now we can style the text form field by changing the input decoration Laden icon icon icons that person will set the size of that to 30 it save and now we can see that we have the person icon

here and we can click here to type in the field let's also add some label text labeled text and we'll set that to name and now we need to add the validator which takes in the input so the input is

what the user typed in and now we're going to check if the input trim so we're trimming off the white space on both sides at the length of it is less than 1 which means that the user entered

nothing then we're going to have the error message please enter a valid name otherwise we don't want an error message so we can just return nil there now let's copy the text form field put it

under and then change it to bio instead let's change the icon person to a book and then our validator will be input trim and we'll check if the length is greater than 150 characters so if the

bio is greater than 150 characters we want them to enter a bio less than 150 characters and we also need to add our unsaved to both of these form fields so input will set the bio equal to input

here and then for unsaved in our name field we will set name equal to input and it's safe and now the last thing we need on this page is our button to save the profile

so underneath our text form field we're gonna add a container with a height of 40 and width of 250 child will be a flat button on pressed we will write a submit function color a color soft blue text

color will be white the child will be text safe profile and then inside our text widget we will add style text style font size of 18 and it's safe and to show you guys what that looks like

I'll just change submit to print hello [Music] and now our button appears so let's add some margin do that so edge in sets dot all forty point oh and that's good

spacing so let's change our on press back to submit scroll back up to our form and to our form we can add some padding so the text fields are not pushed up into the sides and we'll do

edge in sets not all 30 hit save and if we need to write our submit method really quick so we don't get that here and now we added padding to our form now we need to work on our submit function

so we can do if form key current state that validate and that's going to validate the form so if the form is valid then we're going to do whatever I write in this block and if it's invalid

then we're going to print error messages underneath the name and bio fields so we do foreign key current state dot save and as usual that's going to call our unsaved

here so set the name to input and set our bio to the input now I want to update our user in the database we can do that by creating our own user so we'll make the profile image URL for now

we'll just set it to an empty string because in the next video we're going to be learning how to use firebase storage to actually update the user's profile image so user user equals user with the

ID we want to update the current user so we're going to access our widget user ID the name will be the new name the profile image URL will be the empty string for now and then our bio will be

our bio variable and then here we want to call a function that modifies the user in our database and we'll write that in a different file and then after that we want to write navigator not pop

so when we hit save it brings us back to the previous screen and right here we will put database update so we remember to add the function here and it's safe and now as a test run we can go to edit

profile again let's hot restart the app go back to profile edit profile and then before we hit save profile we need to change our on press right here I get rid of this so now when we click on press

that's going to run our submit function we had save it says please enter a valid game because our input is less than one and now if we enter a bio longer than 150 characters

and then hit save we see that we get the error message for our bio being too long and when we click on edit profile we want the users name to populate and we can do that by just adding an

eight-state and insider net state we will just set name equal to which it username and bio equal to widget user bio it's safe and if we go back into edit profile we see that Marcus is

populated and then our bio is empty now we're ready to write our database service file which is going to allow us to update our user profile so let's go down to our services directory add a new

file called database service dark and inside here we need to create the class database service and this database service file is going to be where we store all of our functions having to do

with modifying data updating data in the database so we don't clutter up our code with calls to the database and instead we can just use methods from the database service file so static void

update user and that's going to take in our user which we need to import to this file and then we're going to access our users ref which is for my constants file and dot document we're going to go into

our user ID so now we're inside our users collection and then we're going to the document of the user and then we can use the function called update data and then we can just do name is equal to the

user name profile image URL profile image URL bio user bio and it save what this function is doing is it's taking in our user class and then going

into our users ref collection going to the document of these where we passed in and then updating the data of the user at that document now if we go back to our edit profile screen all we have to

do is call database service import that update user and then we pass in our new user that we created right here and hit save now let's go out restart the app go to our profile edit profile we can

change the into Marcus with a bunch of SS and then we can write this is a very long bio and then when we hit save we see that the users data is updated accordingly and now we can try to log

out and go to another account so if we go back to our home page hit log out and let's login to one of the other accounts hit login and then we'll go to the profile we see that the username is a

and there's no bio B as we didn't set that yet so we can change the name to Albert will make the bio some filler text hit save profile and then we see that the data is updated in real time

and then one more test we can do is logging out going to sign up a new user so we'll make user called Cod CFC comm and the password hit sign up and then we see that our sign up button leads us to

the feed screen so now if you need to go back to our earth service file and we see here that I'm doing navigator and I push replacement name to contacts feed screen to ID and the

problem with that is inside our main dart we have the guest screen ID function and we need to return the home screen user ID snapshot data to ID so now if we remove this navigator or not

push replacement named into that save out restart the app and then we'll just sign up a new user hit sign up and as we talked about in the previous video I am currently signed in here but the reason

I had navigator dot pushed replacement named was so that I segue to the next screen even though that our screen builder was supposed to fire and I realized that all I actually had to do

was add navigator not pop here and then now if we hot restart the app his logout go to sign up and then let's add one more user and now hit site oh it brings us to the correct screen so the

problem that was happening before was that whenever I called signup user I was on the signup page and main dart was presenting the home screen on ur logon screen so we were navigating to the home

screen but we just didn't see it because our signup page would cover our login and home screen so by popping away the signup screen we revealed the home screen that was underneath it

so now authentication is working perfectly so if we go to our profile we see our user name we see that everything up to our name type the bio again it save and that's updated accordingly so

now the first part of our profile is done we can now update our user's name and their bio and in the next video we're going to be learning how to implement firebase storage so users can

actually update their profile image by picking images from their gallery thanks for watching remember to Like comment and subscribe and to start the repository and github where you can find

all the source code for this whole series I'll see you guys 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 allow users to update their name and bio in their profile. 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

» 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