Flutter & Firebase App Tutorial #10- Sign In & Register Forms

Key Takeaways

okay then gang so now what I'd like to do is take this signing page because currently we can only press this button to sign in anonymously and turn it into a signing form where we can put in an email and a password and then signing with those credentials instead of anonymously so we're gonna reflect this page now and the first thing I'm going to do is get rid of everything inside this child property right here inside the container so we're going to keep this scaffold and the app bar and we're going to keep this padding but get rid of the raised button right here we don't want that anymore and instead in here we're going to create some kind of form so the first thing I'll do is a form widget and this form widget is going to allow us to do some form validation later on now inside this form widget we need a few different things so I'm going to create a column so the child will be a column and inside this column we're going to have a list basically of different form field widgets so let me now open up this column and say the children property should be a widget list and the first thing inside this list is gonna be a sized box and I'm only doing this to give myself a bit of breathing room so this is going to be height 20 like so okay so after that size box we want our first form field and this is going to be a text form field for the email so I'll say text form field and then inside this widget we need to specify what's going to happen when this farm field changes so we can do that by adding an unchanged property so let me enter down and say on changed and set that equal to a function which takes in the value and then inside that we'll do something later on okay so this value is going to represent whatever is in the form field at that point and unchanged means that every time a user typed something extra into the form field or presses a Delete key or a space or something like that every time the value changes this function is going to run and get us the value that are currently inside that farm field so after that we want our next farm field widget but before we do that let's do another sized box so we get some space between these different form fields and then we'll do another text form field because this is going to be for our password now and inside this one we want to do pretty much the same thing so we'll say on changed and that is going to be a function which takes in the value and we'll do something in here later on now inside this password field we also want to obscure the text so when we type into it over here we don't want to see what we're typing in case someone's over your shoulder trying to find out what your password is so what we're gonna do is add on another property to this called obscure text and set that to be true so if I save this now we should see so far we have two form fields and we can type something into this one and also we can type something into the next one but when we type in the next one it's obscured so you only see the last letter for a couple of seconds before it obscures and now someone trying to steal your password standing behind you can't do so anymore so there's two farm fields now we also need a button at the bottom so let me come down here and there were coming after this I'm gonna do another sized box and the height is gonna be 20 pixels again just to give us a bit more breathing room and then we're gonna do a raised button so raised button like so okay so inside this raised button first of all I'm going to specify a color now I want this to be a pink color so I'll say colors dot pink and then strength of 400 we also need a child property which is going to be the text that sits inside the button so we'll do a child property that will be text and then inside this text I want to first of all specify the text itself which is going to be signed in and then we also want to do a style property which will be text style and this is so we can change the color of the text because by default I think it's black and we want to be white so colors dot white okay now after the child property I also want on pressed property which is a function that's going to fire when this button is pressed now this is going to eventually be an asynchronous function because at the end of the day what we want to do at this point is go out and interact with firebase to log this person in or to sign them in and that takes some time it's an asynchronous task so I may as well label it as asynchronous now so now we pretty much have this all sorted so let me save this now and preview and now we can see we have these two form fields email and password and we have a sign-in button as well but at the minute this does nothing and also when we enter some information into these fields it does nothing either because we have nothing inside these unchanged functions right here and also nothing inside this on pressed function so first of all let's do these things what do we want to happen when a user starts typing in here well what we want to do is track what the user is typing into those fields and then maybe store the current value of those fields inside some kind of local state variable so what I'm going to do is create two pieces of state right here and these pieces of state are going to store these two fields or these two values that are in these fields so let's say text field state and then underneath we'll do a string for the email and set it to be an empty string to begin with and then also a string for the password and that is going to be an empty string to begin with as well so now when a user starts to type into this one the email we want to update the state's so that this email property is now equal to the value whatever is in the fall field at that moment in time so to do that we can use set state set state like so and this accepts a function and in that function all we want to do is say email is equal to value so we're taking the email state and we're setting it equal to whatever the value currently is inside that farm field that makes sense right now we want to do something similar for the password so let me copy this dude and paste it down here and this time we want to update the password a bit of state with whatever the value is so now we're tracking those two things so now what we could do at the end when we press this button is print out the state the password and the email so let's do that let's say print and first of all the email so we're referencing the email state right here and then secondly we want to print out the password as well so let's do that print password like so and save so now I'm going to open up this debug console and I'm going to delete these things in fact I'm going to just refresh over here so we can start from scratch and now if I type in an email like Mario the net oops that's not the at symbol that's the net ninja code at UK and then down here we'll just say test one two three four if we sign in now we should see those values logged down here in the console so now we're able to keep track of these values and in the future instead of just printing them here and what we'll do is take those values and interact with firebase to sign that user up with their email and their password that makes sense right cool so now we have the sign in form we need to also do something very similar for the register form so let us first of all create that file over here inside the authenticate folder so a new file and we'll call it register dot dot and inside that file first of all we want to import material so material like so and then we want to create a stateful widget so SD ful tab and we'll call this register and then down here we want to return some kind of template again now I'm not going to write all of this out again instead what I'm going to do is just grab all of the return statement here the scaffold and copy it and I'm going to paste it right here instead of this container so paste that in and you'll notice at the minute we do get a few errors because this doesn't exist in this widget the email states and the password doesn't and down here as well but we'll address those errors in a second first of all I want to say here register or rather we'll say sign up not register sign up to blue group and then down here on the button instead of saying sign in wherever the butt of it there it is will say register like so and then we have to create this state so let me go back to sign-in where we have that state at the top and grab it and paste it over here so inside the state object paste that in also gonna grab this thing because we don't need it just yet the auth service but we will be using it in the future in both of these widgets so I'm going to copy that and I'm going to paste that in here as well so we can use in future tutorials now obviously we've not imported that so let's import that first of all so import and then we need to go into the services folder and we also need the auth file inside that that's the auth service and then I think that is just about it so if I was to save this now then I should yeah there's no more errors I should be able to go to the authenticate widget and instead of returning the sign-in I'm gonna return the register widget like so obviously we need to import that so let me come down here and say import and it's going to be inside screens and we want to go inside authenticate and then register so let me save that and now we should see the register screen sign up to brew crew and this should work exactly the same way I'm just going to enter in any old rubbish and register but let me open up the debug console first of all so we can see this register and now we see those values down in the console so this is all working so far we have a couple of different forms now one for signing in and want for registering and we just need to now hook this up with firebase but before we do that I want to do a couple more things first and the first thing I want to do is allow the user to be able to switch between the register screen and also the sign-in screen because if they have an account they don't want to re-register they want to sign in and if they don't have an account and they're on the sign-in page they want a way to get to the register page instead so we need some kind of link and I'm going to place it up here in the app bar so we'll tackle that switching between these two views in the next video