Flutter and Firebase Authentication | Email & Password Login/SignUp (Flutter 2.2) | Part 1

flutter is a great tool when it comes to developing apps for different platform with same code base but this tool get more exciting when we add firebase to it in this series of flutter and firebase authentication we'll be creating complete signup and login system which will help you know about topics like validation of entered data cloud firestore flooded tools for errors and much more now let's see how our app look this you can see this is our login page with with email field well enter any random email so let's say i entered a password of four character then it will show please enter a password of six character and after that if i click on login then you can see there is no user with this email so let's create a new user you will go to this registration where you can create a user let's write a username as user1 then we'll create a new gmail address we'll write user one and now let's say i entered three characters for this password and i also entered three character here so this will again show us that we have to enter a minimum character of six so let me create a password here and let me write one two three four five six okay now when i click on sign up so it will create the account for us and what our cloud file store will do is it will fetch the name of the user and also the email and it will show as welcome back user one user one android gmail.com and a logout button so this is everything that we'll be creating in this video just a quick tip all the resources and time stamps are mentioned in the description so do check them without any further ado let's get started okay so in part one of this flutter and firebase series we'll be building the ui for our application so for building the ui this is our login screen which will have our logo and that to field so this will be the registration screen which will be creating and also this will be the final home screen which will be creating so without any further ado let's get started let me just open up my visual studio code and here i'll click on run i would like to start a new project this will ask for the director in which i want to create a project so i'll just click on desktop and here i will select a project and i will write the name of this application as email password login click on enter so we just need to wait for a while for the flutter to create the project for us in this tutorial we'll be just focusing on building the ui and will not integrate any dependencies or rather firebase so here you can see we got a project created here is our main.dart file and we can just remove all of this and we have to set our home so before doing that i will just go to this application and this library folder and here i will create a new project folder and i will read and and i will write the name of that folder as screen so in our screens folder we will have to create three screen first one would be our login screen login screen dot dot and the second one would be a home screen and the third one would be a registration screen okay we got our registration screen home screen and login screen created now let me just start designing our login screen first so i like material.dart and here i will write a stateful widget and i will write the name of this stateful widget as login screen okay i'll just click on save i'll close this login screen and what next i will be doing is i'll be just opening the screenshot of logging screen side by side to this coding area so that i get a reference of what we'll be building completely so here i guess this is the login screen ui yeah so this is the login screen ui so let me just go here and just drag it here okay perfect here we can see we have this image then text field form field reader text form field for email and then text form field for password then our login button and also we have this cool section which will be which will redirect us to our registration screen so now let's start designing this ui before that we'll just call we will just also add this logo to our project so we'll be creating a new folder in our project and write this name off i'll write the name of this as asset and in this website we'll just go to a desktop because on my desktop i have already saved this logo for us so i don't have to waste too much of your time so i'll just click and i'll just drag this to this i'll just drag the logo to our asset folder and here we also have to just go to our pub spec file and just add the and write the this will add the logo to our project i'll write logo dot png you just wait for a while for flutter command to run and add the logo to our project till that we can what we can do is we'll just remove this my home page and i will write login screen i guess okay login screen so this will be our login screen okay perfect i'll just delete all this boiler code and here i can write email and password login i don't need to do this i'm just doing for the sake of this tutorial and in primary scratch i will write red okay so this is our main.file now we don't need to do anything else other than this then go to my login screen so this is our login screen which we need to design we also added asset we also added the logo to our project now let's start designing our application before designing we need to pass some parameter first parameter would be a form key which will be helpful in validating the email and password field when in user click on login button so i'll just click i will just type final on key here i will write global key this would be of form state the next step is we need to write our editing controller like final text editing controller and here we will write first controller would be email controller we'll just copy this thing and paste it here and here in place of email we will like password controller okay so we got our email editing controller done because we got our form key done now the next step is to create our e email field i'll go i'll go in here i'll go here and i will write this as email page this would be final email field of type text form field and here in the text form field we need to first of all disable this autofocus i will write false and our controller would be email control we will define the keyboard type for this field it will be text input type email okay and here this option of validator it will be not doing in this tutorial okay i guess we need to close this and we will have this on save function which will be saving the value when whenever a user type in rc so like email controller dot x and this would be value okay now we also need to create an input action input action is something when a user click on this email field and on the side on the right bottom side of the keyboard there will be an here there will be an option of clicking next let me just show you text input action and this would be a next okay so we got our email field we'll be just decorating all the field also in just a while we'll just copy paste it here we'll write password field it should be the transfer controller we have to remove this keyboard type and on this input button we will write done and here we need to write password controller dot text so we got everything set up for the password field also now we can just go to this section and i will return a scaffold and the scaffold will have a background color white color dot white now we have our body this would be a center widget in the center widget we will have a children of single child problems it will also have a child of let's say a container which will hold re logo and email and email field in this controller you can just write color okay we don't need i guess that and in this container we will have our form like form a form will have a column i guess let me just see okay this is our form here we will have a column and in this in this column we will have our children first children would be email field second would be password field for us i'm just structuring all this i'll just provide more values to this after i run the app on my emulator okay so we got this setup now let me just also provide the value of this key which would be okay so you just click on save and run the application for now and see how this is looking okay so here you can see we got our app successfully run and here we have two field first field wood is an email field second one is and password field but you can see the these are two simple fields which no with no design no padding and nothing so we'll just start customizing this i'll just go to my email field let me just write password here okay so i'll go to my email field and here i will create declaration for this i would like declaration so we'll write input decoration so in this input declaration we will to provide some values like first value would be our icon so here you can see in this screenshot we have an icon then our hint test text then our hint text so we will just write and prefix icon and i will write icon icons dot mail okay now in the next and now the next thing is we'll be also providing a padding for this so i'll write edge insects from ldtrb this will be i guess 20 then 15 and 20 then 15 okay now let me just uh save and see our app for now okay here you can see we have the icon and now we'll be also providing our hint text this would be hint text this will be email after that we have to provide the border radius so what i can do is i will write an outline input border and here in this outline input folder we will write border radius and then we can paste copy and paste that thing now let me just hot let me just reload the application here you can see we got our border so this was everything that you need to do in design part now we can just copy this decoration and paste it in our password field also we'll just click on save okay here you can see we have this we can write vpn key now let's okay so it has changed the icon also it has changed this like and this icon is also different this i can different now i just need to change the hinter text light password okay here you can see password now we got our email field setup we've also got our password field setup now the next step is we have to create our button so i will write final this will be a login button of material type okay in our password field we have to also provide this value which is obscure text so whenever any user enter the password so we don't display the password of this let me hide this and let's see what will be happening what will happen let me a hearty old application here you can see we got our password to be here we are showing our password to the user we'll just write obscure test okay now the next thing is we have to write this login button we'll write an elevation of let's say five then we will also provide a border radius this will be let's say i guess we have copied that border radius border radius this will be circular of value let's say 30 here for showing how our button look we will also provide this login button okay now we have to provide a child this would be material button and here in this material button we have to write on press function first so i for now for this tutorial in ui building we will not write the on press function the next step we need to do is we have to provide a child for this like text and i will and here i will write login on the next step is we have to design this button so i will write uh first of all let me just give a red accent color i will like color colors dot red essent let me just save okay now i'll go to our material button and here you have to define some properties like padding you can copy the padding that we just went here just copy and here i will like padding we'll just copy and paste it and we will go to our minimum wage and we will copy the width of our media query or rather our root section i let off context dot with rather it will be size dot width okay now the width of this would be equal to our of our column next step is we have to define this child also we will write text align this would be text align dot center and after that you have to provide a style for a button while a text style and the button style would be font size let's say 20 and the color would be colors dot white and the last thing is our font weight so i like want wait dot bold why is it showing me an error okay we got our login button done we also got our password done password field done and email field done we are we haven't defined this validator thing which will be defining in next tutorial then we will start coding for our firebase authentication then we will defining our validator for email password and login button for this tutorial we'll be just designing our ui now here you can see we will just written the scaffold in our scaffold we have to provide some other values also so here let's say i have this center then single child view then a container and then a form now we need to provide some padding to this form so i'll just cop wrap this with a padding and here in this padding i will provide let's say 36 and now let me hot regular start the application okay so we got our padding now the next step is we have to write main axis alignment this will be main accessor alignment dot center then would be cross axis alignment this would be cross axis alignment dot center now we have our children we'll write the children to be of type visit because we'll be integrating size the box in here okay now let's call our site box and here we will provide let's say a height of 200 with a child of image dot asset and here we will write the name of our image we will write assets logo dot png i'm providing a bot bot and providing a box fit for this image highlight fit box set dot content you just click on save and also provide a comma here okay here you can see we got our image also loaded now the next step is we have to provide some height between this field i like size box it's a height of 45 in this copy and paste it in here i'll paste it here also here also and here also let me also open my login design here you can see we have our logo email field password field login button we just need to integrate this don't have an account signup section so if an user click on sign up it will be redirected to a registration page so we'll just create that in a while let me just design this thing just click on save here you can see we got us some padding for uh we got some design let me just adjust this i'll provide 25 and after password field i let's say 35 after password and after our login button will let's say 15. i'll click on save okay here we'll create a row in which we'll have that its children and this children would be of let's say widget type and we will also provide a main axis alignment for this row like main x's alignment dot center okay and now in this children we will first the first children first children would be a texture would be a text i will write don't have an account question mark and then we have our gesture detector which will detect when a user click on this gesture detector here we will write on tab let me just go and write it here and then will be a child file would be your text i will write [Applause] sign up will provide some value to this child will provide some value to this text i like text style and here let's say i write font weight as font weight dot uh 6 400 600 anything that you like according to your choice font size would be it will be here font size would be less 15 we don't need the text format here just click on save i can set this size as 600 okay cool rather if you want we can just change the design i'll write color colors dot red ascent this look nice then okay so we got our login app login screen created we have this we have this we got this thing done okay we have a login button you also have a sign up button now if i click on the sign up button then what it should do it will take us to our registration screen now let me just go to my registration screen and here i will write import i will write material and help create a state full widget and i will write it write this as registration screen now in our registration screen uh now if i click on on tab what it should do what it should do for us is it will call this navigator now you like push and here we have to define a context then our root would be material page root okay in a material page root let me write context and then this will redirect us to the registration okay i guess and this will direct me to the registration screen okay i can write now let me just restart the application and now when i click this email field is working this password field is working now when i click on the sign up speed sign a button here we are redirected to this registration screen now let's go to our registration screen and here we will design our screen so here let me just close this screenshot and open the open up the registration screenshot here okay i'll just place this to side by side here what you can see we have this image as as we have designed in login then we have this first name second name email password confirm password and sign up button so before doing that we have to create some parameters first would be our form key so we'll write final form keep this would be a global key of form state okay now we have to define our editing controllers so we have to write final then this would be first name editing controller is equal to new text editing controller okay so this will be our first name editing controller we'll just copy and paste this for let's say second name then our email password and then confirm password so i like second name and here what i can do is i can write email editing controller and this would be password editing controller and then this would be confirm password and from password editing controller okay now default okay so we got our parameters now let's start designing our application so we can just copy the email field that we created in our login button login screen rather i'll just click on this i'll copy here okay i'll copy and paste it here and here in place of email field i will write first name field this will become first name field here it will be first name editing controller just copy put a comma here we'll paste it here we got our first name okay so now we can copy and paste this i guess one two three four four times first name second name then our email then our password then our confirm password so now we have to design it now let's say our first thing would be second name i will write second name field and here in this first name editing controller we will write second name editing controller just press enter and copy this and paste it here for a keyboard type we can write it as name okay i'll also write this for this and here we can write second name okay now we got our second name done now let's now the next thing is we need to write email feed like email this will become email text writing controller and here we have email already done we will write email okay we got our email field also done next field is we have to write our password field okay now in password field we have to write password editing controller keyboard type we don't need a keyboard type for this rather we need an obscure text so i'll write true okay and here in our confirm password i'll write or rather just select this and i will let confirm password field and here i will like confirm password put a comma there with copy just delete this keyboard type and here we will write i guess let's say what we have to write okay obscure text write true and this will become copy this paste it here as now as this is the last but uh option here so we'll write text input action this will be done let me just save everything up and we have to also define our scaffold only then we'll be able to show that to our user we'll just go to login screen here we can copy this scaffold you don't need to think much about this just click on copy we'll paste it here now next step is we'll just write this as we don't have a sign up button for now we'll also remove this don't have an account section because we don't need this we'll delete this row okay now in this we have email password email field and password field we also need to copy this paste it here first name second name then email then password and then we have our last confirm password so i'll write this will become first name field this will become second name field this will become our email field and then we have our password field and after the password field we have our confirm password field click on save now let me just go to our terminal and restart the application and go to our device okay so here you can see we have our device we have this login screen with email password and the login button and now let's say i click on this don't have an account so i'll click on the sign up and here we are directly to our registration screen we have first name second name email then the password then just confirm password so we have to change this value i'll just go here we have this first name okay first name and we have the name type okay this is okay first name in a name you have to change this prefix icon so i'll just go here and i will write account circle i guess this was the name yes this will be an account circle just click i'll just copy this and i will also paste it here in second name we have email email one is okay then we have to just change we have to change the type here we will write vpn key rather vpn and here we have to write password and then next thing is you have to write confirm password i click on save go to my terminal restart the app first name second name email password confirm password we haven't changed like this okay vpn key now as you can see there are uneven distance between all of these so i'll just go to my site where i'll go to my scaffold and here i have to change these properties here let's say i will change the height as 180 and then we'll change the size box okay we can provide some even height here 20 20 20 20 20 20. let me just restart that first name second name email password confirm password next step is we have to design we have to create ours this will be confirm password okay just save this will be password field just save this also this is my email i'll write email this is also okay this is we have a second name then we have our first name here so we got our first name second name email field and confirm password here now what we can do is we have to write our sign up button in a single button you can just copy it from our login because these are actually the same thing we have to just implement them one and the next we can and in the next we can just copy them copy this and paste it here and here i will like sign up button and this will be sign up okay and now on press we have we haven't defined anything because we don't we'll be defining it when we'll be integrating in firebase let me just save this and here we have to provide this sign up button after that we can if you want you can provide some height here let's say 10 let's say 15 now let me save everything and hot restart my application my app got hot restarted i here i have the login screen if i click on sign up is here you can see we have the first name second name email password confirm password and sign up button other thing that you can see in our screenshot we have this go back button in which if i click on this go back i can go to my login screen so here we can go to this scaffold and here in this capital we will write app bar this will become app bar in a ram bar we have to provide first transparency as we have to provide this background color as transparent so how you can do that you light background color this will be current current colors or transparent now let me just reload the application but now as you can see even after providing transparency i have this uneven design so what you can do you can write elevation i'll provide elevation as zero click on save i'll hotter you start the application now you can see in our app record this removed now we need to provide this button here so i'll write leading icon button it will have an icon icon icons dot arrow back of color let's say color dot red and now if i press on this button we need to pass this navigator to our root and our root will be our login screen pop passing this to our root i can just restart the application okay i got my app restarted now let's say this is the login screen password you click on sign up and here you can see we have this button and here you can see this just showing me next and in my email this is showing me this option because we have selected a type as email now this is an obscure okay now if i click on next and go back it will be redirected me to the login page now we can just close this also next thing we have to design is our home screen now let me just open my home screen okay so i got my home screen here this is a simple screen you can don't need to just complicate this much i like material dot dot and here i would like to state full widget like home screen and now we have to return a scaffold in our scaffold we will written an app bar let's say app bar this will happen title let's say welcome center title this will be true we have to design our body so i'll write center child a child would be padding of let's say edge insects all around 20. okay after padding when this padding have to create another child which will be our column you can define some properties main axis center the cross axis center then our children that will be our widget this will be site box of height let's say 180 this will have a child of image as we did in our login and registration screen assets.logo.png it will have a fix of box fit dot contain okay [Music] after our button after our logo [Music] we can just we can remove the size to be 150 it is okay and here we have to write text highlight welcome back and this is the like text style i like font size let's say 20 point weight a bold font bold okay after that we will have a size box with height let's say 10. then we will have these two values our name with this design style textile color would be color for black i need light design font weight would be let's say 600 anything that you can choose this is just to this home screen is just the implementation of how you can retrieve the data from your firebase database so you can just play around this as according to your need click on save you got a name next step we can get our email twilight email just copy this paste it here now after this name and email thing we have to provide a logout button i will write log out i will provide a distance let's set 15 and he will write an action chip with a label let's set text log out and on press function of which we'll be not doing in this tutorial i guess that's all for okay now let me just restart my application but how will be how my app will be redirected to this home screen because we haven't added anything about redirection to home screen we haven't we have added this sign up we can go to sign in we can go to login but we haven't added our home screen so for this for this ui design i can what we can do is if i click on this login button i will be redirected to the home screen so how you can do that you just go to this login and now in our login button we can go to this on press section and here i will write navigator dot push this will be context [Music] next would be material page root this will also be context enable i will light home screen home screen and click on save and just hot restart my application close this thing also preview things and open up my device okay so we got our app parts restarted what we can do is you can see you have this sign up you can also go back to a login again if i click on login will be redirected to this welcome screen okay we have to remove this app bar from welcome screen i guess now here you can see we are here you can see we have this bag button also we don't need this because we have to once a user log is on to their home page you don't need to go to a logout section so how you can remove it we'll go to a login we'll go to this button and here i will write push replacement then i guess everything is okay let me just remove this click on save i'll auto restart application here you can see we have this login main page signup screen with all these fields we can go back to our login screen and if i click on login will be redirected to our home screen so that's all for this part one in the next part we'll be integrating firebase and adding all validators and linking our firebase to our application so do subscribe the channel for not missing this email authentication thank you for watching you

Channel: Backslash Flutter

Views: 95,417

Keywords: flutter and firebase authentication, flutter firebase, email and password login/signup, flutter firebase tutorial, flutter firebase login, flutter login signup, login signup flutter, firebase and flutter authentication, email and password login flutter firebase, flutter tutorial for beginners, flutter firebase auth, email and password login signup, flutter firebase auth ui, email and password login/signup for beginners, Email & Password Login/SignUp In Flutter 2.2, flutter

Id: 3DO6Th9A7mY

Length: 46min 22sec (2782 seconds)

Published: Wed Sep 08 2021