Effortless Login and Signup Screen - Flutter UI

flutter is a versatile framework known for its comprehensive capabilities enabling cross-platform development for Windows iOS Android and web applications in a single code base so the question is how can we easily learn this language or a matter of fact any programming language the best way to learn programming is to start building a simple project in this video we will achieve better authentication user interface for login and sign up welcome to my YouTube channel my name is arhan and I am a flutter developer with experience of more than 3 years before that please make sure to subscribe to my channel and make sure to comment down below so I can reach out to you so first of all let's open our Android studio and create a new flutter project make sure you have selected flutter in generators and we will proceed and in the project name we will give our project flutter underscore authentication and underscore UI let's remove windows web Mac OS Linux platforms because we only need Android and iOS let's create a new filter project after a moment the new flutter project will be created inside our project directory you can find a lip folder that contains a main.dart file this file contains a default code which includes a floating action button and a variable which value increments whenever we press that Floating Action button so now let's or let's run our application on this iOS simulator after some time the application will be up and running and we will be able to see the default application from this piece of code as you can see there is a floating action button and there is a value 0 in the center of the screen whenever we press the button the value increments by one in our case we do not need these widgets data by default present in the main dot dot file so let's remove these widgets and also remove these lines that are commented so first of all we will change our title to flutter authentication space UI and after that we will remove the debug mode banner and set it the value to false and let's create a new folder inside loop directory with the name of screen and inside screen let's create a new DOT file with the name of registration underscore screen inside this file we will create a stateful widget with the name of registration screen and to remove these red errors we will import material.dart library and let's replace base folder with a scaffold and scaffold needs a body widget and inside body we will use a text widget and we will give it a registration screen text now let's move back to our main door Dart file and let's remove this widget because this is not available now we will replace this with our registration screen widget and now all the errors are gone let's reload our project as you can see the screen is white and our registration screen text is at the top left corner so to resolve this issue what we can do is we can wrap or text inside a center widget in this project we will use customized font that I have already downloaded from Google fonts website so for that purpose let's create a new folder inside our project directory with the name of fonts let's rename it to fonts and inside fonts I will import the file that I have already downloaded I'll I will simply we will do command C and then inside our Android Studio select the fonts folder and we can do command V the file will be pasted inside the folder so now uh if you want to use this font file in our project we have to edit our Pub spec yaml file as you can see there is a already present lines that are commented out let's uncomment this fonts line also the family and the fonts value we will provide that location of the fonts in our project so let's adjust the indentation because it is very important let's rename the family to monstera and we will give the assets because it is in our fonts directory we will to avoid spelling mistakes we can go to refactor and rename our font file let's copy the name from here and we can simply paste it here so in this way we will avoid spelling mistakes so we have provided our assets file in our Pub spec yaml now let's get our dependencies by Pub get after sometimes the dependencies will be loaded after that let's create a new dart file with the name of app utils inside our lib directory through this files we can manage all colors and different small widgets that we require in our app but we do not want to do it statically through this we can do this dynamically and we have to Define our colors for example we have a colors.white that we are going to use in our application so I can make a variable of a type color and give it a name of color white and same goes for our primary color that we are going to use for this we will use a variable name color primary and equal to we will use uh the color and inside this I will provide the code of the color we are going to use that is 0x double f5145 C1 and let's put a semicolon at that as you can see you can change the color whichever you want from here and throughout the app the variable will be same but the colors will be different so now let's move into our registration screen and for background color let's give our color primaries to check that our code is working or not so now if we reload our project you can see that the background color of registration skin widget is changed so what we want to achieve is we want to have some text failed some title and some radio buttons and a button for sign up so for all these elements all of them are aligned vertically so what we will do is first we will remove this Center widget and at the place of Center we will use column because we are going to align our widgets vertically inside column we will use children and children takes an array of widgets first of all we will use a text widget we will use let's check we will enter Jack and if we reload our project you can see that the jack is at the left top corner of the screen it is out of the safe area as you can say that safe bound so we can wrap our column inside a widget and we will name it safe area and now if we reload our project you can see that the text widget says inside the safe area basically safe area contains the notch area of the mobile phone where we can see your time or charging or Wi-Fi buttons so let's align our widgets in the center for column and if we reload project you can see that the title Jack is in the center of our vision let's give some style to our text for this purple we will use color white for our text and after that for font size we will give a value of 28.0 and for font family we will use a monstera family of fonts that we are using and after that we will make this text board so for font wait we will use Font weight dot bold now if we reload our project you can see that the Jack is in the middle of the screen and it looks beautiful now so now we can reuse this Center widget with the text widget inside it before that let's give a size box to give some space between check and of all trades text the X3 that we are going to use let's give a size box of height 8.0 and after that let's paste the above code the center widget with text widget inside it so now let's intent our code and let's replace this check without text of all trades and after that let's reload our project again after reloading you can see that jack of all trades in the center of the screen and are vertically aligned inside our collar after this after this video let's give some more space uh between the widgets for this purpose we can again use size box and we could have given a static height by this time I want to show you another way through this we will use media query and a DOT of context dot size and we will give a height dot height we will get the height of the media that we are using it gives for example if we are using a phone with much bigger height it will return the same height in which we are working so we can multiply that with 0.03 and let's remove these yellow warnings by adding constant and now if we reload our project you cannot see the space right now because we haven't used any widget after that so for that purpose let's copy this again because we are going to use the same details let's remove this text and add here please enter your information so now let's reduce the font size from 28 to 14. and its reduces to 14 and now if we reload our project you can see that there is a text piece entry information underneath our title of our app so now what we need after this is we need to have some text fields in which we will get input from the user for this purpose we will use text form field widget that will give us a text field so now first of all we will give a keyboard type because when the user inputs the data it will be helpful for him to get the suitable keyboard for it so first of all we will give it a text input type dot email address you can see that there is a slight line that represents the text field if we toggle a software keyboard and type something you can see that that text field is working and the text is at the left corner it's aligned at the left side of the text form field so first of all what we will do is we will wrap our text from field inside a padding widget and we will give it a padding from left we will give it 16 and from right side we will give a padding of 20 pixels now if we reload our project you can see that there is some padding from the site and it looks more attractive now next we will set or obsecure text to false because we are not using it for our passwords after that we will set our controller for this first let's initialize a new text editing controller and we will name it email controller now let's copy this email controller and we will paste it down here after this we will give some style to our text for color we will use color white color white and for family for font family we will use a monstera font family that we have used above let's add a constant to remove These Warnings and now if we reload our project and let's type something into this text field you can see that the styling is changed but the text is still aligned to the left now what we will do is we will set our text alignment to Center and or cursor color we will give the cursor cursor color a color white now if we reload our project you can see that the text is in the center and the cursor color is white now we will give some decoration to our text form field widget for this we will use input decoration firstly we will set is is dense property equal to true equal to true and after that we will use a prefix icon that will be before the text is shown in the text form field we will set this icon to equal to icons dot email and if we reload our project you can see that there is a small shaped email icon at the start let's give some styling uh to this icon first of all let's change the color of this icon for this purpose we will set the color of this icon equal to color white and we will give a size of 25.0 after that if we reload our project you can see that the icon colors is changed and now let's set the focus color of this text form field widget equal to color white now if we reload our project uh you can see that the changes have taken place but if we remove the text from the text field we need to add some hint text for the user so we know what to enter in this field for this purpose we will use hint text and we will pass a string of a please enter your email address now now if we reload our project you can see that let's remove the warnings padding constant you can see that the hint text is in a black shape black color so first of all let's give some styling to this hint text for this purpose we will same we will use the colors dot Gray now let's define this colors.gray in our app YouTube's files as we have defined our colors that we are using before for this purpose we will use a color gray and we will set its equal to Colors dot gray and add a comma at the end now let's copy the color name and let's replace this color type with color gray now if we reload our project you can see that there is an error uh let's see what's the issue now let's go to app utils files as you can see that we had to add semicolon here instead of a comma so now uh let's uh go to our registration screen and if we reload our project you can see that the hint text color is changed so now let's decrease the font size uh we will set the font size equal to 12. and if you reload opposite you can see that now the hint text is looking fine and we will use the same font family monster that we are using throughout our application so uh next uh what we want to do is we want to add border to our text form field so first of all we will add a focus border Focus border means whenever the user have clicked on our text field widget so for Focus border we will use underline input border and inside this we will use Border Side and for Border Side we will pass a color we will use color white here and same we will do for the Border even though uh the text field is not focused we will use the same strategy and we will go for underline input border and same inside this we will use border site and for Border Side we will give a color and for color we will use color white let's add comma at the end for because it is helpful for indentation after that we will add some content padding uh for our text form field widget for Content padding we will use Edge incest uh dot uh only agent sets dot only and we will give some padding from the top and we will set it equal to 15.0 now if we reload a project now let's reload our project you can see that the text is now at the bottom of the text form field which looks more cool now let's add some size box uh of height 50 from above the text please enter your information as you can see that now this is a gap between these two things the text field and our text widget that we have used recently now we can do is we can copy and paste the same text field that we have used before and we can easily replace uh or hint text and we can add here piece uh enter your name if you reload our project you can see that the hint text is changed and enter your name we just press it to enter your name and what we can do is we can copy this text editing controller and let's create a new controller and let's change it to a name controller and let's copy this name controller and replace here uh with the email controller that we have used before and instead the icon of email we will use a person icon and now if we reload a project you can see that we have changed the text field and we have reused the code that we have done before let's give some space in between them and we will give it a height of 25. so uh in no time we have uh developed another uh text form field what but the issue is this uh we have want to have four text form fields and it will cover a lot of space and it will be a lot of code to go through if we want to make some changes or make it dynamic or change the color of it step by step so to resolve these issues what we can do is we can extract this flutter widget as you can see there the flutter has automatically extracted this widget for us what we can do is let's copy this widget from here and let's create a new directory in lib folder with the name of widgets uh that's why that's how we can arrange our code files inside this we can create a new dart file with the name of input underscore field underscore widget and inside this let's paste our code and to remove this error let's import material dot dot as you can see that most of the errors are gone now to remove this hair we have to import air buttons files because we have declared all colors in app utils now let's move back to our registration screen and we have to import input field widget dot file to remove this error so now as you can see that we need to have two input Fields so what we can do we can just copy this code and replace with our previous code for our first text field now as you can see that we have with the same name we are getting the parameter email controller let's reload our project to see that if our code is working you can see the code is working it's still the same and at both places you can see the same index now how can we resolve this we can make it Dynamic so first of all let's change the parameter name that we are getting let's change to controller so the we can't be confused after that we have developed and now replace this controller email controller with the controller and now we can declare another string with the name of hint text in text let's make it required in the Constructor this dot index now what we can do is we can replace uh the index that we have statically written with this variable here we can remove this please enter your email and we can replace it with a hint text now uh let's remove constant to resolve this error because we are using constant at the top let's do input decoration constant okay now it will work fine to remove this yellow warnings we have to import constant so now what we can do is uh we can also change the icon because we are using the same icon in this code but we want to make it Dynamic for this what we can do is we can declare another variable with the type of Icon data and we will give it a name icon now let's make it also required in the Constructor with the we will add a required keyword and we will use this dot icon now let's replace the icons dot email with the icon variable that we have just created that we have to remove this constant from the start to resolve this error now we have made our input field widget Dynamic so let's move to registration screen and let's remove uh the values that are already given in we will replace email controller with controller and email we will have to remove the email controller and we will put name controller here after that let's give a icon and we will use icons dot person and for hint text we will add please [Music] or just enter your name as you can see all the errors are gone and we will do the same in our second input field widget we will replace the email controller with controller and after that we will add the icon and for Icon this time we will use icons dot email and for the hint text we will use enter your email when in a string we will use enter your email so as you can see that now the errors has gone and if we reload a project you can see that both the text Fields have different attributes so now what we need to do next is we need to have another text field for the password where the user can enter his or her password so let's copy the code above that we have written above and let's paste it down here and as you can see we have to declare another text editing controller let's copy this line and paste it down here and we will rename it to password controller and yes password controller and just copy this password controller and replace it with the email controller now we can change the icon to icons dot password and for the hint text we can change it to enter your password and now if we reload our project you can see that there is a third text input field where we can enter a password but the password is not execute it's in plain text as we can read so what we can do is let's move back to our input field widget as you can uh we can set a Boolean here we will set final uh Bool and we will add obsecure text [Music] and in the Constructor we will initialize it equal to a false because we do not want to uh make it required every time when we use this widget so now we can what we can do is we can replace our faults with the f-secure text and in registration screen we will call obsequote text and we will set it equal to true and now if we reload our project you can see that the text inside our password text field is up secured and it more looks like a password now so the next step is uh we have to declare a text field another text field uh this time it will be different what we will achieve from here is uh we will use the functionality of ontap for our text form field from where the user will get a pop-up for its birthday and can select a birthday from the calendar so now we will give the same padding that we have given above for the style we will give same style that we are using above first style we will give color color white after that uh font family we will use the same font family monstera but we are using already in our project let's add monstera to a font family and after that uh what we will do is uh we will align our text to the Center for this purple we will use a text align Dot Center uh we have we are just going to make our text field like the above that we have used before for the controller we have to declare another controller with the name of bus date controller and now let's initialize it at the top for this purpose what we can do is we can copy our initialization of all the controller that we have done before and just rename it to our first date controller so now we have done our controller initialized our controller and after that uh what we want to achieve is we will add decoration to our input text field for this purpose we will use decoration and in this we will pass input decoration and for the hint style we will use textile and inside this for the color we will use a color gray and for the font size we will set equal to 14.0 [Music] and for the font family we will use the same font family monstera that we are using above let's copy it and paste it here I am just copying and pasting it because I do not want to make a spelling mistake in here so now let's reload our project uh you can't see the hint text because we haven't added the in text yet we only added the hint style to resolve this issue let's add hint text and for hint text we can enter enter your birthday now let's reload our project you can see that there is a hint text in our text form field what uh what is missing now is that we have to add Focus border to our text field for this purpose we will use underline input border and for Border Side we will use border site and give it a color of color white same goes for the Border throughout the application and we want we will give we will use the Border parameter and we will pass underline input Border in it also and for the Border Side we will use a border side and we will give it a color of color white the color white now if we reload our project you can see that we are missing our icon prefix icon that we are using in the start of our other input field widgets to resolve this issue let's add the prefix icon in our input decoration for prefix icon we will use icon and inside this we can call icons dot calendar month now if we reload our project uh you can see that there is a icon but its color is gray because we haven't given any styling to it for this we can use color white and for the size we can give it a 25.0 that we have used before so now if we reload our project you can see that the icon is in white color so now let's give space from the above text field we will use 25 pixels and now if we reload you can see that now the text fields are aligned perfectly so now what we will do is we will uh call we will use the ontap functionality of the text form field and inside ontap functionality what we will do is uh first of all we will declare a variable date time and we will name it date and we will set it equal to date time and pass 1900 it what it represents is it will get all the dates from the 19th century in our date variable after that we want to get the focus of for application whenever the user Taps on the text form field the focus will be shifted to the pop-up of the birthday calendar that is shown on the screen for this we will request Focus From the focus node and after that we will use another we will use the variable that we defined and date is equal to a weight and we will use a show a date picker method uh it is not the default methods that are available for flutter so for this we have to import a package in our Pub spec yaml file with the name of uh intl intl now we have to get our dependencies to add this package into our project to add this to in our project let's press Pub get and after some time the dependencies will be added into our project now we can use that method so now let's put a weight in the start and after that we will use a show uh date picker and if we use this method you can see that we have to pass some parameters in it to use this method so first of all what we will do is we will add exclamation at the end and we will intent our code so we can easily do the changes for initial date we will use date time dot now that means that whenever the calendar is loaded the initial date will be set to the date of the current date and after that first date we will add date time and we will add 1900 and for the last date we will make it a date time and we will add 2100 so the latest date or the last date will be of the 21st century and not the not Beyond of it so now let's reload our project and if we click on our text field you can see that there is a calendar pop-up from where the user can select the date you can see there is a listing of the months uh years uh from the wave from which the user can select any year let's select 1998 and from here it can select the date and if we select it but it is not showing in the text field because we haven't uh set this value equal to our text field controller to resolve this issue what we can do is let's declare a string variable with the name of date formatter and we will convert our date to string first and after that we will use the date time variable and we will give it a name of DT and for a date time what we can do is we will pass we will convert the string to proper date time variable so in here let's uh pass the date format variable that we have used above after that we can declare a format a formatter in sense that if the user selects the date in which format we want it to show to the user now in here what we can do is we can declare the format for the format I will be using a small D at Double D at the start with capital 4ms and at the end will be the years so the format of the date will be in the start would be the date then month and then the year now what we can do is uh we can use our birth date controller and we will set it equal to a formatter uh that we have used uh declared above for the formatter dot format and we will pass the DT variable of our date time a variable that we have declared Above So to resolve this error we are directly storing it to a bus State Controller but we have to use budget controller.txt now the error is gone and now if we reload our project let's reload our project and see what uh what is it working or not and now let's go to enter your birthday and select any day let's select 23 and if we press OK you can see that in the bus date controller the date of birth variable is assigned the value is assigned to birth date controller so now we have completed our text fields that we are going to use now what we want to do next is we will uh give the user the ability to select its agenda from the options that we will give so for this we can use text and we gender and for The Styling for the color we will use color white and for font size we will first of all let's give some latest spacing between the general variable and we will set it to 1 and for font size we will give 14.0 and for the font family we will use the same font to Emily monstera that we are using throughout our code let's copy this and paste it down here now after that what we will give we will give font weight and we will set it equal to bold because we want to make it look like a heading and now if we let's add the constant to remove These Warnings and reload our project you can see that the gender variable is in the center of the screen to resolve this issue what we can do is we can wrap our text field inside a column and we will set the cross axis alignment property of the column to cross axis alignment dot start that's how the text Fields will be the text will be at the aligned at the start of the column and for let's give a size box of height 10.0 to give it some spacing between the text field and the gender text after that let's wrap our uh and now before wrapping our column into a padding widget uh what we want to do is uh we will have some row inside our column to represent our two radially styles from where the user can select the gender and the female gender or the male gender for this purpose we will use row widget and inside this we will use children which takes in Array of features inside this we will use flexible to we will using flexible flexible because we want it to cover the children's of the road to cover the space that is available so for this for Flex we will use uh for no not for Flex uh we want to use Flexfit dot lose but we have to replace this Flex with fit we will use a flex fit dot lose and for child property we can use a radio list Style gradual style and inside this radially style we can do the styling how the red curly style is shown for the content padding we will add edge inserts.0 and after that uh for group value group value is the value that will be assigned to the list style whenever we click on the radio buttons so let's declare it above and what we can do is we can declare a string variable with the name of a gender selected and we will initialize it equal to mail so whenever the user comes to this resistance screen the mail will be selected by default so now let's go to our radially style and for the group value we can add a gender selected and for the active color we will give color white and for the title we can add text mail we will add text widget and inside this we will add a mail in capital letters after this let's give some styling to this text and for this purple we will use style and inside this we will pass textile and in text style what we can do is we will set font size equal to 14.0 and for the color we can use a color white and we will use of font family monstera that we have used above in our project now we can also make it bold for how we can use Font weight and we can set it equal to font weight dot bold now to remove These Warnings yellow warnings we have to import constant modifier uh at the start of the radioli style and now if we you can see that we are missing a method a parameter named on changed so to resolve this issue first of all we have to after the text widget we have to set the value of this radial style whenever the user clicks on it equal to a mail and on changed what we will do is we will get the value inside a value parameter and we will use set State we use set state to change the state of the variable and with the gender selected variable that we have declared above we will set it equal to Value dot string that we have defined above of Mir and now we can and print the gender selected to make sure in the console that we can see that the user have selected the gender and now if we reload the project you can see that there is a beautiful mail list style and it is already selected so now what we need is we need to create another list style for this we can copy this code and reuse this code by pasting it down below and we can replace the attributes that we do not need or we want to change for mail we can set it equal to female let's make it into capital letters and after the after after that we will set the value equal to female and now it is done and if we reload our project you can see that there are two radioli Styles and whenever the users select each of them you can see in the console that the value female or male is being selected so now what we will do is uh we will give some padding from the sides to our column uh to make it more in synchronization with or above form and for this we will use Edge insist dots symmetric and for this we will give horizontally 22.0 pixels padding from left and from right and now uh we have uh declared uh our gender selection for the user we will give some space between the text field and the gender text to make it look more beautiful now what we need is uh we need to have a button here uh through which the user can submit its details to us and we can create its account for this purpose uh what we will do is we will use another size box with a height of 60. let's give this let's use the size box and give it a height of 16. after that let's use the child parameter and we will pass it in a material button and for onpest we will just put the empty callback here and later we will put the validation code inside there and for the elevation we will give it 5.0 uh so now what we will do is we will give a child property and inside child property we will use another container uh to show a button and the styling of to our button for the decoration we will use a box decoration and inside box decoration uh we will set the background color of our button equals to color white and after that we will set the Border radius and for Border radius we will use a border radius a DOT circular and we will give it a value of 30 pixels to make our container the button uh sides more circular and after that we will use in the constraints property of the container for this we will use a box contains inside it and here we can Define the width or the height of the button what we want it to be the minimum or the maximum for the maximum height we will set the value equal to a 60 and we will not provide any width because we want it to cover the whole space that is available for the alignment of the child inside the container we will use alignment Dot Center and for child we will use a text widget and inside text widget we will pass sign up a text as you can see there's a beautiful white backgrounded button with a text sign up that is available so now let's give some styling to the text that is shown on the button and for the text style we will give color and we will use a color dot black colors dot black here and if we reload our project you can see that the text is now changed to a dark black color and for the font size we will give a font size of 16.0 pixels and after that we will make it uh more uh bold and before that let's change the font family as you can see that it is not in this synchronization of the above font that we are using for font family you will use monstera we are just we we can declare a variable of string with the name of font family and we can set it equal to monsera that we monsera and add semicolon at then because we do not want to copy paste again and again let's make it Dynamic and we can replace now this monstera with the font family uh variable that we defined in the app utils files we can replace all the monstera family that we have used statically and we can replace it with font family so now we have made our font family uh Dynamic also and now uh what we will do is uh we will use this button inside our login screen so what is the best way to you reuse a widget is we can copy and paste this code but we can also extract this flutter widget and we can use this uh we can save it in a separate file and we can use another on another screen and anywhere for this we will give this a widget name a prime t button name and we can refactor this button as you can see that the flutter has extracted this widget for us and we can add constant at the top to remove the warning now let's copy this primary button code from here and inside or widgets directory we can create a new DOT file with the name of let's give it a name of primary underscore button and inside this we can place this code and let's add a material library to remove these errors now what we can do is to make it Dynamic we can add a string a variable here at the top and we can name it equal to text so that the title on the button we can change it and in the Constructor we will make this text a variable required and now let's use this text variable and let's replace sign up with this text and to resolve the issues of app util file we have to import the app UTIs dot dot file in this dot file to remove these errors and now let's get back to our registration screen and let's pass before that let's import the primary button dot file and now we will add the text parameter and we can add sign up in here and we will add constant to remove this warnings and now if we reload our project you can see that the code is working fine and the button is in the same style that we had declared before now what we will do is uh we need to have a text down below a button uh which will represents uh the customer that if he or she has already an account then he or she can move directly to the login screen for this purpose we will use a text and we will set it value to already have an account and it will be in the center of the column widget that we have used before so now let's give some styling uh to this because it is in black color let's give some textile and we will set the color of this textile equal to Colors a color white and for the font a font family we will use the font family variable that we have declared before in the air putels file and after that let's add constant to remove the warnings now if we Reloaded The if we had reloaded the project you can see that the text color is changed and now after this we can wrap our text widget inside a row because we want to have two different type of text because we want to we want to make the other text clickable so that the user can move to the login screen for this purpose we will set the row property main axis alignment to main axis alignment Dot Center and after that we can use this text widget let's copy this text widget from here and we will ReUse It Down Below in the row uh widget and let's remove this already have an account and let's replace it with a sign in sign in button so now what we will do is we will make this sign in button a bit bigger for this we can change the font size and before changing the font size let's set the font weight and we will set it font weight a DOT volt and now we have changed the font weight of our text now let's increase the size of it and we will set the size to font size 15.0 and now if we reload a project you can see that there is no space between the button and the text below for this purpose we will use the size box above the text and we will give it a height of 25. now you can see that it is perfectly aligned and now if we select a text field you can see there is a error of render Flex overflowed this is because in the scaffold we can set the property of resize to avoid bottom inset equal to a false that's how we can resolve the renderflex overflowed error and as we restart our application and just again check the text field now if that sock keyboard is toggle then there is no error now let's check all the text Fields if they are working or not the email text field is working and now for the password if we enter any text you can see that the text is in app secure up secured form and later if you select any birth date it shows and the genders a male or female are also working now what we want to do is we want to add some validation in our form for example if we remove all the data and whenever the user click on the sign up button there should be a pop-up telling the user that you have to add your name before continuing to the next step for this purpose what we can do is we can declare a method with the name of is validate and inside this we can add some checks to check if the user have added email password gender selected gender or date of birth for first of all what we can do is let get to our app utils file and here we can declare a show scaffold method but it will do is whenever there is an text field which is empty we want to show a user interface and pop up to the user that you haven't added the name or anything else for this method what we can do is we will take two parameters of one will be the build context and second will be the string string will be string text that will be the error that will be showing to the user now we will return a scaffold messenger and we will use its method dot show snack bar and inside snack bar we will pass the text variable that will be that we will get in our is validate method uh the error that we have to show to the user now we have created our show scaffold method now we will move back to our registration screen and we will check if the name controller dot text is empty then we will call this method shows scaffold and we will pass a text inside it uh with which will be please enter your name now as you can see that the is validate method have a return type A Boolean for this purpose uh we will make sure if all the checks are true there are no errors or the user have entered all the data then we can return true at the end and if there are any errors we will return false so that it will show the error box to the user so now in our primary button we haven't declared uh on pressed callback so to resolve this issue let's go to our primary button uh widget and for this we will declare a variable here with the name of final uh void it will be the data type will be the void callback and we will name it on pressed uh to make we need to have this in all the places wherever this primary button is called so this purpose for this purpose we will make it required and now let's copy this on pressed and replace the empty callback that we have done in the material button let's copy this from here and let's uh replace uh it in the material button on pressed callback so now we have made a button Dynamic on the on pressed options so let's add on pressed here and inside on pressed what we will do is uh we will call a method uh is validate Insider if statement to check if the is validate is true uh then we can print uh that the data is validated data is validated and if it is false that it will show the scaffold that we have already designed before so now if we restart our application and just let's uh we have added the name controller check and if we press on the sign up button you can see that there is a pop-up showing the user that please enter your name and now if the user enters his or her name and after that if you press on sign up you can see that in the console data validated is printed out so now what we can do is we can use this uh method of checking the checking if the name controller or any controller is empty and we will use a scaffold to show the errors so now what we can do is we can replace we can change the controllers and at that place we can change it with bus controller password controller email controller and for the errors we will make sure to change it to the uh corresponding text Fields name so now if we restart our application uh you can see that whenever pressed on a sign up button the first condition will be triggered and it will ask the user to please enter your name and after that if the user again press on the sign up you can see that the error will be shown please enter your email and it will be a so on for the password uh the user have to enter the password and for the date of birth we have to add it the user have to add it to proceed next in the application so as you can see that the form is completed and the validation is completed if all the data is entered you can see in the console that the data validated is printed out so what we need to do is we can add here a navigator in the future and whenever the user passes this button it will navigate to The Landing screen or the home screen of the application that we are going to develop as for now we have completed our registration screen and in The Next Step what we will do is we will in the screens directory we will create another Dart file with the name of a login [Music] underscore screen and inside this we will declare another stateful widget with the name of a login screen and to remove this error we have to import material dot dot and let's remove a placeholder and replace it with scaffold and inside body we will pass a text login screen and we will make it uh we will wrap it inside the center widget to make sure that it is in the center of the screen so now in the registration screen so now in the registration screen we will make this text sign in uh clickable for this purpose we will wrap it inside a gesture detector and to remove these errors we have to remove the constant above and on the on tap functionality what we will do is we will use a navigator here Navigator is used to push screens or pop screens around for example if we are on the trending screen and if you want to move to the home screen we will use Navigator and for navigator we will use push method and inside push we have to pass the context and material page root and inside material page root we have to give the widget name like login screen in our case where we want to move now if we have reload our project and click on sign in screen you can see that we have moved towards the login screen which we have declared about so now in the login screen what we'll do is we will change the background color of the scaffold and set it equal to our primary color that we are using throughout the app and now if we reload our project you can see that the background color is changed now let's remove the center widget from the body and we are going to use the safe area first of all to make our content inside the safe area so that the notches are notches do not disturb our content so inside safe area we will use column because we are going to align our elements inside our login screen in a vertical form so first of all what we will do is we will give some height from the top and for this purpose we will use a media query again and for media query we will use media query dot off context and then we will pass the size and for we will pass the height and we will multiply it with a 0.06 to give some space so now let's uh have a look on what we are going to achieve on login screen uh we need to have two text fields and all the titles like we have done in the sign up screen so of all what we will do is we will use a row widget and we will use the children widget inside of it and for row we will make it main axis alignment and we will set it equal to main axis alignment Dot Center and in the row uh first of all what we will do is we will use a container to make those symbols those designs that you we have seen on the login screen and for the children's what we will do is uh we will use a container inside a column we will use a container and we will give a width of 20.0 and we will give the height to it of 10.0 now for the decoration we will use a box decoration [Music] and inside box decoration we will give the color to this container which will be color white and after that we will give some border radius uh to our container because we want to make the shape circular at the end for this purpose we will use border radius and inside it we will pass border radius a DOT only so that's how we can give a border radius to only the right or the left or bottom or at the top of the container in our case we will use top right and we'll give a radius dot circular and we will set the value to 20.0 and now we will use the bottom right portion of the container and for this we will also give a radius dot circular and we will set the value 20.0 now if we reload our project you can see that there is a shape with the top right and bottom right border circular radius is now for the column we will make it uh main axis alignment Dot Center so that all that elements are aligned in the center of the column so now what we will do is we will give some height between our design of a 1.5 pixels and after that what we will do is we will again we will use a container this time we will give it a width of 20.0 and height of 2.0 only and after that we will give the decoration as we have given above in our previous case and now in the Box decoration what we will do is we will give a color and we will set it equal to color white and after that we will use the Border radius parameter and inside border radius again we will pass a border radius dot only [Music] and again for this container as we have done in our previous container we will give a circular radius to top right portion and we will set it equal to border radius a DOT circular and give it a value of 20.0 and same for the bottom right portion and we will give it a radius a DOT circular and we will give it a value again of 20.0 now add constant to remove these yellow warnings let's add constant at the top uh now if we reload our project you can see that there is a small line under our previous design uh to complete uh or design for this now what we will do is we will add another size box with a width of 10.0 and after that uh we will use a text widget uh text widget in which we will add the title of our app that will be the Jack of all trades and we will we have abbreviated it to got and for the style we will give it a textile and for the color we will use color white now let's give a font size of 25.0 and for the font weight we will make it font a weight dot bold and in the font family we will use uh the font family that we have used above monstera so you can see that it is aligned underneath our design what we need is we want to align it at the right side of the time so let's uh cut it out from column and let's paste it inside the row widget let's paste it here and now if we reload our project you can see that it is perfectly aligned at the right side of our design so now what we will do next is uh we have to add the welcome back text to our users if they have created us uh created the account before and they are coming back to our application on the login screen what we can do is uh we can declare another text box before that we will give it a some height of 6 40.0 pixels to give some spacing between the title and the welcome back text for this we will use another text widget and inside this uh we will enter welcome back uh and the exclamation mark at the end now if we reload our project you can see that there is a text but we have to improve its styling for this we will use a textile widget and inside textile first of all we will change the color of the text and we will set it equal to color white and after that we will set the font family equal to a font family variable that includes monsera font family and after that we will set the font size equal to 20.0 pixels and for the font weight we will make it a font weight a DOT bold so now if we reload our project of trading constant let's reload our project you can see that the text welcome back looks more elegant now after that what we need is we need to add another text to ask the user to please enter their details for this purpose first of all we will give a size box of height 50 pixels and after that we will use another text widget and inside text widget we will pass a string off please enter your details here enter your details below and after that we will give some styling to our text feed text and for this purpose we will change the color to color white and we will give the font a weight to this before font where let's give a font size of 14.0 and after that we will set the font family equal to font family uh that is a monstera font family and let's add constant at the top and if you reload our project you can see that there is a text please enter your details below and we will make it a bold uh to be in more synchronization of the previous UI so after this uh it is easy for us now to create the login screen because we have extracted all widgets what we need to do is we just need to call uh those widgets and our login screen will be done in less than five minutes now what we need to do is first of all uh What uh we need to have a text field here for the user to enter their email address for this weekend uh call or input field widget let's call this widget input field and we have to provide the required parameters so first of all let's declare above the text editing controllers first of all let's add text editing controller data type and after that we will give the name and initialize with it text editing controller and same we will do for the password controller also let's name it password controller and again initialize it with the text editing controller so we have uh created or two controllers that we need let's replace for use first controller email controller and for the hint text we will add enter your email and for the icon we will give it a icon of email for this we will use icon icons dot email so we have created our input field in just less than a one minute as you can see that the text field is shown on our screen so now we can just copy and paste this code down below and we can change the uh icons the hint text and the controller first of all let's change the controller to password controller and then the hint text change it to enter your password and for the icon we can replace it with icons dot password and for the Obscure text we can set it equal to true so in not more than 30 seconds we have created or another text field for our password let's give some spacing between the text Fields this is the power of extracting or widgets out of out to in other Dart file so we can reuse them inside our project so now what we need is we need to add a button for login so that whenever the user presses that button uh it will check the it will validate the data if the user have entered the data or not for this purpose we can use again the primary button widget that we have created and for the text we will add sign in and on press we will just for the moment passed an empty callback here and let's add comma and intent or code and once we reload our project you can see that there is a button created underneath our form now what we need is we need we will copy this code from here for which we created for already have an account text in our sign up screen registration screen so now let's paste this code here and let's uh copy the height exact height that we have given in the registration screen after the button and now we reload our project you can see that there is a text of already have an account we can uh customize this uh text according to our needs and we can replace the all ready with the don't don't have an account and sign in we will replace it with sign up you can see we have created our login screen in no time and in the gesture detector of signup we can replace it with the registration screen so when the user press on the sign up button it will take it to the sign up screen and when the user pressing the sign in button it will take it to the sign in login screen so now what we can do is uh we can also add validation to our login screen so for this purpose what we can do is we can simply copy the is validation method from the registration screen and we can use it inside a login screen before we do that let's give some padding to our text fields that are in our login screen for this purpose we can wrap our column widget inside a padding widget and we will give a padding symmetrically from horizontal we will give it a 15.0 so from all the sides the padding is 15.0 and now it looks more beautiful the login screen so now let's move back towards our is validation method that we can use for the sign in of our login screen for this we can use if is validate we will use the same method that we have declared in our sign up screen what we can do is let's copy the is validate method from our registration screen let's go down below the file here is our method let's copy this and we can simply paste it in our login screen at the bottom so now we only need here is the email controller and only the password controller so we can remove all the remaining uh checks that we are not going to use let's replace this name controller with email controller and at the end let's replace it with please enter your email so now we have declared or is validate method also for our login screen so now if we go to a login screen and press on sign in you can see that there is a pop-up showing that please enter your email so if the user enters the email then it will show the pop-up of please enter your password and user have to enter the password widget here so now uh so we have created our login screen and sign up screen this beautiful minimalist UI so now what we can do is uh in our me and dot dot file uh we are landing the user on the registration screen we can change it to login screen and whenever the user will come again to our app it will land on the login screen as you can see after the restart of the application the login screen is showing first please make sure to like this video and leave a comment down below also subscribe to my YouTube channel as it provides a fuel to my motivation to keep sharing what I know with you people thank you so much for watching this video till the end thank you

Channel: Orhan Yazdan

Views: 7,654

Keywords: programming, development, flutter, dart, firebase, hybrid, hybrid development, animations, authentication, database, android, ios, app development

Id: hxjuqjBDEAo

Length: 67min 24sec (4044 seconds)

Published: Fri Aug 25 2023