Flutter Tutorial for Beginners #17 - Simple Login Screen in Flutter

[Music] hi everyone and welcome to another flutter application development tutorial guys in this tutorial i will show you how you can create a simple login screen like this by using all the widgets we have covered in our previous lectures okay so if you are new to my channel so make sure you are subscribed to my channel and also make sure you watch the previous video so you will understand this one okay so what we will do in this video we will use all the previous widgets in this one video to make a simple login screen like this so let's start our video first of all uh create a new flutter project i have already created a new one and uh start typing by stateful widget and i will name it my app okay and i will hit enter and i will just remove this container from here and i need to return a material f from here and inside this material app we have a property home and we will add a scaffold to it okay so inside this scaffold we need to add two properties the one is airport so it will be the airport of our application and the ever will we will have a title okay and this will be a text widget and inside this text widget i will add a name of this app login screen okay and the second property is a body so in in this body property we will be using a column widget as you can see here this is a vertical um design so we will be using a column this is something like a column and if you don't know about the column widget so you can watch my previous video about column and rows in the flutter app development so simply type column and inside this column we will make this column to center from the main axis and from the cross axis okay so cross x is lyman dot center and now we will add the children property here and inside this children we will add all these widgets okay so it is gone because i am running this application so it is auto saved don't worry we will be creating a new one here okay so first of all we need to add a text widget here so on in a text video we will type login and we need to style this text widget so we will be using tx text style first of all i will change the font size and the font size will be 35 and now i will change the color and the color will be colors dot tail and the font width font red dot bold okay so our text widget is ready and below here we need a size box to make some space so size box and give a height of just we will leave it like this so because we don't need to add a size box here below here we need a form okay the form will have the text a field form and the child of this form will be a column because we need to add multiple childs here and inside one child we cannot add multiple child so we will be using a column here and inside this column will be a children and inside this children first of all we will add a text form field okay so what is the text form field this is a input text form field okay which takes in input from user i will add a comma here and first of all first of all we need uh we need a keyboard type so this will be the input type okay so i will pass here i will pass a text input type dot email address because the first one is email address okay and below here we will add some decoration so create a decoration input decoration and inside this recreation we need a label label text and the label text will be email email email and we need a hand text so the hand text will be enter email and we need a prefix icon so we will use the icon widget here and icon start email okay and below here we need a border so a border and we will assign or add outline input border here okay so our decoration is completed now and now we will add on on change and we will type add a string variable here so i will explain to you this what is the on change and if i had saved this so as you can see here this is our text text form field okay so what does the on change uh method do uh when we type some text here like this so the unchanged method is called and this text is stored in this variable so you can access it in your application okay and now we will add a validator here because we can also validate this so to get a validator okay not outside this inside this so we need to type validator and inside this validator we will pass a value value and curly braces no not curly braces we will simply uh yes we will add curly braces and we will return return value so we will add an expression conditional expression here return value value dot is empty so if the value or the text form field is empty so we will show a message to user like this please enter email and if not so we will add a null here okay so this is the validator of our form text form field so what we will do we need another one so we will just simply copy this one okay and we will paste it here and we will simply change this to password password and it will also be a password and we will change this to a password visible password and please enter password okay and if i save it so as you can see here okay i need to change this icon also to a password so now you will change the okay so this is chain no and we need uh some space between these two text form field so to add some spaces we need to add a sized box sized box and we will give a height of 30 okay and if i save this so you will notice a space here but we also need a space between this text and this uh edit text field and we also need spaces from left and right so to add the space between this uh text and this text form field you can also use a size box but i will show you another way another way is we will wrap this form uh in with another widget padding so click on this and click on this yellow bulb okay and wrap with padding and we will assign a symmetric symmetric and it will be a vertical of 30 pixel so if i save this now you will notice the space between this text and this form okay and to add spaces from left to right we can also use the this padding widget but first let me add a button here so i will just simply add a button here and the button will be a material button you can use another button if you want i will use a material button here and on pressed i will simply add a empty method here and we need to add a child okay i need to add a comma here full stop child text widget and it will be login okay and the color of the button will be like colors dot t okay and the text color will be colors dot white okay and we will add the minimum width to our button and it will be a double dot infinity okay so if i save this so you will notice a button here but we we need some space between this text form widget and this button so we will copy this size box okay and we will add it here and if i save it so now as you can see here we have some space here and we need to uh add some spaces from here from start and from end so to add this first of all we will add this button to another widget like padding and we will add a symmetric padding of horizontal and it will be 35 and if i save this you will notice the spaces from left and right okay so we will do same for this text form field okay so what we will do we will click on this and we will click on this bulb and we will wrap with painting so if you don't find the padding widget here so you can simply type this rep with widget and you can type the name here like heading okay and inside this we will add the padding property and edge and search dot symmetric and it will be horizontal and we will give a 15 okay so if we save this as you can see here now we have spaces from left and right so we will do the same from for the other so click on this click on this with padding and change this all to symmetric and pause the horizontal and 15 and if i save this so as you can see here now we have a beautiful simple login screen here and okay guys so that's it for this video guys and if you like this video please share this video with your friends and also make sure you are subscribed to my channel and the bill notification option is on so you won't miss the upcoming videos

Channel: CodingZest

Views: 34,542

Keywords: SoftCoding, login screen design flutter, simple login screen in flutter, flutter login screen tutorial, flutter login screen design, how to make login screen in flutter, how to design login screen in flutter, flutter app development for beginners, flutter tutorial for beginners android studio, flutter crash course for beginners 2021, flutter for beginners 2022, flutter tutorial for beginners, flutter for beginners, flutter tutorial, widgets in flutter

Id: jGqoFR67Nbo

Length: 12min 16sec (736 seconds)

Published: Fri Mar 11 2022