Flutter Login UI Tutorial - Responsive Login UI using Flutter & Dart

hello everybody in today's video we are going to be taking a look at how to create this stunning login page UI in flutter I'm going to be taking you through the step-by-step process of how to think about building these type of uis and building them in a way that they look good on all different screen sizes in all different devices so with that said let's get into the video so the first thing that I'm going to be doing is that I'm going to be telling you guys that I have a basic flutter project already up and running on a simulator and this is the basic flutter app that you get once you start a new floor project and this is going to be the starting point for this tutorial from here the first thing that I'm going to be doing is that I'm going to be removing the home page class that we have included in the code that gets auto-generated and I'm just going to remove it I'm going to be coming back to my lib folder and I'm going to be creating a new folder here which I'm going to be calling pages and inside of this I'm going to create a new file I'm going to call this my login underscore page.dart like so once this is done the next thing that I'm going to be doing is that I'm going to be basically creating a class here and this class is going to be representing our login page and since we are just building the UI and there's no State involved in this I'm going to say that my login page is going to extend a stateless widget foreign once this is done the next thing that I'll do is that I'll implement the build method for our stateless widget and I'm going to then make sure that instead of throwing an unimplemented error that I return a scaffold once this is done I'm going to leave this address for now I'm going to be coming back to my main.dart file and I'm going to be replacing the home widget here for a material app to be the login page now so for this I'll just remove the actual home page class here and I'm going to add login page and once this is done we should be good as soon as we do command save and assuming you you're running the app as well you should see that now we should have a blank slate an empty canvas to start creating a UI on so now that this has done the next thing that I'm going to be doing is that I am going to be basically going back to my main.dart file and I am going to be basically changing the color scheme here and the reason I'm changing the color scheme is because the color scheme for our app is a bit different than colors.deep purple so to do this what I'll do is that for the seed color I'll remove colors.d purple and I say that instead of that we'll use color dot and then we're going to get a color from the rgbo components so red green blue and opacity so for the red I'll do 30 and then you can press Tab and this takes you to the next argument in the function that you're passing the arguments to and then 88 and then after that I can do 241 and 1. and with this I'll do option shift F command save and option shift F can be used to reformat your code then command save obviously is for just saving the file and now we are good so I'm going to be coming back to the login underscore page.dart file and this is where all of the magic is now going to be happening so the first thing that I'll do for my login page is that I am going to set the background color to be something else than this white because our background color for our scaffold is this light kind of grayish so to do that I will add the background color property to my scaffold and then what I'll do is that I'm going to say this is going to be color Dot and then from here I'm going to do dot r GPO and men for red green blue so I'm going to do 255 um 255 1.0 255 and then 1.0 to command save and there we go and do command save so now that the color is matching to the background color of our UI which is this color behind the text Fields the next thing that I'm going to be doing is that I'm going to be defining the body attribute for scaffold and the body attribute is the contents who are our scaffold that are going to be shown on screen so scaffold is basically a widget that we use to have an empty canvas on which we can draw other widgets for our UI and then for the body I'm going to be saying that I'm going to have a function which I'll call build UI because I like to keep my code very well organized I like to break things up into functions so I'll make a function called build UI which will return a widget and I'll add this function I'll create this function within the login page class and I'm going to say that this function will return a widget it's going to be called build the UI it's going to take no arguments and then there we go and then for returning what am I going to be returning well let's take a look at our UI and then maybe we can get a hint as to what we have to do so if you take a look at the UI I can see that our actual UI is comprised of two main parts we have this top header section which includes our text as well as this picture of a house and then at the bottom we have this section which is kind of light grayish which has some text fields in it if for God but password link as well as a sign in button and I don't have an account button so basically our UI in the most basic options can be divided into two parts the first being the header that we can see and then the second being this light gray color so what I'm going to be doing is that I'm going to be tackling this first so how do we tackle this well the first thing that I'll do is that I'm going to say that I'm going to be using a special widget which is called a column widget and a column widget is a widget which allows us to add widgets within it and let's put those widgets in a vertical fashion so the widget that comes first is going to be placed on top of the next one and the next one in this case our column is going to have two children the first will be a header and then after that we'll have this light gray section so so now that I have a column the next thing I'm going to do is that I'm going to define the children aspects for us or the children for this column and these is going to be a list of widgets and a column can have as many children as you want but for our case we're going to have two so what I'll do is that I'll create now two functions the first will be widget underscore header and this function will obviously be a function that's called header will return a widget and we will say that for now it'll return a container like so and then I'll add this to the build UI is children as underscore header and we'll come back to the next one later on but for now let's do this so with this then we should now be ready to start implementing our header so for implementing our header let's take a look at what we have to do so in our header we have a sign in text we have this picture of a house and we have this light greenish kind of a color for the background so let's tackle these things one at a time so the first thing that I'm going to be doing is that I'll change the color so to do that I'm going to come to my container I'm going to set the color property and I'm going to make that be const color dot and then from red green blue and orange and then for this we're going to do 230 250 or 253 I should say 253 and then 1.0 with this done do option shift F command save and you're going to see that nothing happens and the reason for that is because we don't have anything with our container right now it's taking no space up on our screen and since the container is taking no space it basically has no size on our screen so the color isn't showing up as well so we need to change that so for that what I'll do is that I'll use the width and height properties for a container the width property is going to be media query dot off and then context dot size dot width and the reason I'm still doing this is because of the fact that our actual header needs to take the complete width of the device so we can just do media creative of context.size.width and do command save it's giving me the error saying that the context is undefined for my header I'm going to say that it's going to take a build context as an argument and I'm going to call this context and then here I'm going to do the same thing again that I'm going to pass the context to our header and I'm going to say that my build UI is also going to take a build context and I'll call this context as well and then to the function here I'm going to pass the context into command save and now our container should have a width which is equal to the width of the device and now we need to give it a height mic testing concluded that the height that worked was 25 of the height of our actual device to do that we can do media query dot off context and then dot size dot height and then times 0.25 to command save and there you go now the header is being shown to us and it's taking 25 of the height of the device and 100 of the device of the width and the width of the device so with this then the next thing that we're going to be doing is now discussing how we can add these children inside of this container since a container can only have one child how can we have two children within it and also how can these two childrens be aligned to each other in a horizontal manner so to do this what we'll do is that we'll come to our container we'll add the child property to it this child is going to be a role to similar to a column which arranges widgets in a vertical manner a row does in a horizontal and then what I'm going to be doing is that I'm going to be defining the children attribute for this and here is where we're going to be adding our actual widgets so the first widget that we're going to be adding is going to be the sign in text so for that I'll say that we'll add a text widget it's going to be called sign in and with this I will do option shift F command save and just see if sign in shows up it is showing up and then what I'm going to do is that I'm going to Define The Styling for this so to do that we'll add the style property and then I'm going to say it's going to be text style and and then here we could Define the color so the first thing is the color which is going to be colors.black the next thing after that is going to be default weight and that's quick to be phone to wait Dot ws600 and then finally after this we're going to be doing font size which is going to be 30 and do option shift F command save and there you go now the sinus button is being shown to us the way it should be the next thing that I want to do now is that I want to add this image of a house so how do we do this well the first thing that we need to do is that we need to put this within our source code and then we need to tell flutter that include this thing within our source code and then load this image on to the screen so it's a three-step process the first thing that I'll do is that I'll create a place where I can keep all of my static assets so to do that I'll come into here I'll create a new folder I'm going to call this assets and then inside of here since I like to keep my code organized I'll create a new folder called images and within images is where I am going to be putting this file so this is the file so I'm going to be copying this and I'm going to be coming back to the assets images folder I'm going to be opening that up in finder and I'm going to be placing the illustration.png file here as you can see so now that we have this house file the next thing that we need to do is that we need to tell flutter to load these assets up so to do that we come to our pubspec.yaml file and we go all the way down to a place where it says to add assets to your application you can uncomment this line so we uncomment this and then we uncomment the next line as well like so and then here what I'm going to be doing is that I'm going to say that we're going to load everything that's under the asset folder and then images folder like so and this was pretty much all we have to do so once this is done the next thing that I'll do is that I'm going to do command save I'm going to stop running our application and I'm going to rerun it and this way the assets will be loaded again and I'm just going to wait for the actual application to stop building and start running and then once that is done I'll resume the video so welcome back everybody now our application is running again and hopefully the assets should be loaded so how do we show this asset image now well the process that we're going to be using for this is going to be that I'm going to be coming to my login page and after the text widget that I added I'm going to be adding a new widget which I'm going to be calling image.asset and what this video does is that it creates an image from the asset and then for the name we pass the relative path from the assets folder to where the actual asset is so in my case that's going to be assets slash images and then slash the actual image that I want to upload which is going to be illustration dot PNG and then do command save and there you go but now I want to fix up the size for this as well as the actual positioning for this so let's do that so the first thing that I'll do is that I'll fix up the sizing for this so for that what I did was that I changed the width for this to be media query dot off context and then from here take the size and the width and I make this image be around 20 45 of the width of the device and do command save there we go and then the next thing that I'm going to be doing is that I'm going to be basically making the fit of the image be different than what it currently is and for that what I'll do is that I'll do box fit and then fill so you can play around with the fit property and see what type of fit works for you if you're using a different kind of an image and see what works for you but for me box fit for Phil was the actual one that worked the best so once this is done you can see that for now our UI is not looking close to what it looks like on the screen firstly the sign in and the home have a lot of space between them they're not bunched together like on our screen and there's also some padding on the side of sign in so these are two different things that we're going to tackle in two different ways the first is that how do we add space between these children within our role well for that what we can do is that we can add a property to our role called main axis alignment which for the row is the horizontal axis and we can say how are children is going to be aligned on the main axis in my ways what I want to do is that I want to do main access alignment dot space between so I want space between the children then once this is done the next thing that I want to do is that I want to define the main axis size so how much size is this row going to take up so the maximum size that it can take and then finally after this I'll also Define the cross axis alignment so the cross access alignment for a row is going to be the vertical axis and how are these children going to be aligned with each other on the vertical axis and for this I'm going to say Center to command save and there we go it's all well and done now so now that this is done the next thing that I want to do add some padding to my actual sign in button so to do that what I do is that I am going to come to my text I'm going to right click on it I'm going to say that I'm going to refactor and I'm going to basically wrap this within a padding and then from here for the printing property I'm going to say that instead of using Edge and sets.all I'm going to do agent sets and then from left top right and bottom and then I'm going to say from the left it's 20 from the top 0 right 0 bottom zero to command save and there you go and then the last thing that I'm going to do since all of this stuff is not going to be changing is that I'm going to be adding the const modifier to this and there we go now we are done now we have padding on this side our there's a space between the sign in and the actual home and we are pretty much done so the last thing that we need to do now is that we need to push everything that's within our container down so to do this we can do cross axis alignment dot end and this moves everything down and but then what happens is that basically our sign in button is no longer in the middle of the house it also is brought down so for that what I do is I'll keep this for Center and I'll come to my container and after the color I'll add in padding property and for the padding property I'm gonna say that I'm going to do engine set start only so only from one specific site I'm going to say from the top I want to add a specific amount of padding and that is going to be equal to media query.off and then context and then dot size dot height and then I'm going to do 0.10 comma all shift F command save and now everything is moved to the bottom the sign in text is where it needs to be and the house is where it is and everything is looking good so now you can see that the header looks the way it was supposed to look and we can move on to the next part of our video so now the next thing that we need to do is that we need to basically create a function which is going to be responsible for creating the rest of our UI or these bottom Parts which I am going to call the login form so I'm going to create a function and I'm going to call this function login form and as before it's going to return widget and then inside of here I'm going to say that for now what we're going to return is a sized box so a size box is a type of container but it's basically a widget that has a fixed width and a height that we can Define and then enter the child which is a widget but for now what I'll do is I'll keep this like this I'll take the login form I'll go up to my actual build UI function to the column and here what I'm going to be doing now is that I'm going to be adding the login form and I'm also going to pass the context to the login form as well because I know we're going to be using this later on and then for my login form I'll say that for one of the arguments that it gets it's going to be the build context to command save and now we are ready to get the show on the road so the first thing that I'm going to be doing is that I'm going to be defining the width and the height for this so to do that I'll do that the width for my login form so this is this widget which comprises of this gray color as well as the two text Fields a forgot password button the sign in button and I don't have an account button so the width in this case is going to be as you might have guessed it the width of the device so mediaquery.off context dot size dot width and then the height for this is going to be again mediacurey.off context dot size dot height and I'm going to say that this is going to be 0.75 so 75 of the height of our device so now that we've defined the height and the height for our actual login form and we could have used a container instead of size blocks as well but I just wanted to show you something else that you can use as well what we're going to be doing is that we're going to be defining the child property for this and I'm going to be adding a form switch it to this and a form widget is basically a widget that can hold different elements of the form within it since we are just creating a UI the form is not going to be and of any use to us but I wanted to show you how you do things properly in flutter that's why we're going to be covering up or encapsulating all of our form related data fields in a form widget as well as the sign input and everything like that so if you wanted to actually control these fields and access their data that could be done through this form widget and attaching a controller to it which we're not going to be doing but it's a good thing for you to know so for this child what I'm going to do is that I'm going to be basically adding a column and the reason we're adding a column is for the fact that we have one two three four five widgets which are basically stacked on top of each other in a vertical fashion so to do this we need to use some kind of a column and if you look closely we can also see that maybe we could divide this UI into two columns one column being this top one where we have the email address text field the password text field and the forgot password link and then the next column being the sign in button and I don't have an account link and then there being some space between them so what we could think of this as being a one big column which has two smaller columns within it one holding this part of the UI and then the other one use holding this part of the UI so that's what we're going to be trying to achieve now so firstly what I'm going to do is that once I've defined the column I'm going to define the children property for this and the children for now we keep it empty and we first create a function which is going to be responsible for generating these so the first thing that we'll do is that we'll tackle the form Fields here so for that I am going to say that I'm going to create a widget function called form fields and it's basically going to return a sized box like so and then inside of this we are going to have a child which is going to be a column like so once this is done I'm going to do command save I'll take this form Fields I'll add this as a children's property to our column and do command save and our login form has a column that has children one of those children being a form field which is a size box that has a child of a column as well so now we have a column within which we have a column as I had alluded to before and within this is where we can add all of our children so to do this what I'm going to be doing now is that I'm not going to be adding the code for the actual text form field here and the reason is because I want to keep my code well organized and I do not want to um just put everything in one place and make my code reusable and follow the dry principle which is don't repeat yourself I'm going to create a new folder in my lib I'm going to call this widgets I'm going to create a new file under this and I'm going to call it rounded text form field dot Dart and then I'm going to open this file up I'm going to create a class and I'm going to call this class rounded text form field as well I'm going to say that it extends a stateless widget like so and then with this we can add the build method to this and then inside of here what I'm going to be doing is that I'm going to say that we for now are going to return and what are we going to be returning well we are going to be returning a container for now and do command save I'm going to come back to my login page to the column I'm going to add the children property to this and then I'm going to say that here I'm going to use my rounded text foam field like so and do command save I'm now going to go back to the rounded text form field class and I'm going to start styling our foam field so you can see that our form field has a very unique kind of style it has rounded Corners it has some shadow on the background it has this icon button and then an email address hint so we have to basically create our text field to be like this so how are we going to be doing this well let's do the first thing which is that let's create our text form field so I'm going to take my container I'm going to add a child to it I'm going to say that this is going to be a text from field and now our text field is appearing and you can see it doesn't look the way we want it to look but it kind of does the gets the job done so now let's start changing the styling of this so the first thing that I'll do is that I'll add a decoration property to my text form field I'm going to say it's going to be of type input decoration and then inside of here the first thing that I'll do is that I'm going to be adding the icon that we see here so to do that what you do is that you're going to define the property called the prefix icon and then this is going to be equal to an icon widget and then the icon widget expects you to give it two things one is the icon data so the actual icon that you're going to be using and the next is the color so for the icon we'll come to that but for the color what I'll do is that I'm going to say we're going to do colors.blue and then for the icon we can do for example icon dot email our icons dot email and I'm gonna say email outline like so option shift F command save and you can see that the icon is now showing but since I want this e widget to be reusable and so that we can use it time and time again what I want to do is that I want to make it so that when we instantiate this class that we pass it the icon that it's actually going to be using so to do that what I'll do is that I'm going to be adding a property to my actual rounded text from field class which I'm going to say final icon data and this is going to be the prefix icon and I'm going to say that I'm going to create a Constructor for this actual class so for this you can hover over the rounded text form field class Quick Fix and then add key to Constructors this creates the Constructor for you and I'm going to say we're going to have a required property that needs to get passed to the Constructor on initialization and this is going to be this dot prefix icon and then for this prefix icon here instead of using icons email outline I'm going to say that we're going to use the prefix icon like so to command save now I'm going to come back to my login page and then here for the rounded text form field that we're instantiating I'm going to say prefix icon is going to be icons dot email outline like so do command save now that this is done what I can do and the power of this is that I can use another rounded text form field but this time instead of using icons dot email outline I can use this lock one that the icon is going to be lock outline so I'll use that log underscore outline and if you do command save now you can see that we have the same text field but it has a different lock but the same styling so let's continue styling our text form field now so now that this is done the next thing that I want to do is that I want to basically remove the Border our actual form Fields have no butter so to do that for the decoration property you can set the error border property and then use const outline input border and then you can say the side Border Side and do Border Side dot none so this is going to remove any borders that are text Fields might have and then with this done the last thing that I'm going to be doing is that I'm going to be adding a hint text to our form Fields because for now when our form fields are empty it doesn't display email address or password so to do this what you can do is that you can basically come beneath the border and this is also defined in the input declaration object I'm going to say hint text and the hint text is going to be again different depending upon what type of text field we're initializing so I'll come at the top here I'm going to say that we're going to have another property called final string and I'm going to call this hint text and I'm going to say that this is also going to be a required property so this dot hint text I'm going to say that the hint text will be equal to hint text here to command save come back to our login page then for the first one the hint text is going to be email address and then for the next one the hint text is going to be password so I'm gonna do this do command save and there you go now we have email address and password showing up so the next thing that I want to do is that I want to change the styling for this so to do that what you can do is do hint style which is also going to be a textile property and here I'm going to say that the font size is going to be 10 and then the color is going to be color dot from red green blue and orange that's going to be 131 143 160 and 100 and the option shift f another to all server command save and there we go so everything looks good now and now I can see that our text field has somewhat of a similar styling to what we're seeing on the screen but still a lot of stuff needs to be done we need to change the background color for this and we need to add some Shadows on the back as well as change these borders to be rounded but that's going to be done in another way that cannot be done directly to the text form field but before that I want to do another thing which is that when we type in our password I want this field to obscure the text so for that what I'm going to do is that for our text form field I'm going to have an obscure text property and what I'll do is that for my rounded text field I'll set a property on this which is going to be of type Bool and it's going to be called obscure text and I'm going to set that equal to B obscure text like so do command save come back to my login page then I'm going to say here that obscure test and wait um it's giving me an error here and saying to me that I need to for all final properties Define what they're going to be so for obscure text what I'm going to do is that I'm going to say this is going to be not a required property but if obscure text is provided then we'll use that value if it's not provided then the default value for that is going to be false and then we can use obscure text here and then here since I only want the op Square text to be true for the password text field I'm going to say that obscure text property here is going to be true to command save and now if I go back to my rounded text form field you can see that when we type in the email that's not being obscured but when we type in our password that is being obscured and there you go now we've done that so the next three things that we need to do to make our text field look as similar to the screenshots as we can is that we need to round up the borders we need to change the background color and we need to add some Shadows so let's do that to do this what we're going to be doing is the first thing is that we are going to be basically using the container which we have covered our text form filled with and we're basically going to be adding a decoration property to this this decoration property is going to be of type box decoration and inside of this I'm going to define the color and the color is going to be color star White so I'll do command save and the next thing after this that I'm going to be doing is that I'm going to be defining the Border radius and the Border radius is going to be border radius.all and then radius dot circular and then I'm gonna add a value of 100 here like so and do all shift F command save and now you guys are not able to see this but our text form Fields should have a rounded corner now so to see this what I'm going to be doing now is that I'm going to be basically firstly taking my container I'm going to be saying that I'm going to refactor it I'm going to wrap this container with another container with the center widget and then I'm going to grab the center widget with another widget which is going to be a container and you'll see the reason for this and I'll do command save and then this container is going to have a width which is going to be equal to Media query thought off context dot size dot width and then I'm going to take it to 0.65 to command save and then I'm going to add the decoration property here which is going to be const box decoration and then I'm going to define the Box Shadow property here so we're going to be adding a shadow to our container and this is going to be box shadow and then inside of here we'll do color and the color is going to be color dot so what's the color for our shadow going to be rgbo 67 71 77 and then 0.08 like so and the next thing that I'm going to be doing after this is that I am going to be defining the spread radius for our box shadow which is going to be 10 and these are all values that I came up with through my testing so you will have to test stuff as well in your development journey to figure out what works and what doesn't and then after this I'm going to do offset and the offset is going to be offset 0 and 12. and it's going to give me an error saying oh a box Shadow needs to be a list of Box share oil so we do this box Shadow objects option shift F command save and now you can see that our email address Fields have rounded Corners this is because of this container where we set the Border radius and the color and then for the we wrap this with the center widget and then we wrap everything with the container and then to that container we actually add Shadows so this is pretty much it this was all of the styling that we had to do so now the next thing that we have to do is that we can close down our Wonder text form field we can come back to our login page and we can fix some of the styling here so the first thing that I'm going to do is that for our foam Fields I'm going to come to the size box I'm going to set the height property here because I want to add some spacing between our foam Fields I'm going to say that this height is going to be media query.off context dot size dot height and then I'm going to say this is going to be 0.20 our form Fields also need to take in the build context so I'll say build context context like so and then I'm going to pass the context here as well to command save then I'm going to come to my column I'm going to say that the column has going to be our main exercise of maximum then I'm gonna say that the actual main axis alignment is going to be main axis alignment dot space between and then I'm going to have a cross axis alignment which is going to be cross-axis alignment dot end like so and do command save and let's do cross-axle alignment for Center dot now and I'll show you what the end is going to be used for so now that we have the rounded text form Fields added the next thing that I want to do is I want to add the link for forgot password so to do that I'll add a text widget it's going to say forgot password like so and then I'm going to add a style property to this and do command save this is going to be called textile and here what I'm going to be doing is that I'm just going to be defining The Styling properties for this so the color is going to be colors.blue and the font size is going to be phone size 15 like so option shift F command save and now you can see that we have the forgot password button showing up as well if you want to align everything to the left what we can do is that we can say the cross access alignment is going to be n and this moves everything to the left and aligns everything from the left as we can see and then the last thing that I want to do once we have the forgot password button added is that I want to basically add some padding to my actual column which is at the top here from the top left right and bottom so to do that what I'm going to be doing is that to my login form I'm going to come to where it says the form and then I'm gonna say that the column before the column which holds my form Fields I'm going to be adding some padding to it so I'm going to say refactor and then wrap with the padding widget and then the padding is going to be agent sets dot symmetric so what symmetric does is that it applies the same padding on the horizontal axis from the left and right and then on the vertical axis from the top and bottom so for the horizontal it'll be 10 and then for vertical it'll be 25 like so all shift F command save and there you go the last thing that I want to do is that I want to go to my rounded text form fields and I want to change the actual width for this to be not 85 not 65 but 85 and I think this pretty much fixes up everything for us and now the text fields are looking the way they're supposed to look now if I do command save and I try to type something on our text Fields you're going to see that when the keyboard appears it says that the bottom overflowed by a certain amount of pixels there are many ways that you can fix this but one of the easiest ways to fix this is that you can go to the actual login page and then to the parent scaffold and then you can set it property here called reset to avoid bottom inset to true to command save oh and actually you have to set this property defaults do command save and now when the keyboard appears it's not going to resize the UI another way you could fix this would be to wrap the build UI column within a single child scroll View and that would fix the issue as well but I like this situation and this solution so I like to do things this way but now the final thing that we have to do is that we need to basically create this last part of our UI which is going to be a column which is going to basically hold our sign in button and then I don't have an account button so how are we going to be doing this well to do this what I'll do is that I am going to be coming down and I'm going to be creating a new function which I'm going to call bottom buttons so to do this what I'll do is that within the login form I'm going to create a section I'm going to call this bottom buttons and I'm going to say that this is going to return a column and then what I'll do is that I'll take this bottom buttons function I'll come to my actual login form and after my form Fields I want to add this bottom buttons function I'm going to invoke it and I'm going to pass the context to this as well and then what I'll do is that I'll come down and I'm going to say that my bottom button is also going to take the build context and I'm going to call this context into command save then for my column I'm going to define the main axis size which is going to be main access.max I'm going to define the main axis alignment which is going to be main access alignment Dot Center and I'm going to define the cross access alignment which is going to be cross axis alignment Dot Center and then do command save and after this I'm going to define the children and for the children I'm going to have firstly a sized box which is going to hold my button and then I'm going to have this I don't have an account button so to do this the first thing that we're going to be doing is that we're going to add a sized box and the reason for this will become apparent and I'm going to have a child for this and the child in for this is going to be the button that is going to hold the blue color and the signing text so since I like my code to be reusable and my widgets to be reusable I'm going to come to the widgets folder I'm going to create a new file I'm going to call this file rounded circular button dot Dart and once this is done I'm gonna basically create a class which I'm gonna say rounded circular button extends stateless widget I'm going to say that this is going to be going to have a Constructor so you can create the Constructor by by yourself by just doing this and then saying that it's going to take a super dot key property and that's pretty much it and then adding the build function to this and for the build function what I'll do is that I am going to return a elevated button like so for the on press property I'm going to say that it's going to be nothing why which is because we're just building the UI there's no interactivity to it and then for the child I'm going to say that it's going to be a text and what is the text going to say well since I want the rounded circular button to be able to be used at different places within our app I'm going to add a property to my rounded circular button class which is going to be string which is going to be called text and then we're going to say that this is going to be required property that needs to be passed to the Constructor and we'll say that this is going to be the text like so so after doing this I am going to now do all shift of command say come back to my login page come back to the size box and add this rounded circular button as the child for this and the text is going to be sign in like so and there we go we are now able to see the sign in button now what I'll do is I'll come back to my rounded circular button I'm going to Define The Styling properties for this text I'm going to say it's going to be textile and then the color is going to be colors.white and then the font size is going to be 20 and then the font weight is going to be font weight dot w 600 like so the alternative command save and there we go now you can't see it but the sign is in and white is just because of the background being a little bit gray that it's difficult to see the next thing that I'm going to be doing from here is that for my elevated button I'm going to define the install property and I'm going to say that this is going to be elevated button and then I'm gonna say dot stall from and I'm going to say that this is going to have a background color which is going to be colors.blue and as soon as we do this we're going to see that it's going to make it blue and then I am also going to be basically changing the shape for this so for that what I'll do is that I'm going to set the shape property and I'm going to say it's going to be rounded rectangular butter and I'm going to say that the Border radius is going to be butter radius dot circular 100 and then option drift F command save and I'm going to add a do this and there we go our sinus button is now working and that's pretty much all we have to do I can add the const keyword here to remove that wiggly line and then we can shut down our rounded con circular button file and we can come back to our login page and specifically to the bottom buttons function now what we're going to be doing is that we're going to be changing the size of our button because if you see in the screenshots the size of a button is different then what we can see here so to do that what I'll do is that I am going to basically take the sized box because I wrapped my rounded circular button within the size box and then I'm going to say that this size box is going to have a specific width so to do that what I'll do is that I'm going to say that is going to have a width which is going to be equal to Media query not off context dot size dot width times 0.80 like so and this is going to increase that and then for the height I'll do the same thing which is height media query dot off context dot size dot height times 0.06 like so to command save and there we go our button is being shown the way it's supposed to be so now that this has done the next thing that I want to do is that I want to add some spacing between these part of our UI which are the form fields and the buttons so to do this what I can do is that I can go to the function login form then to our column which holds our form fields which is a column and the bottom button which is a column and I can set the properties here so the first property is going to be main exercise which I'll set to main exercise.max then for the main axis alignment which for a column is going to be the vertical axis I'm going to do space between like so and then for the cross axis alignment we can do cross access alignment Dot Center and there we go that's pretty much it and the last thing that we are going to be doing is that we are going to be adding a button which is or a link which is going to be I don't have an account so for that what I'll do is that I am going to basically to after the sized box add a text widget this text widget is going to say I don't have an or an account like so and then I'm going to command save this is going to add that and then after this what I'll do is that I'll just change the styling for this so by now you should have understood how to change the styling for test you had installed property which is of type textile then for the text all object you define different properties which are for example the phone size being 15. default weight being font weight dot 600 and then the color being colors dot blue like so and then alt shift F command save there you go you can see so now that the text styling is the way I want it to be I want to add some padding between the sign in button and this I don't have an account link so to do that I'll take my text and I can do Ctrl shift r as well as another way of refactoring and then I'm going to say that I'm going to wrap it with a padding widget and this time the padding is going to be added set start only and I'm just showing you different ways of adding patterns that's why I'm using all of these different techniques and then I'm going to say that from the top I want that to be 20 then From The Bottom I want this to be 30 and then all shift F command save and there you go now you can see that our UI is looking the way we want it to look and everything is the way we want it to be as always I hope that you enjoyed the video if you did then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I upload new videos and if you have any questions comments or concerns you can leave them down in the comments below and I'll try my best to answer them for you if you want access to the source code for this project that we built I'll leave a link to that in the description below you can click on it and buy it for a very small amount like five dollars or so so with that said thank you so much for watching I hope that you enjoyed the video stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye

Channel: Hussain Mustafa

Views: 3,591

Keywords: flutter, flutter tutorial, flutter ui, flutter login ui, flutter login ui tutorial, flutter login screen ui, flutter login screen, flutter sign in page, responsive ui flutter, flutter create login page, flutter tutorial 2023, flutter tutorial for beginners, flutter app development, flutter user interface design, flutter responsive ui tutorial, flutter simple ui design, beginner flutter projects, beginner flutter ui, flutter login ui 2023, flutter easy login ui, flutter course

Id: Uq-cLAwvMNE

Length: 45min 14sec (2714 seconds)

Published: Sat Sep 16 2023