Modern Login UI Flutter Tutorial - Stunning UI Design Using Flutter

in today's video we're going to be learning how to create a minimal but beautiful welcome and login screen using flutter we're going to be building an application which is going to present to the user the welcome screen as soon as they open the application and the user can then either click on login or sign up and upon clicking on login they're going to be navigated to this beautiful minimal login page where they can either use the text fields to actually input their information and login using that or they can use the actual social o buttons to log in using any kind of social authentication provider so to get started the first thing that we're going to be doing is actually take a look at all of the dependencies that will require to actually create our uis and we're keeping the dependencies to a minimum all we're going to be using are the Google fonts package which is going to allow us to update the font within our application as well as the social login buttons package which will basically give us access to these beautiful social login button widgets that you're seeing here so let's quickly copy these come back to our pope.l file and then under dependency section let's paste these as a side note I'd just like to quickly mention to you guys the links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so once I've added the Google fonts package I'm going to come and copy the social login buttons package then come back and paste this in as well and with that that's pretty much all of the dependencies that we had to add so now that this is done the next thing that I'm going to be doing is giving a test run to my application to make sure that everything works as intended and and then I will resume a video so I'll select the simulator that's currently open and after that I'll start the debuging process welcome back everybody so as you can see I have a brand new flutter project running on the simulator so the first thing that I'm going to be doing is quickly creating the basic skeleton of our project so that we have these two different pages one of which is going to be our welcome screen and the other one is going to be our login page so to do that let's do this let's come to our lib folder and here let's create a new file and let's call this loginor page. Dart and now that this is done I'm also going to quickly create a new folder called pages and then I'm going to take the loginor page. dart file and move that under the pages folder and then with this I'll create another new file and I'm going to call this our welcome page dot dot and that's pretty much all we have to do with this done let's actually create the basic templates for each of these pages so that we can use these within our applications route so to do that the actual login page and the welcome page both are going to be stateless widgets so I'm going to quickly create those by using a shortcut and for the welcome page the widget is going to be called welcome page like so and then for the build function I am going to return a scaffold widget there we go once this is done we can close this down come back to our login page and repeat the same process but this time I'm going to call the actual class or the widget I should say login page and then we are going to return for the build method a scaffold as well with this done we can close down both of these files come back to our main. file then I'm going to remove the existing class that we have for my homepage and its corresponding State class and then I'm going to remove the home property from our material app and here instead of this I'm going to define the routes map and the routes map basically lets us Define some key value pairs that basically Define what are the different routes that we can navigate to within our application so what I am going to be doing is basically defining two routes the first is going to be called slw welcome and that's going to be basically taking us to our welcome page so the way the route Maps work is that we give our routes a key in the form of a string and then we basically Define a function that gets a context pass to it that basically States how the actual route is going to be built so we want to return our welcome page widget so here I'm going to return our welcome page widget like so and that's pretty much all we had to do with this done I'll copy this paste it once more within routes but this time the route is going to be called SL login and for this the function is going to return our login page and that's pretty much all we had to do with this done let's do command save and we are going to get an error but the reason for that is because on our material route for now we've defined routes but we haven't defined the initial route that our application is going to basically display when it starts up so for that here is the initial route property and I'll set that to slw welcome since that's the page that I want to show to the user initially when the application starts so with this we can give our application and restart and now everything seems to be working and the error is fixed once this this is done the next thing that I'm going to be doing is basically updating some properties on the actual theme object which is theme data so that our actual app styling is similar to the actual screenshots that we saw so basically the first thing that I'm going to be doing is instead of defining the color scheme property here I'll remove that and I'm going to set the color scheme seed property to the green color that we see within our actual application UI and I can show you that by actually showing you the actual screenshots so as you can see here I'm referring to this this green so I'm defining that here by defining the color scheme seed and there we go I've defined the green once that is done after that I'm going to define the scaffold background color and it's going to be this slight grayish color so I'll copy and paste this in and then finally I'm going to define the basic color of our app bar so I want the app bars within my application to have the same color as the actual scaold so for that I'll Define the appar team and then I'm going to say that this is going to be a new instance of our AB bar theme object and within this I'm going to say that I'm going to set the background color to be the exact color that's our scaffold color as you can see and that's pretty much all we had to do with this done the last thing that I'm going to be doing is coming here and setting the text theme to be a specific theme that we are going to get access to from the Google fonts package so let's do Google fonts Dot and then we have a list of all of the different phones that we can use all of these phones are freely available to you and you can use them for a commercial purpose and if you want to see how each of these actual fonts look then what you can do is head on over to the website fonts. google.com and actually navigate through the list of fonts here and the one that I really like is called popins and that's the one that I am going to be using so to use popins I remember the name so I'll come back and here I'm going to do Google fonts. popins text team and that's pretty much all we have to do make sure that you invoke this since this is a function command save and that's all now the Tex theme for our application is updated and when we add any kind of text widgets to our actual application they are going to follow this specific text theme so now with this done the actual main. file is done and everything looks good so the next thing that I'm going to be doing is moving onwards to our welcome page and the welcome page is going to be the first thing that we are going to be tackling so if you look at the UI of our welcome page you can see that we have this kind of foreground and then a background the background is basically this gradient that you're seeing where we have this dark green and light green color and then the foreground is a combination of these widgets but at the very top we can see this kind of a translucent background image and then at the bottom we can see an actual container that's white um and then it has some content within it so let's try to do this first and let's try to work from the back forward so the background first and then the foreground and then we'll take a look at how to create the foreground widgets as well so to do that to get started what I am going to be doing is firstly tackling the background side of things so to do that what I'm going to be doing is firstly coming to my scaffold and on my scaffold I'm going to define the body property and then I'm going to say that the body property is going to be set to a function which is going to return a widget and it's going to be called build UI like so and then this function is going to be pass the build context to it and that's pretty much all we have to do then for the scaffold here I'll say there's going to be a call to the build UI function and the context is going to be passed to it then within build UI I am going to be returning a stack widget and the the reason we're turning a stack widget is because similar to a column or a row widget a stack widget basically allows us to stack widgets one on top of another on the z-axis so if we want some background widgets and some foreground widgets then we can use a stack and we can have background widgets and when we add another child to our stack then those are going to be above the background widget and this is how we are going to be doing that so the first child within our stack is going to be the background gradient so to do that I'm basically going to do the following I'll create a function and it's going to be called underscore background gradient and that's going to be the first child within our stack so let's do children and then the first child is going to be our background gradient function and there we go and then what I'll do is basically come to the bottom say that I'm going to create another function which is going to be called underscore background gradient it's going to get the build context passed to it and then it returns a widget as you can see and then here we can basically Define how the actual background wiet is so we're basically going to return a container first so let's do that and then for now let's do decoration box decoration color is going to be colors. red so that you can see how the container is currently taking up the space there you go so now everything's red the container is taking up the complete space to create this gradient effect on the actual box decoration we have this gradient property and I'm going to set this equal to a linear gradient and then we basically need to define the colors that consist to create this we can add as many colors as we'd like but I have two colors as you can see in the actual design so the first color is actually going to come from our theme and then it's going to be team. off context Dot and then primary color let's do command save and let's see how things look so as you can see we can see this light greenish Hue now showing up so this works and then after this the next color is going to be this dark green so after the primary color I'll add that and do command save and bigger we go now you can see this dark green color and this light green color and the gradients automatically adjusting now what I'd like to do is actually change the begin and end positions for my gradients so what I'm going to do is on the linear gradient I'm going to set the begin property to be alignment and then I want this to be top left so let's do that and now it's from the top left and then I want it to end at the bottom right so that's going to be alignment. bottom right and do command save and there we go this looks good so now the next thing that I'd like to do is that instead of using a gradient l like this which gradually changes from one color to the next I want to create this really hard line that you can see so there are many ways to do this but this gradient tricks really cool what you can do is basically on the gradient Define the stops property and this basically kind of defines where one color ends and then the next color starts and how they blend together that's what you use stops for and what I'm going to be doing is basically setting in two values both are going to be the same at 0.4 and then setting this to a const and as soon as I do this you're going to see that now the gradient has a hard divide within it and we have one color at the top and at the bottom and now if I change these values to let's just say 0.6 and 0.6 then this is just going to change where the actual line appears and then if I change these to different values as you can see then this is basically going to Define how the actual transition between the actual colors happen but I want this to be 0.4 and 0.4 so that there's a hard line and there we go now we've created our background widget and it looks so cool and this is how easy it was to create this stunning effect so with this done we can move onwards to the next step and the next step is to create the foreground widgets which is this part that you see at the top of the background with the picture some translucent background and then this text so let's do that so to do that we are going to do firstly this let's create a function that returns a widget and this function is going to be called undor forground widgets and it gets the build context pass to it and then let's open up its body within this the first thing that I'm going to going to do is return a safe area widget and then the child for this is going to be a sized box like so and that's pretty much all I am going to do and for now I'll say that the width for the size box is going to be the complete width of our devices screen so I'm going to do media query. size of and then I'm going to do context. width there we go let's do command save then we can take this foreground widgets come back to our stack which is within our build UI function and after the background gradient function call this and pass it the context and there we go that's pretty much all we had to do let's do command save and remove this comma that's just trailing here and everything seems to be working so the next thing that I am going to be doing is that for this actual size box I am going to have a child and the child is going to be a column and the reason for that is because we're going to have two children within this column the first one is going to be the image at the top and then the container at the bottom and to align these children in a vertical manner I am going to be using a column then once I've defined the column I am going to actually Define the function which shows our Avatar's image so for that again I'm going to say that there's going to be a function returns a widget it's called Avatar image and it has some build context pass to it like so and then I'm going to open up the function body within this I'm going to return a size box and then I'm going to give my size box a height and a width so the height will be 35 5% of the height of the screen and then the width will be 75% of the width of the screen and then the child here guess what the child is going to be well if we take a look at it we can see that we have this translucent background and an image so good way we could do it is by using another stack where the background can be this translucent container and then at the top we can have an image so let's add a stack here there we go everything looks great let's add the trailing semicolon make sure that everything works let's let's take this Avatar function add it to our column within our foreground widgets and pass the context to it let's do command save make sure that everything works no errors so we can come within the stack the stack is going to have a children's list and firstly we're going to have this container which is going to be translucent so to do that we will do the following firstly I'll create a backdrop filter widget it's going to have a filter property which is going to be image filter and then I'm going to do blur and then here we can pass the sigma X property so how much blur and sigma Y which are basically going to determine how much the blur is let's do command save and we're not going to see anything for now and the reason for that is because we don't have any child for this backr filter so let's add a child to this background filter this is going to be a container the container is going to have a color applied to it and the color is going to be colors. black. wi opacity 0.1 boom save and there we go we can see this beautiful Badd drop filter being applied and it's being applied to both of the things so no need to worry about that we'll fix it in just a bit but for now let's do this let's quickly add the image first so to add the image what I am going to be doing is after the stack I've added the backdrop filter after that I'm going to add a padding Widget the padding widget is going to have some padding property defined on it which is going to be const and it's going to be ENT sets. all so from all sides 20 there we go then save everything looks good so I can add a child to this padding widget which is going to be the actual image that I'd like to show the image is going to come from a network so I'm going to do image. Network and then I'm going to basically paste in the actual URL for the image so you can find this within the actual downloadable source code a link to which will be down in the description save and let's see if the image appears there it goes it's appearing as intended so now that this is done the next thing that I'm going to be doing is basically defining the fit on the actual image so the fit is going to be box fit and then do contain there we go this done let's do command save and everything looks good to me so now what I'm going to be doing is making the actual corners of this actual translucent container that we're seeing rounded so for that I'll come to my backdrop filter and then I'm going to refactor it and I'm going to wrap this with a widget and you can do this by doing control shift r on Mac or you can just write click on this and then do actual refactor here as well what you're going to do is wrapping this with a widget and the widget is going to be called clip arct and on here I'm going to define the Border radius and that's going to be border radius. circular and then the value here is going to be 25 save and there we go now I've made the actual borders around it and it removed the actual backdrop filter effect that was happening on the background and everything looks great so with this done what I'd like to do now is actually work on the container so let's work on that so for the container we'll do something similar to what we had done before I'm going to say that there's going to be a function returns a widget it's going to be called underscore info container and it takes in a build context then here we do the same thing this time we return a container and then the container is going to be having a fixed height and width so the height is going to be 40% the height of the screen so for that we can do media c. size of height multiply that by 0.40 so that's 40% and with this done let's do width and do the same thing so media query. size of context. width and then 0.90 so 90% the width of the screen then I want to make the actual color of the actual container be white so let's define the decoration the Box decoration set the color property on that to be white and then we can take our info container go to where we have our foreground widgets and after the Avatar image within the column we can add our info container function save and there we go we can see the container so now with this done I can see that for now the actual image and the container are really smushed together so what I'd like to do is fix the actual alignments on the column so I'm going to quickly do that for that what I'm going to do is set the main axis alignment so what happens on the vertical axis because the main axis for a column is the vertical axis I'm going to do space evenly and then on the cross AIS I'm going to do cross AIS alignment. Center save and now everything looks good with this done we can come back to our actual info container and start working on the other stuff that we have to do here so the first thing that I need to do is make the borders rounded so for that it's going to be the same thing as we had done for the clip rrect just set the Border radius property to be border radius. circular and set the actual value here now the actual border is circular and then I'm going to set the Border property here because I want to give my border color to border.all and then here I'm going to set the color to be colors. black 12 and let's do save and there as you can see there is now this faint but that you can see which is a black 12 color now that this is done I'm going to come to this container and I'm going to add the child to it and the child is going to be a column and the reason we're using a column is once again because within this container we have a bunch of different widgets which are all aligned with each other in a vertical manner so for that we have to use a column we have some text some other text and then these two buttons so let's do that so let's tackle the text first so for that I will once again resort to making sure that my quotes modular easily understandable so I'll create a new function Returns the widget called infotext and then basically gets the build context passed to it like so then within this I am going to do the following I for now I'm going to return a text and text is going to say subscribe let's just say then let's do command save let's take this info text add it to our column pass it the context save let's see how everything looks I want to add some padding to the actual content that resides within this container so for that I can come to my container I can Define the padding property and for the padding I can do the following which is ENT sets. symmetric I only want padding on the horizontal axis symmetric allows us to add the same padding from the left and the right if we set the horizontal one here and then it's going to be dependent upon the actual size of the screen so I'll do mediocre. size of width and then 4% of the width from each side save and now everything looks good with this then I can come back to my info text and there's one crucial detail that I'd like to show about this widget and that is that our info text is basically going to be this text that you find here which is a heading but this text contains a different styling for some of the text in the other for examp for example the student here is green colored while everything else is black colored so how can we achieve that well a cool way to achieve this would be to instead of using text use something known as a text. rich widget which basically a Constructor on top of text which allows us to pass a text panage and by using a text span we can Define different styling for the different text that come together to make the final version of the text widget so the actual text Dot which Constructor is going to expect us to pass it a text span the text span is going to have a children's list each of them are going to be yet again text spans but for these text spans we are going to define the text property so what is it going to be well for the first text pan what I am going to be doing is basically saying that we are going to say that we are going to have the text span called find the so to do that I'm going to say that the text here is going to be find the and the reason we're doing that is once again because after find the the student is going to be green colored so once this is done I am going to add the trailing commas save and then I'm going to copy this text pan and paste it twice more but the next time I'm going to basically say that the text is going to be space student space and then after that is going to be the following which is that fits your knowledge underscore like so so now our text looks good but I'd like to change the color of the student to be green so to do that I'm going to set these Style property on the text ban to be text stle and then here I'm going to do color which is going to be theme. off context and then I'm going to do primary color there we go let's do save and as you can see the color for the student has now changed to Green what I'd also like to do is that globally to this actual text widget or this text fan I should say make all of the text have a certain size and font weight so for that on this text fan I'm going to define the style property con Tex stle and then here I'm going to say that we're going to have the following the color is going to be colors. black so if we update The Styling here then the styling is going to be applied but the styling here is basically going to be applied to all of the text fans and then I'm going to say that the phone size is going to be 25 and then the phone weight is going to be w600 and now everything looks good the last thing that I'd like to do is also make sure that I add some padding to this actual info text so for that I'll wrap my actual text widget widget with a padding widget save and then I'm going to set the padding to be padding ENT sets. symmetric on the horizontal axis and that's going to be 5% of the width of the screen from both the left and the right and now everything looks good and it looks great so now with this done what I am going to be doing is coming to the actual text fans here and just making sure that I mark them as con and that's pretty much all we had to do so with this done the next thing that that I'm going to be doing is basically also defining the widget for our info text so for that let's do this let's copy our info text widget and let's paste it again and this is going to be the text that you see here so I'm going to call this info subtext so let's firstly change the name of the function to be info subtext then what I'm going to do is copy come back to info text column after the info text pass this save and then we just got to update the styling for this so here what I am going to be doing is basically coming to the CH and removing the text. rich and then saying that we're just going to be using a normal text widget and then here the string I'm just going to copy and paste that in is just a placeholder stream save and let's see how it looks and then I just like to update the styling for it so the only thing that I'm concerned with here is the actual color so for that I can do style textile and then the color and it's going to be colors. black 38 there we go save and it looks great so now with this done I can mark this text as const and the last thing I can do is actually set the text align property on this to be text align do Center and everything looks good now so with this done what I can do is actually move onwards but before that I can see that there's some actual positioning issues on my column which contains these actual info container so I am going to come to this column and I'm going to set the main axis alignment to main AIS alignment. space evenly and then the cross axis alignment to be cross axis alignment do Center and now it's looking good so the last thing I have to do on this page is basically create these buttons that you see here and if you look closely at these buttons you can see that they look pretty much identical to each other besides the fact that the color of them might be different The Styling of them might be different um and then the background and the text within them is going to be different so what I am going to be doing is in the spirit of making sure that we follow good programming practices is actually creating a reusable widget which is going to allow us to render these different buttons and we'll Define that widget once and use it at multiple places throughout our application so for that I'm going to do new folder call it widgets and then within this I am going to create a new file and the new file that I am going to create is going to be called custom button do do and I know that's creative name but that's the best I could have done and this is one of the most difficult problems when it comes to programming that is what to name things and I'm going to call this custom button and then I'm going to say that it extends a stateless widget there we go let's open the bad boy up Define the build function on it and that's pretty much all I had to do so for this I'll do the following I'll say that for now I'll return a container and let's actually do command save let's come back to our welcome page and then let's come to our info container function let's come to our actual column and within our column once I've defined our info top text I am going to be adding my custom button widget here like so let's do save and as you can see we can't see anything but the things did move up and down a bit so let's come to our container and let's start styling it so the first thing that I'd like to do is Define a specific height and width for my button and I want this information to be provided to me when this actual widget is being created so I'll say that we're going to have a height and width defined on this container and these are going to be properties on this class and they are going to be final type double called width and height then I'm going to define the Constructor for this class and I'm going to say that it's going to get some named arguments passed to it both of which are going to be required and they're going to be this do width and required this do height there we go once this is done I can set the height to be height and then the width to be WID and then I can also Mark this actual Constructor here as const um and that's pretty much all I had to do so now with this done I can also add the actual key property that's asking me here come back to my welcome page and then Define the height here so I want the height of the button to be 6% the height of the screen so I'll just copy and paste that in since we've been doing that for quite some time now and then the width is going to be 70% the width of the screen so I'll also paste that in save and as you can see the things have moved up a bit so now what we can do is actually come to our container and actually Define the decoration property on it and style it a bit so that we can actually see what the container looks like so for now let's do box decoration color and do colors. green there we go save and as you can see it looks good but I want this color to be based upon our theme so for that I can do team. off context do primary color and there we go we can see that beautiful green showing up now the next thing I'd like to do is fix up the Border radius so for that I'll do border radius and it's going to be border radius. circular 12 so let's add that save and now it looks good and the Border radius has made the button look beautiful then with this the next thing that I'd like to do is basically show you how we can pass in a parameter to this actual widget when it's being constructed so that it uses a different background color depending upon what that actual parameter is so so what I'm going to be doing is logically creating a system where I'm saying that if this is a primary button the color is green otherwise it's the other color so for that I'm going to say that we're going to have a property on this it's going to be called is primary like so and it's going to be of type buol and then I'm going to do the same thing again I'm going to say that we're going to have a required parameter and this is going to be this dot is primary then I'll come to my welcome page and then here I'm going to say is that for the first custom button that I'm adding it is going to be primary so set that to true then I'll just copy this paste it once more but for the other button I'll set that to false save and now you can see these two buttons appear then I'll come back to this custom button I'll come to the decoration property and here I'll do the following I'll say that if it's primary then the color is this otherwise the color is colors. transparent we have no background color so there we go now one of the containers has a color the other doesn't and this is the power of using these reusable bits of code and making them in a way that you can use them within different parts of your application and just change some of the parameters that you pass to them to change the way they look so now with this done the next thing that I'd like to do is work on the actual box Shadow for this so let's do that and the reason I'm doing that is because as you can see the button does have a box Shadow if it's primary otherwise it doesn't so we'll apply the same logic firstly what I'll do is on the decoration after I Define the Border radius I'm going to define the Box Shadow property which is a list of box shadow elements I'm going to say that we're going to have a box Shadow the color for that is going to be colors. black 12 let's see how it looks so now we can't see the shadow here properly but our actual translucent button also has a shadow but we'll fix that in just a bit on the shadow I'll set the blur radius to be 10 and the spread radius to be two and I'll also Mark this actual list as a const so now everything looks good so now what I'd like to do is basically make sure that I only add this box Shadow when this is a primary button so for that I'll do is primary if that's the case then this tertiary statement states that we'll use the following list otherwise it's just going to be empty list so no box Shadow and now the Box Shadow is only on the primary button not the secondary button and the last thing I'd like to do is add a border to these buttons so the Border basically depends on the fact that if it's a primary button no border otherwise we have a border so to Define the Border I'm going to do border.all color and then we're going to do the following if it's the primary then it's going to be colors. transparent so basically we'll have a border but the color of it is transparent so we won't see it otherwise it's going to be theme. off context do primary color and there we go save and there you go now we can see that the non- primary button has a border while the primary one doesn't so now with the styling all done the last thing I have to do is actually implement the button logic so on our container I'm going to define the child the child is going to be a material button then it's going to have a onpress property which is going to be a function that's going to be passed in which is going to be called when this actual onpress is called for this material button so let's come to the top Define a property say this is going to be a function onpressed there you go and then say that this is also going to be a required parameter that gets passed so onpressed save come back to our welcome page Define the onpressed function call back here like so and then I'll copy this and add this to the custom button here as well come back to our custom button and then for the materials button onpressed I'm going to say it's going to call our onpressed function there we go once this is done now we can see that the buttons are actually clickable so I'd like to actually add a child to this material button which is going to be a text widget and this is going to basically show us log in and log out and things like that so for that again this is going to be something that is going to be passed to us because the button might show different text so I'm going to say that we're going to have a Property final string text like so and then this is going to be required parameter as well and then I'm going to pass this here like so come back to our welcome page and then our welcome page the first one is going to say login so let me add that here and then the next one is going to say signup so let me add that here and now everything looks great so the last thing that I'd like to do is come back to the custom button come to the material button the child text update The Styling and say that the text style here is going to be color and then colors. white and now you can see that on the primary button we can see the actual text but on the secondary we can't see it anymore so we again have to apply the log LC for whether if the actual button is primary then the text color is white otherwise it's something else so is primary then the color is white otherwise we're going to do the theme.of context. primary color let's copy that paste that in save and there we go now with this then everything's looking great we can see that we can click on these buttons and they have different styling and our actual page for the introduction or welcome page I should say has now reached its final completed form the only thing we have to do is basically come to our custom button for login and here on the onpress function use the Navigator object so that when we press on this button we go to the route which is going to be push named and we are using push named because we are going to be using a route that's defined on our material app within the routes map and it's going to be the login route so let's copy this compa and say that we want to go to our actual route which is going to be SL login and that's pretty much all we had to do so now when we click on login it navigates us to our actual login page and one last thing I'd like to do before we actually commence the process of creating our actual UI for login page is to come back to our main doart file and on the material app set the show debug show check mode Banner property to false because I don't want this Banner to be shown that you're seeing here for debug so with this let's do save and there we go that's Banner eliminated so now we can close down main. Dart we can close down our welcome page. Dart file and we're finally ready to start creating the login page let's take a look at the login Page's design so the login page is going to have a scaffold which is going to have just widgets on it we're not going to be using a stack anymore since everything is going to be on the same plane and we'll be basically using a column and then that column is going to contain our login form plus these buttons that we can click on to maybe do social o so with that let's actually geted started so the first thing that I'm going to be doing is actually tackling this top part that we're seeing here which is this AB bar that basically has this button within it that allows us to go back to the page that we came from since we are using the Navigator stack within flutter all we have to do is basically just add an app bar so for that on my scaffold that I'm currently returning for my login page I'm going to define the app bar and once that is done I am basically now going to be creating a function and this function is going to return a preferred size widget and the reason we're using this return type is because the ab bar expects us to pass it a preferred size widget that's why this is our functions return type and I am basically going to say this is going to beore abar open up the functions body and then basically return in abar widget then what I'm going to be doing after this is basically just taking this function and setting that to be the property of our abar and as soon as I do that you are going to see that now our AB bar is being displayed since within our main. Dart file we had set the team data app bar theme background color to be this gray color which is the exact same color as our scaffold that's why our app bar has the same color as our scaffold so all we can see is this button and it's going to be automatically shown because once again we're using the Navigator stack and that automatically implements this functionality out of the box within our app bar so I can just click on this and go back click on login and come back to the login page so there's one part of the UI done the next thing that I'm going to be doing now is working on the actual body as you can see for the body we have these fields we have some text we have this login button so we'll do all of these one step at a time going from the top to bottom so the first thing that I'll have to do is basically create a function that's going to be responsible for rendering our body so for that what I'll do is again create a function which is going to get a build context pass to it and that is going to return a widget and within this I'm going to say that we will return a column like so children's list and that's pretty much much all we had to do with this done I can come back to the build function to the scaffold widget say body is now going to be a called to a function called build UI with the context being passed to it and we can now move onwards to the column So within the column the first thing that we have to do is add our header text so for that what I'll do is then within this column I'm going to have the first child be called to function called header text and then with this then I will come to the bottom and create a function returns a widget called header text open up its body and within this I am going to return a text widget but what text widget are going to be returning are we going to be using a text. rich or just text and the answer to this is that we're going to be using text. rich and the reason for that is because if you look closely at our header text we basically have two texts with some different styling applied to them so we can easily achieve that by using this text. Rich Constructor which again is going to expect us to pass it a text pen similar to what we did on our welcome page this is going to have a children's list and then within the children's list again we are going to have text spans but these text spans are going to have the text property set on them and the first one is going to be welcome back so let me add that like so and that's pretty much all we had to do so now that this is done let's actually do command save and let's actually see how everything looks so for now everything looks great I can just add the trailing commas and the next thing that I'm going to be doing is adding the other text span which is going to allow us to basically show that placeholder text so I'll copy this text span and paste it once more and this time the actual text is going to be placeholder so I'll copy and paste that in and now we can actually take a look at the styling so the first thing I'd like to do is move the next text pan that I see here onto the next line so for that on the first text pan after I've written my text I can basically say back sln which is an escape character for a new line and now that text is going to be on a new line once this is done after this I'll Define the actual styling for each of these so for both of these text we have different styling so I'm going to on each of these text spans Define the style so for the first one I'm going to set the phone weight to be bold and then the phone size be 15 and do save there we go and then for the next one I'll change the color and the phone size to be 10 so let me just do that here and there we go and I need to set the style property like so save and now everything looks good with this done I can mark this as a con because we are not using using any kind of dynamic values within this and then I can come back to my build UI and here I can add some padding to the column because for now it's at the edge of our screen so for that again we can refactor wrap with a padding widget and then here we can do that the padding is going to be and then we can say that the padding is going to be edine sets. symmetric and I want to do the following which is to only apply horizontal padding and that is going to be 4% of the height of our screen so for that that we can do media query. size of context. width and then multiply that by 0.04 save and there we have it now everything looks good with this then we can move on to the next part so the next part is to actually focus in our login form which is this actual part of our UI that consists of these two different text fields and then this login button so let's actually take a look at that so to do this what I'll do is basically again within my column for my build UI function after the headed text add a actual function call and I'm going to say this is going to be login form and we are going to be passing the context to it with this done I can come down and I can come to the bottom and here I can say that I am now going to be creating a function and it's going to do the same thing Returns the widget and then open up the function body and gets the build context passed to it we can firstly say that we're going to be returning a container this container is going to have a specific height and the height is going to be 30% the height of our screen so I'll just copy and paste this code in because we've been doing this for quite some time in this tutorial now with this done I can then move on to the next part which is to actually Define the child on our container and this is going to be a column with some children save and everything looks good for now with this done what I am now going to be doing is basically creating a form field which we can use to input information within so to do that I'll do the following within this column I'm going to say that we're going to have a text form field and this text form field is going to have a decoration property and the decoration property is going to be of type input decoration and then it's going to have a label which is going to be a text widget which for now we can say is going to say email so let's do save and let's see how the actual field looks so it looks good one thing I can see is that the alignment in my column has now kind of changed because of the children that I've added to it so to fix this I can come to my actual build UI then to the column and then here I can do main AIS alignment as main AIS alignment. space evenly and then cross access alignment as cross access alignment. start this should fix the actual issue for us and then with this done let me see what other things we have to do oh and I've noticed that I need to do start on the main AIS alignment as well so let's do that and now everything looks good so with this done I can now come back to where I'm creating my login form and we can move on to the next part so for the next part what I have to do is basically Define some of the other properties on my actual form fields to make it look like the way it's looking on our screen so another thing we have to do is update the labels style so the label style is going to basically be the color which is going to be different not green so for that I can do within the decoration the following and that is to set the label style property and I'm going to say it's going to be const textile and then we can do color and then colors. black and then we can do for example 38 save and there we go it looks pretty good with this done I also want to update the Border settings so I'm going to do border as border. all and the reason I'm doing that is because for now we just have a bottom border I want it to be everywhere and I believe that it actually needs to be outline input border there we go with this let's do save and let's see how it looks so it's looking great so now with this done one thing that I'd like to mention is that I'd like to change change the color of our border so for that I'll do the following which is to set the focused border to be outline input border once again but this time I want to say that the Border Side is going to be the following and it's going to be Border Side and then I'm going to do the color will be theme. off context do color scheme or primary color there we go with this done let's do save and let's see how it looks so now the color is appropriate to whatever the actual color is that we're using within our team so the last thing that I'd like to do is tell you that for now we can see that this email field looks the way we'd want it to look as you can see but we have a slight issue and the issue is that we are basically going to be repeating ourself if I basically copied the same code for this text form field and paste it once more within my column we're just repeating the same amount of code again and again and this is not a good thing to do what I'd like to do is basically create some kind of a reusable widget that we can use and change some parameters off it so that we can show these text Fields with slightly different data within them or slightly different functionality so to do that I'll remove the second text form field and I'll copy this text form field that we see here and remove it from our column once this is done I'll come to my widgets and here I'm going to create a new file and I'm going to call this custom form field. Dart with this done I'll open it up then I'm going to create a stateless widget I'm going to call call this our custom form field like so and then with this done within the build function instead of returning a placeholder we'll return the text form field that we had created then I'll say that this custom form field is going to have a property type string and it's going to be called the label then when we construct this the Constructor is going to have a required name argument called label and then basically where we are setting the label I'm going to say that the label is now going to be the label that gets passed to us and then the Border can be marked as const with this done I can do save I can come back to my login page and here I can do the following which is to just use my custom form field and set the label to be email and now if I do command save I can see it and if I copy and paste this once more we can see that we can see the other field which I can say that the label is going to be password great so it looks good the next thing that I'd like to do is basically fix the actual alignment properties on my column for this actual login form so I'll come to my ual column and I'm going to say that the main axis alignment on this is going to be main AIS alignment. space and then we can do evenly then I can mark the actual form Fields as const and the reason I'm doing that is once again they're not using any Dynamic values and with this done the next thing that I'd like to do is basically add some margin to this actual container that contains our column for our form Fields so I'm going to say that we're going to add some margin to The Container it's going to be ENT sets. symmetric and we're only going to apply some vertical margin and it's going to be 0.02% of the height of the screen so basically 2% the height of the screen so let's do that save and there we go it's moved down a little so with this done I can now add the button so if remember in the previous step when we were actually creating buttons for our welcome page we had already created a usable widget class called custom button so we're basically going to be using that within this actual page as well so after I have my two custom form Fields I'm going to have my custom button the custom button expects me to pass it a width that is going to be the complete width like so then it expects me to pass it a height I want the height to be 5% the height of the screen so I'll copy and paste that in is this going to be a primary button yes what's going to happen onpressed well we don't want anything to do so let's just add an empty Anonymous function and the text is going to say log in with this just add the trailing comma save and there we go the buttons easily being showed now and this is the power of using these reusable widgets that we've created and using us them at a bunch of different places within our application and this is going to make it very easy for us to implement code changes in the future and this is also going to ensure that our application is easily maintainable and that the code base is easy to read and if we want to make changes in the future or update The Styling or update the logic that it's only at one place that we have to do a certain type of thing and to see a good example of this what I can do is actually come to my custom button to where we set the color for our button within the decoration property and I can say if the button is primary then instead of it being primary color I'd like it to be for example colors. Red Save and now automatically all of the buttons are using the red color so this is the power of making sure that your codes modular so with this done we can redo the changes come back to login page and let's continue onwards so the next thing that I'd like to do is basically add this link that says forgot password so for that that's very simple all we have is a text widget which is going to have the text within it called forgot password so let's add a text widget let's say that it says forgot password and then after this I'm going to say that it's going to have some styling applied to it so let me set the style property to be textile and then it's going to be the following we'll set the phone size to be 10 we set the phone size to be 10 we'll set the color to be colors. black 38 and then after this let's see how it looks and the final thing I'd like to do is make sure that it's bold so let's do that Mark this as a const as well save and now everything looks great so the last thing I have to do is basically implement the buttons and this text which says or login with so let's do that so to do that what I'm going to be doing is coming to my build UI then to the column then to the login form and to the login form I'm going to be doing the following after I have my actual login form I am going to say that I'm going to have this social login button function so I'm going to say social login button and I'm going to say that the context is going to be passed to it as well save and I can take this come to the bottom save it's going to be a widget and then I'm going to say that it's going to be underscore login button like so I'm going to say that it's going to get a build context pass to it like so and open it up within this actual function I'm going to be doing the same thing that I've done before firstly I'm going to be returning a sized box so that I can give this a defined width and height for the size box I'm going to say that the height will be 10% the height of the screen the width will be the complete width let's do that once this is done I'm going to set the child to be a column then have some children within it and then the first child I'm going to have is going to be a text widget with some styling applied to it I'll just copy and paste that in because it's very simple which is going to say or login with and then it's going to set some text style so there you see you can see it says or log in with now that this is done the next thing that I'm going to be doing is basically adding the buttons and if you see the buttons are Al light in a horizontal manner so what we have to do is use a row widget here so within my column the first child is going to be this text after this I'm going to be using a row the row again is going to expect us to pass it a list of children and the first child is going to be a social login button and this widget is going to come to us from the package that we imported previously which is social login buttons and this is going to be within your pope.l file here as you can see so now that I've added the social login button is basically going to ask me two things what's the button type going to be so this can be a bunch of things things you could do for example Apple Facebook General login GitHub Google what I like to do is use Google so I'm going to do Google here and then for onpressed we can just do nmt call back function add the remaining trailing commas save and there we go we can see sign in with Google what I'd like to do is change the styling and the text for this as well as the size for this so let's change some of the parameters on it to change the height I'm going to set the height property on this to be the following which is 6% the height of the device then the width is going to be 45% the width of the screen there we go then I want to set the text property and the text property is just going to say Google instead of sign in with Google there we go then I want to update the phone size so the phone size is going to be 10 I want to set the image width so how big the actual image is that we're seeing to 20 and now our button looks good and we can press on it and there we go it looks spectacular so the next thing that I'd like to do is basically copy the social login button paste it once more but this time I'm going to do apple and I can do Apple black you could do Facebook as well but let's just switch things up a bit and let's do Apple basically do here the following which is say apple and you can do Apple like this or just Apple depends on what color scheme you like but let's do Facebook I like the color blue there we go and then that's pretty much all we had to do so now with this done the buttons are squished with each other so what I'd like to do is basically come to my actual row and here I want to set the the main axis alignment which refers to the horizontal axis for a row to be spaced between there we go now they have some spacing within them and then on my column that contains these buttons as well as this text I want the main AIS alignment to be main AIS alignment. space between and now it looks good and it looks like the way we were seeing the design look within our actual screenshot so the last thing we have to do now is at the very bottom we have to add this text which says don't have an account and then sign up so let's do that so again we're going to be using a text. rdge widget for this but how are we going to be doing it well first things first what I'm going to be doing is basically coming to my actual column for my build UI and here I'm going to say that I'm going to have a function after social login button called register account link it's going to get the context passed to it as well and this will be the last child within our column then I can come to the very bottom and here I can do the following which is to just basically say that there's going to be a function returns a widget it's going to be called register account link open up its body and it gets the build context passed to it within this I will say that I'll return an expanded widget and what an expanded widget does is that it takes up all of the available space that it can within its parent and then with this done the child for the expanded container is going to be a column widget there we go and then it's going to have a children's list which for now is going to be empty with this done let's do save let's see how everything looks looks great to me no errors so what we can do is actually within this column add our text .ri and then I'm going to say it's going to have a text span the text span is going to have a children's list each child is going to be a text span and the first text fan is going to have the following text which says don't have an account so let's add that save and there we go it shows don't have an account and then I can add the remaining Trad Ling commas save I'll copy this text span paste it once more and this time I can say that it's going to say sign up like so then I want to update the styling on this so for the second text span I want the color to be dependent upon the color of our theme so there we go now it's green and then I want the color for the first one to be colors 38 so again I'll Define the style here and then the last thing I'd like to do is Define some Global styling on the text span so I'll do style and then Tex stle and then I can do font weight um let's do font weight. bu and then we can do phone size 10 and then the save it and let's see how it looks and it needs to be font size actually looks great so now what I'd like to do is basically mark this as const Mark the first text PAD as const as well make sure that we have no other issues and then we just like to fix the actual alignment properties for this so let's Center it so for that I can go on the main AIS alignment and I can do main AIS alignment. end that takes it to the very end and then I want to do cross access alignment to center it so cross access alignment do Center puts it in the middle and the last thing that I'd like to do is basically add some padding to this actual column so for that on my column I'm going to wrap that with a padding widget and I'm going to say that the padding widget is going to basically apply padding only from the bottom and we can do that it's going to be 20 there we go save everything looks good so the last thing we have to do is just move this text into the middle so one way we could do this would be to actually come to my actual padding widget and wrap that with a actual widget and we can say that this is going to be alignment widget align and then the alignment is going to be alignment. Center and they should put it in the middle there we go so now everything looks good and the UI is now completed so now let's give a final run to our actual UI so let's reload our application restarted I should say the welcome page is looking great it's all responsive I can click un login takes me to the login page everything looks good I can go back and there we go the UI is fully responsive and it looks great so with that that's pretty much it for today's tutorial I hope you enjoyed making this beautiful welcome screen and login page minimal UI with me as always if you have any question comments or concerns leave them down in the comments below and I'll try my best to answer them for you and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,900

Keywords: flutter, apple, android, flutter ui, ui ux, mobile design, mobile app, flutter app, ios app, flutter for ios, ui design, ios design, new flutter, android iphone, flutter tutorial, learn flutter, login page flutter, login signup ui, cool login ui, home page ui flutter, login register flutter, login ui ux, login register page, flutter ui development, welcome page flutter, flutter sign up page, flutter for beginners

Id: z6QwYu2FaEg

Length: 58min 23sec (3503 seconds)

Published: Fri Apr 26 2024