Build a Fully Responsive Modern Login UI with Flutter

in this video we'll be creating a modern responsive and dark theme login UI from scratch using flutter let's start after creating your flutter project using the flutter create command make sure to come to this URL the link to it will be given in the description below and install all of the files present in both of these directories after you've downloaded them create a new folder here called assets and here just drag and drop the folders we just saw this will give us access to this image and the two svgs for Facebook and Google logo we can go to the pubspect.yaml file and register these files so we I'll just uncomment this then we'll have the path given here which is assets images and then the sign in underscore balls Dot PNG and assets slash svgs and here I've got a slash after svgs which will mean that it will register all the files that are mentioned in the folder after that is completed you can go to the main.dot file remove all the boilerplate code remove some of the comments and create a first screen which is the login screen here we are going to import a material dot for now it's going to be a stateless widget so let's just name the login screen and this will return a scaffold and now I'll just take this login screen put it as the home property in the material app after this is done we can make sure to run this on the Chrome and let's see if this works while this is happening you can go to this link will be mentioned in the description and go to the palette dot dot file and copy all of this yup in the lip folder we'll again create palette dot dot and paste all of this these are all the colors that will be required in our login UI and the web app has now launched so if we just go there we see a blank scaffold now what I want to do is just change the background color of this since this is what we are trying to achieve we need a black background and this is exactly the color for it so we can go to the main.dot file redefine our theme so our theme will now be theme data dot dark dot copywidth so it's going to have all the properties of Dark theme plus it will override whatever we wanted so I want the scaffold background color to be overridden with the palette Dot background color since all of the properties here are static I don't have to create an object for this now if we come back it has changed to somewhat blackish now let's go to the login screen and you're in the body we are going to have a single child scroll view we are having a single child scroll view because its child is going to be a column and this column is going to have many fields and since we want it to be responsive we want all the fields to always be shown and that's not necessarily possible on smaller screens if you come to this UI you can see if I just shrink this down and suppose view it on a tablet some of the fields will be scrollable I want that scroll effect to be there so that's why we are using a single child scroll view another thing is that when I click on these text Fields a keyboard will appear and this keyboard has the chances of creating a render flow error and that's why we are using single child scroll view so that when the keyboard appears the error goes away and we can still scroll through all the elements visible on the screen if it's not understandable to you right now we'll see it in action in just some time the fourth thing in my column is going to be image.asset and what is that image.asset well assets slash Images slash let's see the name here it is sign balls PNG so I'm going to have sign in underscore balls dot PNG and let's see what I get here it looks good the only problem with this is It's to the left I want it in the center so I can just wrap this column widget with a centered widget and now it is right in the center next thing is a sign in text just like this one so I'm just going to have constant text call it sine n and then pass in a style the style is going to be a textile and this text is going to have a bolded property so font weight dot bold and if we just do this it is quite small I want the size to be bigger so I can just increase its size by having font size as 50. and now it's much bigger and looks better the next thing we want is a little bit of space here and after that two identical buttons so we leave some space and create a separate widget for this button so that we can create it two times very easily so here in our after our text we are going to have constant sized box and this is going to have a height of 50. after that is done I'm going to go to the lib folder create a new folder called widgets and in this widget I'm going to create our very first widget I'll call this social button dot dot so we'll import a material package then we are going to create a stateless widget and call this social button and here we are going to return a text button and if you see why we want to return a text button well because it is a text button it's not elevated so we don't need that but just using text button is not enough because we also have an icon with us definitely we can use text button with a child as row but why to do so much when flutter has an inbuilt thing to avoid that which is text button dot icon if we do that we need to pass in three required arguments which is on pressed for now it can be an empty function I can and our icon is this SVG right here which is the Google logo ref logo we look into that in a bit and the third thing is the label so what do we want to type here or what do we want to show here this is the continue with Google text so let's start with the icon part for the icon I want to show either Facebook logo or Google logo but they are in the SVG format and flutter doesn't have any support for SVG directly built in the SDK so what we can do is add a dependency called flutter underscore SVG after we add that we do need to restart this and in the icon here you just need to type SVG picture dot asset and make sure to import flutter SVG not just SVG flutter SVG dot dot and in the asset you can pass F logo or Google logo but we don't know which button it is so we are going to take it from The Constructor so we are going to have final string icon path and we'll require this through the Constructor so we'll have required this dot icon path I can take this and put it here if you didn't understand why we did this you'll understand when we create two of these buttons in the login screen but for now just bear with me another thing is the label and the label is also going to differ so we'll have to take that from the Constructor as well so we'll have final string label and we'll require this through the Constructor and in the label we need to pass in a widget so we left text and then we'll pass in the label now let's see how this is looking let's run our application and in the meantime we can just go to the login screen and use the social button so we'll have social button so our first social button is the Google button we are just reusing the button that we created here it is just cleaner code of course you can write this code that we returned here in this part and just do it two times but why to do that if you can just create one simple class for it and then you need to use it anywhere in your application it has many benefits like if you want to change the theme of your social button you can just go to one file or one class and change it anyways coming back to this the icon path for the Google logo is assets slash svgs slash g logo dot SVG and the label is continue with Google also we'll have to put a constant here and after we put that you can see this is how our app is looking very terrible what has happened here so basically Google logo SVG is quite big it has taken the entire space it would have given a render flow error but since we have a single child scroll view we are able to scroll through this and see the entire thing so this is the entire logo which is quite big we just need to reduce the size of the logo so we can just go here add a width and the width can be let's say 25 here you can see it's quite small pretty good and we can change the color as well we want the color to be white so we'll have color from palette dot white color if you're wondering why even white color is being saved in palette that's because I just want uniformity I just want all my colors to save in just one file so if I want to change theming of my application I can do all of that from one single file now our logo has turned white that's pretty good now I also want to change the color of this text and perhaps just increase its font size so I can go to the label half Style and the style is going to be constant textile the color will be palette dot white color currently it's blue I just want it to be white and the font size can be 17. and here you can see both of these elements have turned white so what is the next thing that we need well I want some padding to be there I want a border to be there and if you just hover over this you will see that the size of this button is quite small I just want to increase its size all of this can be done through a property called style and this style is going to be text button dot style from you can definitely use button style here but that's going to have a lot more boilerplate code to write and I prefer just using the default text button properties because that's how I want to design my app so here I want the padding to be there so the padding is going to be Edge in sets dot symmetric from the vertical Direction I want 30 and from the horizontal Direction I want 100. I'll just put a constant here and if I come over here if I hover over this you can see it's much bigger already now just to display this as a button I want borders to be there so to put the borders I can come here have shape and with the shape property you can have rounded a rectangle border and pass in the side the side is going to be constant Border Side with a color and the color is palette dot border color it's already mentioned if I just save this much let's put some formatting by just putting commas and saving you can see the border is now seen but it's not as thick as something like here so how can I fix that well I can just pass width three over and it's much thicker I still want the Border radius to be there that means I want the curve to be present here so to put that curve I can just have border radius as border radius border radius dot circular pass in circular as 10 remove constant from your put it to the Border Side because this is not a constant it doesn't have a constant Constructor and after that if you come here it looks just like this one pretty good now we want similar thing to happen for continue with Facebook so I can just go to the login screen all I have to do here is put in another social button I'll pass in F logo dot SVG and continue with Facebook and save it but they are merging with each other to fix that obviously we can just put a size box so I'll just put a size box of height 20 and they're much farther away but now you can see the issue these buttons are not aligned with each other the reason for that is quite simple the continue with Facebook has more characters in this letter and since in the social button we are using padding so that we can determine the width of this button we are getting this error so we have put horizontal as 100 and this padding is from the child itself so here from here we have padding of 100 and if the text is bigger we have padding of 100 bigger right how can we fix that well one fix is not to depend on padding at all and just using a fixed width by specifying the size over here the fixed size that's present on the text button but that might not be very useful when we have some bigger words here so if there's a larger piece of text here it might just give us error or it will just look bad so what I have in mind is just to take this horizontal width from the login screen itself so what I mean by that is just a final double horizontal padding and here we are going to have this dot horizontal padding equal to 100 so if the user doesn't enter anything it will give us horizontal padding of 100 but if the user does want to override the existing 100 they can do that from the login screen as well so here we can have horizontal padding remove the constant and save it coming to the login screen to fix the issue for Facebook I can just pass in the horizontal padding as suppose 90. because I want to be lesser and now if I come here you can see it's 90 and both are aligned to each other that's pretty good after having the buttons designed we want an or to be there so let's put a very simple or by having a simple size box so we have size box of height 15 and then a text of or and then obviously we'll just dial it so that we can make it much bigger so the font size here is going to be 17 remove the constant and we just have or press it great now again we'll leave the size box as 15 so that we leave space and then we can work on these text fields so to create a text field again we are going to create a widget because there are two text Fields the email and password so here I can create a new file called login field dot dot import material Dot then create a stateless widget called login field and here we are going to return a text form field and in the decoration we can parse in input decoration because we want to design the text field and just to see something in action let's have login field pass to the login screen let's import it and const sine over here this text field and it's taking all the available width on the screen that's how text Fields work they take all the width on the screen it doesn't matter if there's a widget or anything they'll take everything that's possible so you want to reduce its width first of all so we can wrap this text form field with either a container or a constraint box I'm going to go ahead with constrain box and I'll pass in constraints with box constraints as a value where the max width is going to be 400 and if we come back over here it's aligned with these two that's pretty good now I want to design this how do I want to design this let's start off by adding borders everywhere like this so we'll have enabled border and this will be outline input border enabled border basically means to show the Border when the user is not clicking on the text field for example right now you can see the borders are activated and the user is not clicking on them but when I click on it the Border disappears I don't want that to happen I want the borders to stay there so for that we are also going to have focused borders so we'll have focused border with outline input border as the name suggests outline input border just gives outline border and both of these are going to have the same thing because whenever we click over here we don't want to change anything maybe we want to change the color so we'll do that outline input border we are going to have a border side and the Border Side is going to be Border Side it's going to be const we'll pass in the color and the color is going to be palette dot border color and we'll have to pass in the with us 3. just similar to what we did in the social button right here is the exact same thing and to match it even more we are going to copy this border radius and put it right here so border radius is not a part of this Border Side it's a part of the outline input border and now if we come aware this looks good there are a few fixes to this because we don't have the hint text yet and anything but before moving there if I just click over here you can see the Border has changed I don't want this to happen so I'll just copy this paste it as a value for the focus border and save it now if I click over here nothing changes that's nice but what should happen when we click over here is this border changes to something of pink like this gradient the middle gradient so what I can do is in the focus border I'll have the color set to palette dot gradient 2 and save it now if I click over here you can see this has a nice pink color and it looks nice now obviously this doesn't match this so there are a few fixes we want to increase the padding and have a hintex so that we can say it's an email or a password so in the decoration we are also going to add a Content padding then we are going to have constant Edge inserts dot all and pass in 27 this is a tried and tested value so if you have anything else please use it this is what I prefer and obviously we want a hint text and the syntext is going to vary for every time we initialize this login field so I want this to be present or passed in as a Constructor value so I'm just going to a final string hint text I'll require this and now I'll go down in the input decoration itself I'm going to pass in the hidden text and the hint text is going to be hintex that's coming from the Constructor now I'll go to the login screen the login field now requires some values what are those values well in text and the hint text is email now I'll just have constant here and here you can see it's asking for email now I'll just paste it again and say password and you can see we have both of these ready so let's leave a sized box of 15. now there's much spacing and again we'll leave a size box but not 15 20 this time because now we want the submit button like sign in so we want the gradient button like this to appear here so for that we are going to create our last widget called gradient button dot dot by we creating this in a separate widget because it's not having one or two instances that's just because I don't want to make this widget more messy if this gradient button wants to be used anywhere else in our application it can be used if not I just don't want to make login screen look very untidy so I'll just have material dot imported we are going to have stateless widget and call this gradient button for the gradient button it's not going to be text button because I want some elevation kind of to show up so that's going to be elevated button that's going to be on pressed and just to note the on pressed here you will require it outside in the login screen because this gradient button can be used anywhere and the same goes for the login field if you have some controller or some on submitted you'll have to take it from The Constructor here also for this button you have this on press you'll have to take it from a Constructor if you want to take this you'll just have final void callback on pressed and you can require this through the Constructor so you have on pressed now you can just pass in on pressed like this go to the login screen and here just have on pressed as an empty function as of now but I'm not doing all of this right now I hope it's clear to you if it's not let me know in the comment section and I'll help you out anyways coming back to the gradient button we have the elevated button and now we want the child and the child should be a very simple text called sign in and we'll pass in some style so let's have Style textile this will have a font weight of font weight dot w 600 and font size of 70. let's take this gradient button put it in the login screen and see how it's looking right now so here you can see this is our nice gradient button but there is no gradient so let's try to put in some gradient but before that let's increase its size because right now it's looking too small we want it this way we want it as the same size as other fields so we'll go to the gradient button and in the elevated button we have a property called style which will be elevated button dot style from again you can use button style here instead of using elevated button but I'm just avoiding a lot of boilerplate code and here I'm going to pass in fixed size and the fixed size is going to be constant size and the width is going to be 395. height 55 this is a tried and tested value I just checked it every single time and so if it's matching since it's matching now I don't need to care about it now to avoid this warning the child should always go down so it's now down now comes the main part how do I add gradient to this non-gradient button well that's the catch elevated button doesn't have any property called gradient or anything like that what we need to do in order to get gradient is wrap this elevated button with a widget known as container this container can have a gradient property which is present in the decoration so if we pass in pop box decoration here it has a property of gradient and here we can pass in the gradient that we want so we have constant linear gradient and we'll pass in all the colors so what are our colors well we have already passed that in the palette so we have palette dot gradient one palette dot gradient 2 and Palette dot gradient three but if we come back over here we can see it's not visible if you zoom in at the corners you'll still find some color other than blue showing up but it's not showing up in the entire button to make that happen what we need to do is go to the style of this elevated button and pass in background color as colors.transparent of course if you want you can push that in the palette dot dot but I don't care about it and Shadow color as colors.transparent if we come back now you can see sign in button is now looking gradient you might wonder why this works the logic is pretty simple we just made this transparent if we make this transparent and hide all of these colors you can see the button is not even showing up anymore it is there you can see the pointer icon there it's there but it's not showing up for us because the background color and Shadow color are transparent they match the background color or the first parent that they can find and the first parent they can find is the scaffold and the scaffold has a color of this so they've taken that color so I'll just have this and this looks nice but you can see there's a little of curve over here so I want that curve I can have border radius as border radius dot circular and pass in seven and now if you see the curve is now back but still this doesn't match what's present over here if you want this you can keep it this but if you wanted something like this there are some properties present in the linear gradient called begin and begin has access to alignment Dot bottom left so this gradient this first color will begin from the bottom left and will end as alignment dot top right so it will begin over here and end over here and that's why now both of the colors are matching so we have completed the entire design now if you want to check if it's responsive or not you can just shrink the size and see that it's completely responsive if you just minimize its width as well we don't get any render flow errors because it's now scrollable and if you just expand this it still looks great so this was it for this tutorial thank you so much for watching and I'll see you in the next video

Channel: Rivaan Ranawat

Views: 23,046

Keywords: flutter, flutter 3, flutter web, flutter login ui, flutter responsive ui, flutter designs, flutter ui, responsive ui, responsive login ui, flutter for web, flutter web ui, flutter android ui, flutter iOS ui, flutter macOS ui

Id: 7EEfF57E0Lc

Length: 26min 37sec (1597 seconds)

Published: Sun Dec 25 2022