Modern Design Flutter Login Page UI | Flutter Login Screen 2023

assalamualaikum and welcome back to bodybuity today we're going to learn how to create a logic screen design in flutter if you are following you know that we are creating login filter application this application can be used in any type of flutter application which requires login and sign up functionality and in today's tutorial we are going to create this login screen but in the previous tutorial we already covered all the top listed screens and after this design portion we are going to jump towards this back end so let's see what we are going to learn today this is the splash screen you can see on the screen with the animation we also created the native splash screen and after this animation welcome screen appears so in here you can see it's also animating so animation was the previous tutorial so you can get all these tutorials link is in the description okay when we click on this login screen and you can see this is the login screen that we are going to design so we will divide the screen in three portions the first one is this image with two text and then we have a complete form till the login button and after that we have one text and two buttons so we have divided this into three portions so to get all the previous links and all the playlists so you just have to click on the description below and inside you will get the link to this playlist and then you can see we have all the tutorials related to all the elements and if you open any of the video just go to the descriptions and in here you can see we have the links there is the complete playlist link and this is where from you can get all the resources and a complete project so it is according with t dot com slash flutter login app over here and inside you can see this is a complete i will drop the link to the downloadable button over here and inside you can see these are the color codes these are the fonts these are the tutorials and then we have complete list cleaners.images sizes and text. so you can get all the data from here so without wasting time let's get started over under studio and we are inside the project we created for our photo login application for today's tutorial the first thing we need to do is go to assets to check if we need to add an image so we don't need to add an image because we are going to use this welcome screen image after that we just go to logos and in here you can see i have already added a google logo so once assets added go to the lib folder inside the source go to the constraints and we don't need any new color inside the image strings you can see we are going to use the same welcome screen image and also this google logo image so both are defined so instead of using the strings we will use this variable and then we don't have to define any size but in the text strings over here you can see in the login screen text so you can get all these resources from codingwithtee.com so let's close the constraints okay now let's go to features if you're new you can watch the folder structure tutorial from the same playlist in the screens let's create a login folder and file so you created a login folder with the login screen. inside it now inside this login screen just import the material.package and create a stateless widget which is the login screen but we want to grab it with a scaffold so press alt enter wrap it with the widget name it scaffold okay now again inside the container we want to make our layout scrollable so we will again wrap this container with a widget called single child scroll view control alt to align the code now inside the scaffold we have single child school view which is going to take a single child not a list of children and it is going to make it scroll level right so now inside this container let's add padding so we will use the default size which is td port size import the library you can see it's inside the constraints slash sizes after the padding let's add a child and as a child we will use column because inside the column we will place all the elements as its children that's at the first children which is the image we will use asset image because we already have an image created we will use the welcome screen image which we already defined in the image strings after the image we need two text first one is the login title import library ctrl d to duplicate and change this t log into t login subtitle now as a style let's give it a theme the text theme that we already created and we will pass headline two or headline one it's up to you and pause the body text one for the subtitle we know let's try to run the application okay so our application is running this is flash screen and then we have the welcome screen click on this login we now insert the screen when the login button is clicked we want to switch it to the login screen so go to welcome screen dot dot and inside this outline button let's use the get text property you can use navigator load of context but i am going to use the get x property which is get dot 2 and inside we will call login screen go now click on this login button and you can see we have one image and two text but a line in the center and the image is too big let's close this and and now the first thing is we need to make sure that inside the column cross axis alignment should be at the start so element should start from the left side let's save it and you can see the text has been moved to the left side now to make this image responsive because different devices have different screen sizes so we will first get the size of this whole device so using media query with the context we can get the size so inside this size we have other properties like height width aspect ratio and a bunch of other properties but we get this size go to this image as a height of this image or you can also play with the width but at the height of the image i will pass size dot height give it only two percent of the screen so multiply it with the 0.2 let's save the code and you can see the image has been shrinked to the top okay the first portion is completed but in here you can see that the image is currently overlapping with our safe area with our top bar so we will wrap this scaffold with a safe area because we don't want to go into that area let's save it and you can see that now it's black this region is not being used now the first block is ready so i have added comment as section one and it's under here and the section two now it's the form so let's create a form if you don't know anything about the forms the text form fields button and how to submit a form i suggest you watch the previous crash course tutorial and typically the third section of this crash course tutorial which is completely related to forms and fields we're now inside this form as a child we are going to use because it's again a single child so we will use a column place list of items inside this column i had a children and ask me to make all the elements to the left side we will simply copy this and paste the cross-section alignment to start as a list of children's the first one is the outline the first one is the text form field we know inside this text form field we will go to decoration and use input decoration the first thing is the icon so we will use the prefix icon these are the material icons but if you want to use font or some icons we have already created the video about the icons in the same photo crash course so i'll drop the link in the description you can avoid that as well so after the prefix icon we want to add a label text okay as uh in label text we are we have already created the email okay after the label text let's add hint text or you can say a placeholder text which will be same email okay now let's save it and you can see we have the logo with the email and also the placeholder is being placed over there so if you want to keep the same style without the bottom line you can use it if you want to add a border we have a water property and as a water property we can use outline input border save it and you can see the water has been applied you have to add a spacing inside the form let's there are two ways we can either use container with the top and bottom padding and also we can use a size widget so instead of creating using two widgets at the start and end of the form we will create a single widget which is container and inside we can use padding because we only need a vertical fitting so we will use edge insects dot symmetric and let's give it and let's give it 20 save it and you can see the padding has been applied okay so our first text field is ready now to create a second one let's copy this paste it again change this to email to the password change the icon save it you know we have the second texture to add a space in here we will use size box give it a height t form height the variable we have already created over here which is 30 also inside this container i will replace it with the t form height minus 10 which will be 20 so later on if we want to change the spacing of our form we can simply change the value in the inside this deform height and all the values will be updated we're going to save it and space is there we now to make the second field as the password field we are going to add suffix icon and in here we are going to use icon button which i have added a icon button on press is currently null and as i can i have used this eye icon so now we have two text fields again give it a space and i know we want to add the forget password which is a text button so add a text button fast null here as a child use that text which is the t forget password let's save it and you can see it's on the currently on the left side and also the text color you can see is currently disabled because we passed null over here if we pass this angular brackets and save it and you can see the color has been changed but we want to put this button text to the right side so we will wrap this text widget with the line property and as its alignment we will use center right let's save it and you can see it's pushed towards the center right control alt l after this button we need to add elevated button which will be the submit button of this form as it said we will use the text login which will be the upper case let's save it and you can see the default button is the black one with a light text we know to make this elevated button to cover the whole screen we will again wrap it with the and you can see the button is not displaying on the complete size on the complete width so in here our form is completed but you can see it's being it's looking a bit messy so we will inside the form right click go to refactor and extract this as a shorter widget name it login form so we have login form class created let's cut it inside this folder we will create new file login form widget dot dot and we place the login form inside here let's close it import it login form we can also convert or to move these image and to text in another widget so to keep our main file as much clean as possible and also in that case we will not required any commands wrap them with a column widget column with the cross alignment add start and also cut these two text pasted inside it extract it as a flutter widget login header widget refactor again this class has created cut it from here so i also created this login header widget class and let's just import it so in here because we want to extract this footer also so let's say we want to wrap it with a widget in a column again but this time this column will have a cross-section alignment as a center so as its children let's add the text with a simple or let's save it and you can see the r is there so cross-section environment is not in the center because at the top you can see it's in the start so currently column is not taking the complete space shift it towards the left side but we know let's create the google login button which will the outline button on press is currently done and as a text we will use t sign in google let's save it and you can see it's there but now we want to also add icon with this controller to align and with outline button we will write dot icon and now as i can we can pass the icon whatever we want to use this icon is a widget so it's not necessary to use the icon but we can use the image so we'll use the asset image and go to constraints inside the image strings you can see we already have added the google logo image let's paste it over here and now instead of this child we can add label because there's no child for this dot icon property let's save this and you can see the logo is too big it's overlapping so inside we can give it a width of 20 let's save it and you can see now it's looking nice also to make it cover the complete screen we will do the same as for as we already done wrap it with as we already done we will wrap it with the size widget size box and as a width we will use double dot infinity and you can see it's currently covering the complete screen and also this outline button and the elevated button design has already been created inside the utils go to themes and you can see we have created elevated button theme and outline button theme along with the text theme so these are both for the light and dark theme so you can watch previous videos for this theme effect okay here i've added a side box with the height of 10 with the which is between or and google button go login button and next to this again create some space and let's add the last one which is the text button let's save it okay the text button is done with the children has a venue which is the t already have an account so you can see it's right here ctrl or l2 align but at the end you can see we don't have any login option so we will wrap this text with the dot rich property which we already learned in our flutter cache course let's cut the text we will use text pane and as a text let's paste the first property so let me add a constant inside the text pane we have a property which is the children's and let's add another text pane this time the text will be t sorry it's so it's not t already have an account but it's the text which is that you don't have an account because we are inside login and as a text when we will use the sign up let's save it and you can see the both texts are now connected don't have an account sign up again here you can see i have just assigned themes body text one for the first text and then in the text pane simply change the text style with the color blue to design up so you can see by clicking on it it's a single button but using a text outreach we can distribute the themes for the same text so now the design is ready the last thing is we can also extract this widget by right click refactor and extract flutter widget name it login footer widget refactor cut it from here and same as for create a new file again here i have created the login photo widget go back import this library add a constant and that's it so this is the design of our login screen so now it's readable so this is how we basically design the professional applications we have the login folder and now inside the main one is this login screen and then we have its three widgets so in the upcoming tutorial we will create the sign up which is going to be very informative tutorial if you are new you can watch and once the design is completed we will as at the start you see we will switch towards our backend which is the firebase and we will use sessions to store the data and bunch of other things so if you are new please don't forget to subscribe and hit the bell icon and if you like this video hit the like button as well thank you for watching take care allah office

Channel: Coding With T

Views: 44,495

Keywords: flutter login ui, login page in flutter, login page flutter, login page flutter tutorial, login page flutter ui, modern login ui flutter, flutter login page, flutter login and signup with firebase, flutter login ui 2023, login screen in flutter, login screen in flutter 2023, flutter login page 2023, flutter login screen design, flutter login screen with firebase, flutter ui design tutorial, coding with tea, login screen 2023, welcome login signup page flutter

Id: T5ACgTqqtbk

Length: 15min 45sec (945 seconds)

Published: Sun Sep 18 2022