Login Page in Flutter tutorial - Flutter Login Page UI 2023

today we are going to learn how to create a modern and an elegant login user interface okay so first of all let's quickly have a look what we are going to achieve in this tutorial as you can see on your screen first of all we learn how to create a splash screen after that we have onboarding screen we'll learn how to create onboarding in the previous tutorial whereas today when we are going to click on this next button we will be redirected towards this login screen let me first show you the dark mode of this login when you switch your device mode you will see that automatically your screen has been changed and we have this nice looking both light and dark more text Fields then we have buttons icon buttons we have a divider we have text title and an image at the top which is also being changed when the theme mode is being changed so this is what we are going to learn today okay if you are following the playlist we are creating flutter eCommerce application and as you all know we already covered flutter configuration part section one and we will learn how to set up themes what are the helper functions that we're going to use constraints emails and bunch of other things which you can learn in section one after that we are currently working on the section 2 in this section in the previous tutorial we learned how to create an onboarding screen and for today's tutorial we are going to design the login screen Android studio and start coding again here this is the screen we created in the previous audio which is the onboarding screen for today's tutorial let's go to the features and inside the features go to authentication and inside previously we only had onboarding screen and today let's create a new package or the new folder name it login right click create a new file name it login.dart add import material Library to create a new class we will use STL for the shortcut and we will name it login screen then remove this placeholder and change it with a scaffold okay inside the scaffold first of all because we want to make our design scrollable for smaller screens so the first thing in the body of the scaffold we will use single child scroll View and inside the single charge scroll view we will add a single child so the first thing we will add spacing around the screen inside the pudding you can see I have added top heading as app bar height padding inside the sizes we have already covered in section one inside the sizes we have bunch of other sizes and for the app bar height I have already given 56 as a height and then as a default space of the screen we are using 24 for the complete project because in most of the cases we might need this again and again in case of top specific and left bottom and other things for that we can go to Common folder and inside the Styles we can create something like spacing Styles in which we can add different type of spaces okay here I have created a spacing styles. and inside this class you can see it's a t spacing style and with the same procedure we created for the color sizes a simple class with a static variable which contains or which is returning Edge insects geometry padding with AB bar height now instead of providing this we can give T spacing style dot padding with height and that's it so once we have assigned the padding let's define the child and inside we are going to provide everything inside vertical Direction because first of all we have text then we have elements stacked in a column direction or in a vertical Direction that's why we are going to use the column as the children of the column we can create its logo title and subtitle the first thing is logo so let me just wrap it within another column just to make sure that we are going to divide these all things in a separate category if you see the design I am going to divide this into usually four parts the first thing is the heading then we have a form and after the form we have a simple divider which is going to be reusable so that's why we are going to create a separate simple divider which can be reused inside your applications after that we have a simple footer so the first thing which is logo title and subtitle as a children because we are going to align all the elements of this column to the left side cross access alignment will be cross access alignment dot start and in the children first thing we need to add as an image so height of the image will be 150 as an image we are going to use acid image because we have already added our image so to add the image we will use T images dark app logo or we have light app logo so let me show you inside the team in this class we have dial cap logo and Light app logo already defined these are the same logos when you go to the assets and logos we use for the splash screen so these are the same we have already defined in these T images class now head back and if we're going to switch it to the light mode then definitely we want to use a dark logo and if you are using the dark mode we will switch it to the light logo so for that at the top let's first create a variable a variable which is T helper functions is dark mode we are we covered already is dark mode is simply theme dot of context dot brightness is equal is equal to dark brightness if this is the case it is going to return true and in here let's just use dark question mark If dark is true means we have a dark mode then we are going to use the light app logo otherwise we are going to use dark cap logo so let's remove this constant and the error will be gone so once we have the image added the next thing we need to add the title of this login screen so for the title again we're going to using text widget but for the text we have already added text in the T text import this Dot Login title as a style we are going to use the theme dot of contact go to text theme and for this I am going to use headline medium press Ctrl D to duplicate for the login subtitle change the theme style to body medium and to add space between these two I am going to use D sizes property which is this one and I'm going to use this small property which is 8.0 to give small space between heading and subheading okay now we have logo title and subtitle is ready next thing we want to create a form create a form and as a child of the form we are again going to divide this into a separate widget so let's add a column because this whole form is going to be in a separate mode and form only contains a single child so the single child we have to provide column and inside the column again we are going to stack all the text fields and Tech buttons and bunch of other so as an email let's first create text form field and as a decoration of this email we will use input decoration because we will add label and icon inside this decoration so first thing is a prefix icon we're going to use this icons x dot direct write for the prefix icon and and label text T text Dot email is a simple email you can see I have added all the text strings which required for authentication screens login title login subtitle sign up forget password change your password confirm email your account created and all the authentication form related keywords are here so we just have to call them over here let's add like this Ctrl alt L to align add constant at the start next after this text field we are going to add a small space between two text Fields email and password which is a space between input fields which I have already I defined as a 16 so let me just create text field for the password copy and paste change this icon to password check change this email text to text for and one more thing in here we are going to use as suffix icon because it is a toggleable password so we have to use suffix icon again we will use icons x dot I underscore skill slash and let me add comma Control Alt l so we have two text Fields ready next again we are going to add space between input Fields but I am going to divide it with the 2 to add a small space okay next we need to add remember me and forget password as you can see there are two things remember me and forget password button in a same row so we have to use row over here as a children we're going to create two things the first thing will be remember me and second thing will be the forget password now inside this remember me you can see again we have two things first is the check box then we are going to use the text let's simply add row and Children of the row will be the first thing is a check box let's say for now because we're going to toggle it later on but first for the test case you can make it true or false it will be selected or not selected and as a value it will give us some value to or false once the checkbox is created next let's create a text detect so remember me if you're confused about that why we are not designing these text fields and also the check boxes buttons Etc so I suggest you to watch the previous theme video because when you go to the utils inside the theme custom themes you can see we have checkbox theme elevated button Outlet button text field text theme about theme so we have already covered each and everything so this is the reason we don't have to design these things again and again okay remember me is completed now let's create the forget password we will use text button on press for the time being is going to be nailed because we don't have forget password screen created but once let's forget password screen is created we will simply call forget password screen right over here then as a child we are going to use again T text which is a forget password text written over here after remembering and forget password we have to provide a space which is space between sections press Ctrl alt L to align the code okay form is almost completed we need to create two buttons sign in button and create account button we will use elevated button for the first one again for the time being on press is going to be null as a child we are going to use text T text DOT sign in now to make this button full width because currently elevator button is designed as per the theme but it is not defined to be a full width to make this button full width we will wrap this widget with a sized box and as a width of this we are going to provide double dot Infinity okay let's just copy this and paste it over here change this elevated button to outline button change this text create account and again these two will be full bits so that's why we are going to use size box you can see the code is growing bigger so we can easily convert this by clicking right click refactor and extract it as a widget which I will do at the end of the video create separate widgets to make the code clean let's add space between sections at the end of these two buttons okay to move the password to the right side or to add space inside this row we're going to use the main axis alignment because rows main axis alignment is horizontal we will add space between now to add space between the form we will wrap our column with a padding property and this time we are going to use the symmetric as we only need to add space from top and bottom so vertical will be space between sections let's save it now let's add the space between two buttons uh in between two buttons we're going to use space between items so let me show you space between item is 16 and space between section is 32. the next thing we need to add is a divider we have two dividers and one text so let's create our own divider with the using row so also we are going to use this main axis alignment to Center to make the row in the center and then as a first child we are going to use the divider the first property is a color property if current mode is dark mode then we're going to use T colors.dark gray otherwise if it is light mode we will use the color as simple gray next thing we need to add the thickness will be 0.5 we have to make this divider not to be covering full width but instead we are going to make it indent and then it basically a space so the and then we'll start from the left side and move towards the right side so start indent or simple indent will be 60 and any Dent is the right side just before the text we are going to add a special space which will be 5 and as we are inside previously on the onboarding screen let's go to onboarding controller and to move to the onboarding screen when we're going to press on this next page button we will use get dot off all to remove every screen previously created and will directly go to the login screen okay as you can see when we are going to click on this next button we will be redirected to the next screen and at the end screen we will be redirected to the login okay inside this login you can see we have text nice spacing and then we have this forget password right over here which we recently moved towards the right side then we have two buttons and now we are going to add a divider currently divider is not visible so let me just wrap this divider with a flexible widget let's save the code and now you can see a little gray or the light gray color is being displayed so just Ctrl D to duplicate and the second divider is coming from the left side for the start and end will be 5 and the end and end will be 60 let's save it and you can see space right over here and here and also little bit in between because at the center we are going to add the text text will be whatever text you want to use it is already defined inside the text it will be capitalized and the style we're going to use is a label medium now let's save the code and you can see or sign in with in a medium color because we have already added form space so let me just remove this extra space from there okay now it's looking good next to this divider the last thing we're going to create is a footer so again they will be in a row and we have a children but first of all row will be in the center alignment okay for the social icons let's first create a circular border we will use container inside the container we are going to use the decoration box decoration property border will be in a gray color border.ol and Border radius will be hundred percent okay next to the icon we are going to use the image and width will be icon medium which we have created over here you can play with these width sizes it's all up to you then as an acid image of this icon button we are going to use this Google logo which is defined over here you will go to the assets logo then I have added Facebook icon and also the Google icon you can get the folder structure complete application basic structure from the link given in the description below with all the images and assets so let's close it okay and here you can see we have a Google button created okay once Google button is created add some space you can see I'm adding a width over here which is space between items let's copy this container paste it over here and as a second container again these properties will be same instead of Google we will change this image to the Facebook image let's save it and you can see a small space and next to this we have a Facebook icon let's just add space right after this divider which will be height and paste between sections let's save it and you can see our login design is completed now let me change it to the dark mode and you can see everything is perfectly aligned you can see the design of this text field design of these buttons design of this checkbox everything is created already inside the themes and you can see we have a nice clean code what we can do is we can simply right click refactor and extract time as a flutter widget so let me quickly do them for all okay here you can see I have converted everything into separate widgets if you talk about the login header and login form these are specific widgets for this login screen so that's why I created a widgets folder and inside I have created two separate classes login form which contains everything related to the login form and login header contains text and login image and next you can see we have a form divider this form divider can be used in any type of screen which requires this type of form divider so I have simply created this form divider and the text of this form divider depends on what we are providing this inside this Constructor and it is a required text you can say you can did a simple string which is a final and I am calling this inside this Constructor of this T form divider and simply paste it over here so whenever we are going to use this inside any screen we have to call This And as a divider text we have to provide the text of our choice so after this divider we have created the social button so these are the two social icons created over here and when you hover over it I have created both form divider and social buttons in a generic inside this common folder and inside the widgets created a folder name called login underscore sign up currently we have only one folder so that's why it's being displayed like this so once we have more widgets or more generic widgets you will see the separate folders right below inside this widgets folder and inside is login sign up we have two files form divider and social buttons divider so now our code is pretty much clean we can deal with anything separately okay so that's it for today's video I hope you learned something new if you you learn something new please like the video and if you are new to this channel don't forget to subscribe and hit the Bell icon to get notified about the upcoming videos okay once again you can download the folder structure with all the assets and all the files from the link Down Below in the description and also you can get the complete code of this project again the link is in the description so thank you for watching if you have any questions you can ask me down below in the comments take care Allah office

Channel: Coding With T

Views: 18,931

Keywords: flutter Login screen 2023, login screen design flutter 2023, flutter login screen, login screen in flutter, flutter login page, flutter login page design, flutter login page 2023, login page flutter, sign in flutter ui, flutter sign in page, flutter login screen ui, login screen design in flutter, flutter login form design, flutter login page ui, flutter login form example, Login page in flutter, how to design login page in flutter, coding with tea

Id: _up1K4p1-aY

Length: 16min 44sec (1004 seconds)

Published: Tue Oct 03 2023