Flutter tutorial | Beautiful login and sign up page UI

welcome everyone in this video we show you how you can create this login signup design we will be discussing a lot about the position widget inside of a stack how to add some basic animations without writing a lot of codes also share some tips and tricks and best practices along the way that you can use when creating your app with flutter if it is your first time on this channel we talk about web and mobile app development using different languages and frameworks especially flutter since this is a long video i've broken it down into multiple sections you can also find the breakdowns for the different sections in the timeline below or in the description of the video with that said let's jump into the video i have already created a starter project to spare some time in me typing everything else so here we have an image folder for this background image a config folder where i've created a palette class with a couple of static variables for the colors that we'll be using in the app i have also configured the pubspec dml for the image and added this flutter icons package that gives us access to more than 1000 icons inside of the main.file is just a material app widget that calls our login signup screen class the login signup screen is a stateful widget i have already created twisted variables to manage the different states of the screen we will use them later as we are creating this screen the build method returns the scaffold let's start by adding a background color to the scaffold using our palette background color in the body of the scaffold we'll add a stack widget we need a stack because as you can see in the app we have widgets on top of other widgets and with the stack you can use the position widget that is particularly useful when you want to position a widget in an exact spot of the screen let's create our first position widget for the reader of the screen we'll give it a top of zero to create this part of the screen we will use two containers one for the background image and another for the overlay color above the image we give the first one a height of 300 then we will use the decoration property of the container to add the image to the background it takes a decoration image we will get the image that we added in the pubspec.yaml using the constructor of the asset image class and passing the path of the image for the image to be visible let's make the position widget take the full screen by setting its right and left properties to 0. now we can add the second container let's give it a color with an opacity of 0.85 inside this container we will add a column that will take a rich text and a text widget as children whenever you want to show a line or paragraph that combines multiple styles you should use a reach text and then you will define a separate style for each text span let's give it a style let's use the padding property of the container to position the text inside of it since we don't want the text in the center let's set the cross axis alignment of the column to cross axis alignment start let's add the second text span using the children property of this text span we can copy and paste let's fix the letter spacing in the first text pane now let's create the second text widget and give it a style we'll copy the style from above let's create some spaces between the text using the size box with a height of 5. for this section we will use another position widget remember we are still inside the stack let's give the position with jet a container as a child we will set the height to 380 and for the width we will use media query of context size width minus 40. the minus 40 is because we are going to add a horizontal margin of 20. that means left and right margins let's use the decoration property of the container to style it to give it a color a border radius and some shadows then let's position that container at 200 from the top now let's create the first wall of the container but before let's add a column inside the row we will again add a column for the text and the original bar below the text for the horizontal bar we use a container with a height of 2 a width of 55 and a color of orange let's duplicate this code to create the signup option the horizontal bar is too close to the text widget so let's add some margin let's create some spacing using the main axis alignment property of the row and also add some paddings to the main container to highlight the selected text and make this horizontal bar that will move back and forth between the login and the signup we will use one of our state variables e-sign-up screen for that to work we will also need to add a gesture detector on the column on tap we will call setstate and set the value of its signup screen variable to false that means the user has selected the login screen we will do the same thing for the sign up let's add the gesture detector but this time on tap is sign of screen will receive true now we need to refactor the code to reflect the selection of the user we will set the right color using the ternary operator if it's sign up screen active color else text column 1 for the horizontal bar since we are inside a list instead of using the ternary operator we will use an inline if to show or not show the container this feature was introduced since dart 2.3 the link will be in the description let's implement the same changes for the login option let's organize the cool to make it more readable for the text fields we had a container and inside of it a column i will explain later why i chose to add a container here let's add our first text field one of the important properties of the text field is the decoration property that takes an input decoration we'll use it to add the icon borders edtex and more to make our text field go from something like this to something like that let's start with the prefix icon which takes an icon we will use the flutter icon package to get a material community icon for the border we'll use the enabled border property which takes an outline input border we will use the border side to give it a color and the border radius to make it rounded as you can see when the text field receives the focus the borders disappear to fix that we need to also set the focus border so we can just copy and paste let's add the edtex it takes a string we'll style it using the instyle argument to make the text fill a little smaller we'll use the content padding property of the input decoration now the text field is too close to the first row let's add some margins to the container this is the first reason i added the container there is another reason that we will see later now we have our first text field to create the orders we can duplicate it by copying and pasting but to better organize our code let's extract the section of code in a method we will call it build text field the only thing that changes from one text field to another is the icon the text and the type if it is an email or password let's create those as arguments of the method now we can refactor the code to add the password we'll set the obscure text to his password and for the email we will use the keyboard type if his email is true text input type dot email address else text input type dot text now we can go back to the code where we were to create the other text fields by passing in the right argument the text field are too close to one another so let's go to the method and add some paddings at the bottom now let's create a row for those custom radius inside this row we'll add another row which will have a container with a height of 30 and a width of 30. we'll use the decoration to give it a border border all a width of 1 a color of pallet text color 1 and a border radius circle of 15. let's add an icon inside of the container then a label for the radio using a text widget the text is too close to the container let's give the container a margin right of 8. we could also use a sized box widget with a width of 8 but since we have the container i prefer using the margin so now let's create a second row for the female radio button since it's almost the same code we can copy and paste and just change male to female and add a background to the container let's add a size box with a width of 30. and some paddings at the top and the left to make those radio work we need to add some gesture detectors for that we will use our second state variable ismail we'll first add one on the first row on tap we will set state and set the value of the state variable is male to true now we need to refactor the code to apply the appropriate changes to the container and the icon based on the state of those custom radio buttons let's start with the background of the container we'll use the ternary expression that means if it is male we'll give it a color of gray and if not we'll give it a color of transparent same logic for the border let's implement the same changes for the female custom radio to add this text we will again use a rich text widget the rich text takes too much space and is too close to the rule for that we will wrap it in a container we'll give it a width of 200 and a margin top of 20. if you want to make the text inside a rich text clickable you have to use the gesture recognizer in the text pane but we will not do that today we have implemented a gesture recognizer in this video now to create the submit button we will have to use a trick and this is where a position widget becomes handy the trick will use the position widget to place a rounded container with a right background above the main container then inside this container we will add another container with a gradient background and then we will add the arrow icon let's do that right now inside the stack we'll add the position widget but first let's organize the code and add some comments we'll add the container as a child then another second container let's give the position a top of 100 for now and give the container a height and width of 90. let's add a decoration to give the container a color of right and a border radius to make it circular now we need to place it at the bottom center of this container for that let's set the right and left properties of the position widget to 0 and then change the top to 535 let's wrap it in a center widget this container will have a gradient background for that let's add a decoration box then for the gradient we'll use a linear gradient it takes a list of colors let's add some paddings to the main container then we will set the border radius to border radius circular 3d let's fix the direction of the gradient for that we'll set the begin argument to alignment top left and the end argument to alignment bottom right we need to add some shadows now comes the part that is challenging we need to add a shadow behind this half circle if you try to add the shadow to the right container we can see the shadow above the container and we don't want that so the trick that i found to make this work is to have another white rounded container with the same size at the same position below this main container with a shadow and the one above the container without the shadow instead of duplicating this section of code let's extract this position widget in a method let's call it build bottom half container let's give it a parameter to know when to show the shadows now to add the shadow under the container we need to add the method before disposition widget the reason for that is since we are in a stack the first widget in the stack will be under the other widgets now let's refactor the code to remove the container with the gradient we can uncomment this now let's create this bottom section before implementing the logging in the container where we will animate it for the bottom section we will again use the position widget as child we will add a column then a text widget inside it for now let's set the top argument of the position widget to 600. as you can see the text is not well positioned to fix that we will use the media query of context size height minus 100 to make sure we position the column at 100 pixels above the less visible pixel we reset the right and left properties to zero to make the position widget take the entire width of the screen by default a column will center its children now let's continue with the buttons as you can see in the design the buttons that have elevation in the past we will have used flat buttons but in its latest versions flutter introduced the text button to replace the flat buttons the flat buttons will be duplicated so it's better to use text buttons from now on let's add the first text button the child will be a role of an icon and a text widget to style the text button we will use the style property and give it a text button dot style from method we'll start by adding a background color i'll set the primary color to colors.white then a shape we'll give it a shape of a rounded rectangle border and to make it rounded we'll set the border radius to border radius circular 20 then add a border using the side argument it takes about a side the button is too small let's set the minimum size argument to size 145 for the width and 40 for the height since the buttons are almost the same instead of writing all this code let's extract it in a method and provide the icon text and background color as parameters let's quickly refactor the code to include those new parameters let's go back to the column and pass in the arguments and also create the second button with the google icon and the google color now the buttons are too close to one another let's fix that by setting the main axis alignment of the row we'll choose space evenly it's not quite exactly what is in the design to fix that let's create some margins by adding a container around the rule 20 to the left and right of the container to make it smaller and 15 to the top to create some spacing between the text widget and the buttons now let's create the login screen as you can see the design is almost the same so no need to create new classes instead if you remember earlier we used the state variable is signup screen which is a boolean to move between the sign up and login we will use the same approach to create the login screen when the user taps on login this will reorganize the screen for logging that means we will resize this container and recreate this section and also change the welcome text at the other and this text at the bottom so let's do that right now let's start by refactoring the welcome text in the header of the page we need to replace rizanna by back and sign up by signing as we did before we will again use the ternary operator if his signup screen is true rizanna otherwise we will show back we'll do the same for the subtitle if his signup screen is true sign up else sign in for this section we need to change the text fields and add a checkbox inside the container before we do that you remember when i created those text fields in a container it was because i planned to extract it in a method to make the code easier to read and navigate let's extract the sign up section inside the container in a method and then we will create another method for the login section this time instead of the ternary operator since we are inside a list we will use an inline if to show the appropriate method as i said earlier this feature is available since dart 2.3 if you want to read about it the link will be in the description let's add a container and inside this container we will add a column to create those text fields we will use the build text field method that we created earlier and pass in the correct argument the text fields are too close to the login signup row let's add a margin top to the container now for this section we will use a check box and a text button let's add a row and inside this row we'll add a checkbox we will set the value to ease remember me which is one of the state variables then on change we will set state and change is remember me to not is remember me we will also set the appropriate color for the active state of the checkbox let's add the text widget and style it now let's create this forgot password text we'll use a text button for that since it should be toppable there are two clues so let's add some spaces between them using the main axis alignment for the main rule and now we need to resize this main container for that let's go up and find this container using the ternary operator if is sign of screen the container will have the height of 380 else to 50. as we can see the main container for the logging is a little lower than the container for the sign up for that let's change the top argument of the position widget to better organize the code let's extract the login text fields in a method we need to change the position of the submit button also let's find the method that creates the submit button and change the top from 535 to 430 based on the value in our state variable let's make the same changes for this text at the bottom now let's add some animation to the design fortunately flutter provides us with some implicit animated widgets the first one we will use is the animated container let's go to the main container and replace it with an animated container when you use the animated container you must provide a duration argument which is the duration of the animation we will give you the duration of 700 milliseconds and we will also change the animation curve to curves that bounce out as you can see we have many curves to choose from we will do the same for the position widget since the position of the container will change from one point to another this time we will use the animated position widget and give it a duration then the same curve as the container let's test it as you can see we have a problem here it is because of the way that flutter renders the widgets so when we click the animation it takes 700 milliseconds to render the container but in the meantime all the widgets that are inside this container already rendered that's why we have this problem the trick to fix this issue is to put that column inside a single child school view and voila now we have another problem when we navigate from the login to sign up screen we can see that the submit button is a little ahead of the animation to fix that we will also animate this button let's replace this position by an animated position widget and give it a duration also of 700 milliseconds and also the same curve as the other animated widgets bounce out now it is very important that you try to create this design yourself the best way to learn is by practicing the link for the south code on github is in the description below but if you want to continue learning watch this video or that video please consider subscribing and give us a thumbs up if you liked it

Channel: MJSD Coding

Views: 46,629

Keywords: flutter tutorial beautiful login and sign up page ui, flutter beautiful login page UI speed coding, flutter login page ui, flutter login page design, flutter ui login, flutter ui login and sign up, flutter login page ui - speed code, flutter ui animation, flutter ui design tutorial, flutter animation, flutter login page ui design, flutter login, flutter login screen, flutter login design, flutter ui tutorial, flutter speed code, Beautiful login, sign up page UI

Id: v4nEjn6TOZ4

Length: 28min 28sec (1708 seconds)

Published: Thu Dec 24 2020