📱Minimal Login UI • Flutter Tutorial ♡

yo what up welcome back to my channel where i'm going to create a functioning app that allows you to create users and log in using firebase for the back end so for this particular video i'm going to show you the ui and the design of our login screen first and then we're going to use this ui to hook it up to firebase and we can then log in and create users and things like that so we're going to do that in the following videos so in this one let's just focus on creating the ui first i've opened up a brand new flutter project and just to keep everyone on the same page in my main function i'm running my app which brings us to this login page which is a stateful widget and inside i've just got a blank scaffold in here so this should just be a blank app as you can see and from here let's create our login screen so i'm just going to try to go for a very simple and very minimal look so let's make the background color bit gray and in the body let's create a big column and let's create a bit of a plan here so at the top i just want to say some text saying hello again just to greet the user and then let's create a couple of text fields so the first one is going to be the username text field or maybe the email text field and then password text field and then we want to have a sign in button and then at the very bottom we want a register button so something like this not a member register now awesome so let's go for this now at the top again just to greet the user because this is a login screen i'm going to say hello again and you can see it's stuck in the corner there so let's just wrap this in a safe area widget so that we don't have to deal with this notch and what else i want to align this to the middle so i'm just going to center this column this should do the trick and let's make this text widget much bigger so let's make it bold and the size it's 14 by default let's go for 24. cool and let's just put in another text widget below here and say something something nice and cute so welcome back you've been missed and this one we don't have to make it bold cool and let's just put in some space in between here using a sized box and maybe also a size box just at the top i want a more gap there and now let's go for the email text field so with this i'm going to use a text field and so if you just save this you should be able to see this little text field here that you can type into and so what i want to do there is to use some decoration so input decoration now there's a lot of properties in the decoration inside of the text field that we can decorate but just to make it a little bit easier for us i'm going to say input border none so there's nothing there but i'm just going to wrap this in a container and i'm just going to decorate up the container so one look i like to go for is having a sort of lighter gray for the actual color like that but then the border make it completely white kind of creates a nice outline there and let's wrap this in a padding symmetric of 25. cool and last thing is let's curve this corner cool so that's looking good so now we can just type stuff in here and what i'm going to do is in the text field you should be able to see the hint text somewhere should be inside the border decoration hidden text so this is just a string which we can say email so you can see it gives us the little hint text there and once you start typing it'll go away okay now let's do the same thing for the password text field but this one is first of all let's just put in some padding just on the left side yep just put some space there awesome now let's copy this and create it here but change this to password and let's put in a sized box between these two maybe just 10. cool now one thing about the text fields here is once you've got an email at the top for the password you don't want to display the password right like you don't want to make it showing so if you look at the text field we should be able to say obscure text true so what this does is it obscures it by changing it all into asterisk so that's kind of how we want the password to behave right awesome now let's add another sized box and now we're going to put in a sign in button so let's say container and the child sign in let's put it in the middle there it is and let's decorate this up so color so this one you can just use any color for the sort of theme of your app but you guys know i love to use my d purple and let's clean this up so padding symmetrical horizontal 25 and we want to change this to white and also give some padding and let's curve these borders cool looking good okay so far so good and now now below this we want a size box again and we want to have a bit of a message here saying not a member then register now and actually with this one let's just separate this out put this text in a row and i'm gonna say register now but this one let's make it blue and bold cool and maybe we could just do the same thing for this one except not blue just leave it as bold cool and let's just space this to be in the middle there we go and maybe we should put a space bar here just to separate this out and later we can change this register now text widget into a gesture detector so that we can tap on it and bring us to the sign up page so we'll get to that a bit later on in the next couple of videos so in terms of the actual login screen this is essentially it but let's make this a little bit more prettier by spacing these things out so let's see what happens if i say maybe center cool and let's actually just space this out more appropriately so we've got the hello again i think we can get rid of this sized box now and so we got the hello again and let's put in a bigger sized box here and maybe make this text widget a bit bigger and if you look at the very end we need some more space here so i'm going to say 25 cool so that's looking pretty good so we basically have all the elements there now this is probably good enough but i want to make this just a tad better looking let's go to pubspec yaml let's bring in a google font and my favorite font if you go to the hello again let's go here right let's go google fonts dot babis where you at babies there you are if i save this it's going to be pretty small so let's make this much bigger and depending on your app you can put a nice logo up here if you want so let's say let's give us some random icon maybe android let's just go with this so yeah if you've got a particular logo you can put that here and this is going to be our login screen we're going to use to hook it up with firebase and have an actual functioning app with users and things like that so this is just the ui portion for the login screen i think it looks pretty good and pretty simple so let's use this to hook it up with firebase in the next couple of videos and we can actually make the app functional with users and creating users and signing them in and things like that so look forward to it in the next couple of videos and i'll see you there thanks for watching and i'll catch you guys in the next one peace [Music]

Channel: Mitch Koko

Views: 216,512

Keywords:

Id: aJdIkRipgSk

Length: 14min 41sec (881 seconds)

Published: Sun Apr 24 2022