Login & Singup Screen Layout Design in Flutter | Flutter UI Tutorial

hey guys welcome back to my youtube channel today in this tutorial I'm going to show you how we can create this signup screen and this login screen in my previous tutorial I have shown you how we can build this getting started screen where I have shown you how we can create this page view animation transition effect and how we can create this complete getting started screen so in this tutorial I'm going to show you how we can create this login screen and this sign-up screen this is the continuation of my previous tutorial if you haven't checked my previous tutorial yet I will request you first you go ahead and see that tutorial after that come here and see this tutorial it will be helpful for you because I have shown many more things in previous tutorials also this tutorial is independent as well if you want to just have the login screen or signup screen layout then you can check this out we will implement over here the text field wizard the button widgets all this kind of things and over here as you can see that our a part is not present like our app bar is invisible right now so there is no distinctive area for the app but it is all in one place but we have the back button present over here and if we click on this back button then we can go back to our previous screen right so we have the functionality of app bar but our app bar is invisible so this is the kind of layout which I am going to build today so if you are interested to this kind of tutorial and you find this kind of tutorial helpful to you then hit the like button and subscribe to my channel for more tutorials like this and don't forget to hit the bell icon for more notifications so without wasting any more time let's get started with our tutorial [Applause] so over here we can see in our previous tutorial we have created this screen this getting started screen over here I have shown you the page view slider transition and this button how we can create this complete screen and currently we will implement the sign up and the login screen so for that first we need to create some screens over here right so first I am creating login screen dot dot file and it will be a stateless widget and the name of it will be login screen and we need to import material dot package as it will be a separate screen we need to return a scaffold over here and for scaffold we can have the upper and for the upward title we can have third title login and for body let me have a container and for the container I am giving up padding over here and a child text login screen as of now so this is our login screen and currently I will provide on navigation over here so if you don't know about throttle navigation then you can check out my navigation tutorial and I have created a tutorial for throttle navigation previously you can refer to that tutorial as well currently I'm going to implement that navigation I am NOT going to explain it that much in this tutorial if I explain it over here then it will be much longer video so I will skip that so right now I'm creating a static Const route named login and on the main dot for route stable I am creating logon screen door crowd name screen so that's the thing I have created and we need to import it and I have to give it not relative path so I have saved it now for the getting started screen for this login button I will never get over here it will be wrong in skåne drought name similarly we need to import it and I will give analytic path over here okay so I accept it now if I click on this login button then we are in the login screen that's how we can go to login screen now we can start designing our layout for the login screen so over here I will give a background color or this color will be theme of context primary color and with off it will be full width so it will be double dot infinity so it has full width and for the child of it I will give column widget and for the column I will provide some children widgets and over here I will provide the text fields and the button for the login and for main axis alignment I will have main axis alignment Center and similarly for cross axis alignment as well and over here let me have our text field and for this text field decoration will be input the correlation and here I provide hint text username okay now let me check it once so that sound our app is looking right now so our column has been taken all the available space of this screen and our text field right now in the middle of the page so we need to design this text field and after that we can have another text field for password and the button for the login button as well and we have to provide an image logo for the app so now for the decoration field will be true and fill color I will provide white color so there's how it's looking right now now for the text field I will provide a style textile font size 18 and for the color I will provide a black color and I will provide black 54 so the texture is bigger now and for the decoration I will provide some decoration for the field right now you can see some radius has been present over there but not in the bottom section I will give a proper decoration for this field where it will have the result layout which I want and I want to provide radius on every sides so for this here I will provide focused border here it will be outline input border and for this I can provide border side and for the water side I can provide border side color white and for the bottom radius I can provide border radius circular and the circular radius will be fine then for the inner belt border I will provide underline input border and for the underline input border I can provide same styles over here so now save it now we can see that we have similar radius for every corner of the text pane right so that's how we can create this input text field similarly I can copy this text field for password and we can say that this two is positioned together but I want to provide some spacing in between these two so for things I will use sized box and I will provide a height of 20 maybe it's not perfect right now but now there is some issue over here that if I focus on it then we are having some padding issue right so we need to provide some padding for it as well and the padding will be content padding Paige inserts all I will provide shifting planning for the decoration and similarly we need to provide it over here so now if I click on any of our input field then we can say that there is no change right and if I type something over here then we can see that it is being typed over here and for the password also we can see the letters but we need to change the nail we don't want to display the password instead we want to display some dots or star whatever is supported so for this we need to provide another property called obscure things equal to true now after serving it we can say that right now we are saying the dots instead of the letters right so we can type our and password and we can see in the screen the dots so that's how we can have the password field now we want to have image for the logo as well so for this I will provide our lower image which is in my previous tutorial I have important in this assets directory so I will use that so I will use image dot asset and over here I need to provide the image path so it will be assets images and then the logo dot PNG and for the height of it I will provide 130 now save it so we can see our logo and similarly I want to provide a spacing between these two so I provide a sized box over here so there is some space in between these two now I will create a flat button over here and I have provided the sized box now I create a flat button and for the flat button I provide the text noggin and for the style of it I provide textile font size 20 now we can see the login text over here and we have our bonding to remove this warning we need to provide this on pressed now if I save it then we can see our button it's looking properly but I want to have a button which will have a white border and the button will be expanded throughout the screen so for this I provide a shape and it will be outline input border and water side color white and width as well and for the border-radius i will provide similar radius as for our text field so border-radius are put at five so now I observed it now we can see there is a white border for the button now we need to provide some padding over here and the padding will be tipped in and for the text color I provide white color and now I want to expand this button throughout this way like this text fields right so for this I can change this cross access alignment Center to stretch so now we have the desired layout now we need to do some work for this ever currently we can see that we have a distinctive area for this effort but we don't want that we want to remove this box saddle or border shadow over here and we don't want to have this login text so for this we can comment out this title text and to remove this shadow we can have this elevation 0 so now if I save it then we can say that we have the desired layout so now if we click on this back button then we can go back to it right so that's how our app is looking right now but there is another thing we want to have this icon on our app but this icon is for the iOS if we run this app on Android then we will not see this icon we will see the back icon for Android let me show you that I stopped the app for this and for the Android I will debug it so I check the Android and start without debugging so our app is running on Android now if I go to the login screen then we can see our login screen is appeared over here but right now we can see our different arrow icon over here right we don't want that we want to have the iOS back icon right so for this we will add this leading property and we will have the icon button and for the icon button I will have the back I was icon and for unpressed I will go back to our previous screen so for this I will pop this screen so now save it now you can see that our icon has been changed now if we click on this icon then we can go back to our previous screen okay so it is working as expected but currently we have a different icon so that's how it has been done now we need to create sign up screen as well and for the sign up screen we can have the similar kind of layout so currently I create sign up screen dot dot file and it will be stateless widget so sign up screen and we need to import material dot package and for this return I will copy the code from this login screen and paste it over here and now I want to provide two more extra fields I want to provide a feint for the email and confirm password as well okay and the button text will be signup and we need to create the route as well so I copy this static comes to out name and paste it over here and it will be sign up right and similarly we need to provide it over here so it will be sign up screen and the sign up screen as well and update the path now go to getting started and over here in this getting started button I will provide navigator of context push named and I will provide the route name sign up screen dot route them and similarly update the path as well over here so go back to our previous screen and click on getting started so we are in the sign up screen now now update it so I copy this text field with this size box and it will be address field serve it so we have email address and for the password can create confirm password so now we can see that our Fields has been added properly for sign-up screen now if I start typing over here now we can see that there is some problem and what is the problem the problem is that while we are typing on the screen in this text input field that time our screen is squeezed due to this soft keyboard right and that space is not containing all the elements of the screen so that's why we are having this error so how to get rid of this error now we need to wrap this complete section with another widget and that we jet is single child scroll view so let me wrap this column this column is containing all the elements so I am going to wrap this column with single child scroll view so wrap with new widget and the new widget will be single child scroll view now save it now we can say that there is some changes on our design but if I start typing over here that time we are not saying the error right so we can scroll over here and we don't have any kind of error but now we can say that our app is not looking right we have this area which is looking quite ugly so that's not the way we want or I have to look like we want to look like our app as before but we want to get rid of the error as well so now what is the solution now the solution is we need to wrap it with another widget which is layout builder that is not the simple widget life as we can wrap our all element within that widget we need to configure it in some other way so let me show you that how we can implement that so for body we need to have the layout builder widget and within this widget we will have a builder and for the builder we need to have the context and the box constraints as well so let me grab the context code from here and after that we need to have the Box constraints viewport constraints and within this we will return our wrapper container so that means all the elements of this screen so that's our per container I cut it and we need to return it over here so that's all we have done that and now we have some error over here so it will be box constraints I have forgot to add the s over here and now within this single child scroll view we need to have another widget so this column will be wrapped within another widget called constraint box so wrap it with another widget and that we get will be constrained box and over here the constraints will be box constraint and min height will be viewport constraints to max height so now if I save it now we can see that we have our screen layout same as before but now if we start typing over here now we cannot see any kind of error on our screen right so we can scroll through our elements of the screen and we can start typing over here without any issue right but now I can say that we are having some problem in our user experience over here it is not an error but the logo is just disappearing middle of the screen right so that should not be done so we need to check why it is happening over here and that is happening because of this padding as you can see over here that our wrapper container is having 15 pixel padding from all sides right but we don't need this padding from all sides we need only horizontal 15 pixel padding now if I save it then we will see some changes that if I start typing over here that time it is not disappearing from middle of the screen it is disappearing from the upper and the upper is having a solid color so that's why it is going behind that if we make this about transparent then we will have a seamless experience over here but currently I think it is looking quite okay so I leave it like this and one more thing I can do like I can give much more padding horizontally so it will look much better it's looking quite nice and one more thing I want to implement over here if we rotate our screen that time our app is rotating but I don't want that I want to have the layout in portrait mode only it's my preference so how we can set this have to only work for portrait mode and whether we are rotating our screen or not that will stay in the portrait mode it will not go in the landscape mode so I'm going to implement that right now so for this we need to go to our main dot file and over here this is our main function so we need to wrap this run of function with our viewport preferences so for that I am wrapping it in curly braces and after that system Chrome so it will be imported from this services dot package and over here I can set preferred orientation so my preferred orientation is device orientation portrait up okay and then and within this we can have Dylan app so now save it now we need to reload our app so restart it so now we can say that our orientation is set to this portrait mode right so that's how we can create a login screen and signup screen and in previous tutorial we have seen that how we can create this getting started screen with this page view widget with some custom transition effect so that's the tutorial guys I hope you liked it and if you do so then let me know by commenting down below and subscribe to my channel for more tutorials like this and don't forget to like and share this video this will motivate me to make more such content in this channel so I will see you later in my another tutorial have a great day goodbye

Channel: Pradip Debnath

Views: 9,423

Keywords: flutter ui tutorial, flutter ui login, flutter sign up ui, login screen flutter, login screen in flutter, login screen in flutter example, signup screen in flutter, signup screen ui in flutter, flutter layout builder tutorial, layout builder flutter example, flutter device orientation, android login signup screen design, login signup screen in flutter, flutter login ui, flutter login page

Id: OqO5wjMkaHo

Length: 24min 59sec (1499 seconds)

Published: Mon Sep 30 2019