Flutter Firebase Instagram Tutorial

hey guys I'm starting a new flutter series on my channel we're going to be building Instagram with flutter and firebase from scratch throughout the

series you're going to learn how to implement and interact with the cloud firestore database how to model your data in cloud firestore learn cloud functions push notifications and more in

this video we're going to be coding the login and sign up UI of our Instagram clone let's start by cleaning up our flutter project we can remove the theme data and also clear out the my home page

let's rename the app to Instagram clone do you ever the red debug banner in the top we can set debug showed checked mode banner to false and then our homepage will be login screen for now inside our

live folder let's make a folder called screens and let's make login screen dart and sign-up screen dark inside our login screen let's start by making a stateful widget called login screen and then

importing material Dart if we go back to main dart we can import login screen now and save that in our screens block so let's return a scaffold widget with the body text of Instagram

and now we see that Instagram is on top left a form in the center of the screen so let's wrap this in a column and then wrap the column in a central widget and

for the column let's set the main axis alignment to center and cross axis alignment to Center now in terms in the center let's set the style to textile font size 50 and now we want to add the

instagram font so let's make a new folder called assets and inside that we'll make a folder called fonts let's drag in our considering font called billabong and then we can go to

our pub spec Yambol scroll down to fonts and we can uncomment these lines then we add assets / fonts / billabong TTFN and if we go back to login screen we can set the font family to billabong

and if we hot restart it doesn't load since we're adding a new font we have to restart the whole entire app and now we have our Instagram font so next we want to start adding the form so we can start

by creating a form key for validation so at the top we can set final form key equals a global key formed state and what this is going to do is allow us to set up validation for the form so let's

make a form widget where the key is equal to form key inside our form we're going to want a child a column since we're gonna have multiple text fields main access size let's set that to

minimum and then the children so let's start by making a text form filled with a decoration input decoration label text of email then we see in a simulator that the email form pops up and we make a

validator so on input let's just check if it contains for now we can do traffic contains an app sign we can do a more complex email check with regex in the future

[Music] and then unsaved we can set our email variable to the input so at the top we want to declare a string email and a password and now

let's make the let's actually add padding to the text field so we knew already Const and add symmetric padding horizontal is 30 and vertical it can be 10 that looks better and then let's add

the password field let's change this to password and we can also add obscure text so instead of having plain text that's visible we can obscure the text so it becomes dots like this and then

for validation we want to have the password be at least 6 characters long so we'd say input length is less than 6 and then the ternary operator and we want the error message to be must

be at least six characters so now we have our two text fields we can start making the button now so let's add a size box of height 24 spacing and let's make a flat button or on pressed we're

going to submit the form the color could be blue and the child let's make it a text widget I'll log in and let's just put some it up here for now so we can see what the button looks like let's

change the text color to white style textile color white let's actually make the font size a bit bigger in point home we can also make the button expand to the left and right by adding a container

widget and setting its width to 250 let's add some padding edges that's not all and now for the submit button we want to create a function called submit and then inside the submit function we

can set we can check if the form key current state is validated and if it is validated then the form key current state not save and then this will allow us to make sure

that the email and password meet our conditions so inside here we would be logging in the user or attempting to log them in so now we can test this out let's first try out the validation so if

we just type in some characters without the @ sign hit login it's gonna say please enter a valid email and since our password is less than six characters it's gonna print out this error message

too but if we put the out sign in and then for the password we'll see that there the error didn't pop up here so we know that the emails good and then the

password and say is five characters so it's still games the error six they don't get the air and then we get our email here and our password is null

because inside our password form we have to set change email to password so we hit login again we get our email output and then the password down here so now we want to go to the signup page so we

do this by creating let's copy the container to add another size box I have 24 spacing and we'll call this go to sign up and then we can set the unpressed

to a navigator push named so we're going to be pushing a named route and to do this we actually need to set up our routes in the main file but first let's go to our login screen to the top and

let's add a static final string ID and we'll set this equal to login screen now this allows us to access this variable ID without instantiating a login screen so we can do login screen ID and then

same thing for a sign-up screen let's set this up really fast so let's make a stateful widget called sign up screen import material and then let's add the ID inside the staple widget so ID sign

up screen and have this return a scaffold now if we go back here we see our home this login screen we can add routes now so inside our arouse login screen ID and

then we say context and send that to a login screen and then same idea for the sign up screen so sign up screen ID context sign screen and save that and if we go back to login screen if we push

the root name sign up screen dot ID so we're pushing a named root sign screen ID which is inside mean dart to a sign up screened ID push the sign up screen onto the stack now if we save that let's

hot reload and then hit go to sign up it brings us to the sign up screen and we can drag on a similar like this to bring it back so now let's actually just copy the scaffold here because it's a very

similar similar UI let's also copy the submit up here in the form key if we hit save let's go to sign up and we have the same exact UI seems go to sign up right now - back to

loggin and then instead of doing navigator not push named words come to navigator dot pop and that's going to allow us to go back and forth between the screens and the last thing we want

to do is add a name parameter so up here let's add name so we can print the name in this inside the submit let's change login the text here to sign

up and then we can copy one of these fields the text form fields with the padding let's put it on top save now we have another email field so let's change the label text to name please enter a

valid name and for the validator we want to check if the input is empty so we need to say input dot is empty and then remember for the unsaved we want to change that to name equals input so if I

type if I sign up right now it'll give us all the error messages but if I put a space in the name it's gonna say that that's a valid name so what we want to do is say input trim so we trim off the

white space on both the leading in the end so now if we say space and signup it's going to give us an error so just to recap we now have our login page UI and we have our signup page in the next

video we're going to be adding cloud firestore to our project and authenticating users with firebase sign in thanks for watching and see you guys next time