Building Flutter Screens | Login, Signup, Validation

[Music] welcome to Everyday flutter we will be designing this beautiful sign up and login screen we will add some validations and we will do some team as well so let's get started we have um a default project created with Android studio and running here is the default flut counter app so before we start let's create all of the necessary um screens and add necessary assets and necessary package that we will need for this tutorial so let's create the screen directory let's create team let's create the assets images directory so let's add our image we will use so this image is the background image you see in this screen so after you add an asset or an image to a flutter project you have to make sure that image or that asset is accessible in the project by and including it in your pop speec yo file so let's do that so we're going to come out assets so this is a yamal file you must make sure that it has two indents at every levels so this photo is asset images so we have the images the images folder followed by the F slash this essentially tells flutter that all of the files that will be image in images folder will be accessible so after you add um after you enable the path to the images you have to run popg now it's included let's continue to add our necessary folders that include our component folder let's include our widget [Music] folder for any custom budget we will be adding to this project now for this project um in order to get these social platform logos we are going to use a package called icon plus so let's add that package to our pop spec file under dependencies and we're going to run popg again to install that package in our project now for our project we are going to be designing this login screen this sign up screen this login screen and forget password screen so let's create um the necessary screen for them just the placeholders file for them so we come to our now we have created the four necessary screen that we'll be using that we'll be designing um in this tutorial let's work on our login screen so when the app loads the first screen that will appear will be our login screen so let's work on that now we have created our login screen let include let us include it in the main. F let's start working on our login screen so the first thing we do is we're going to return the scaffold and our scff going to have an upb for the body we're going to return a stack widget now let's add our background image okay now we need our image to take out the entire screen completely uh when you see this this is sticking up the entire screen so let's work on this nice let's remove the ab bar drop- down Shadow setting this to zero completely remove it so we don't get that um drop down shallow that normally with the Abba now we will be working on full screens and all of these screens will have this image in the background so if we look at this we have this image in the background this background image this background image so the full screen we will be working on so we don't have to individually work on individual codes on each of these screen in order to do that let's create a custom scar for widget now we go to the welcome screen now let's there you go so with this custom scaffold we can now include this custom scaffold in all of our um pages so to do that we have to continue to edit our widget so we are able to use it across all of um the other screen so this text we have to make sure that we are able to add new widget to the custom scaffold since we are going to be using it across all of the other screens to do that we are going to for now we come back to the welcome screen we have this property now now with the custom scar fold widget completed let's work on our login screen so this is our login screen so our login screen we have this background image we have um text in the middle of the screen and we have these two buttons at the bottom here this sign in and this sign up button so let's design our screen or let's create our screen we are going to use a column widget in here because if you look at so if you look at the welcome screen the text and they sign up and signning button they are like in a column this first and this second so I'm going to use the flexible widget because I'm basically I consider this to be two separate so I will use two flexible widget one for the top and one for the bottom so we need the welcome text in the middle of the screen so we're going to use the center widget and we are going to be when we have two rows of text so instead of using the text widget we are going to be using the the rich text widget that allows for you to have multiples rows of text individual rules of text so here we have so here we have the rich deex and text are aligned in the center and the text span widget within the wish which text widget that allow you to specify multiple lines of text so the first text span is our welcome back text it start with for font size 45 and font width 600 withd 600 and our second text spand is our enter personal DET let's add some padding to this nice now let's work on the bottom of our screen now we have these two buttons uh sign in and sign up and instead of using um custom barding widget that comes with flutter we will Design our own custom widget button so let's do that now let's import our custom button into our welcome screen so since we have the button uh side by side we will need a row for this we have our two welcome button here now let's continue to work on our button so we want this to be um a pressible button that when you click you either go to the sign up or the sign in screen right now what we have is just a widget so let's umate let so let's work on our let's work on our custom button so let's add this to our container this has color this has a white color at the back and this is transparent so let's add a color to this so let's let's add of B rers so the Border radius um if you look at this screen it is curved at the upper left so we apply our border raders to the top left of this to the top left we have a background color of white now let's add some styling to our text so we have increased our font size so we need our welcome screen to take the entire horizontal space from here to here so let's in order to do that let's go back to our welcome screen and let us put our welcome button and expand it expanded will allow the widget the welcome button widget to take up the entire space so let's take up the entire space now if you look at what we are trying to create this portion take up almost the entire screen with the welcome in the middle and this just the button just at the bottom here so the button just at the bottom here so we need to add the flex property to the flexible widget for these respective flexible to take up the appropriate spaces that want them to take up so these are the two flexible we are using so for the first one we're going to add a flex of eight and for the second flexible we're going to add a flex of one there you go now we need these we need this button to be aligned at the bottom of the screen so we're going to use the we're going to wrap the row widget in the alignment in the Align widget so let's do that there it forces it down to the bottom of the screen so let's continue to work on our button now we won um on our screen we have sign up we have sign in and sign up so let's continue to work on our button to make sure we are able to provide the the specific text for each of these button so to do that we are going to add a property to this custom widget see you know start so the text is missing we have to now provide the text X first one is sign in sign up so in order to allow user to click on this to go to the necessary screen we need to wrap our our custom welcome button into the Cure detector widget so let's do that and tap now let's quickly set up this page let's come back there so we're going to use navigator navigator get my two now when we click on this screen we go to the sign up so let's this is the sign up screen so let's work on our sign up and signing screen um sign up so we're going to use our custom scaold or sign up so let's copy this just sign up so let's go our sign screen let's put this now let's edit now our custom button is moving us to just one sign up screen we want to be able to edit it in a way that we are able to apply the necessary screen that we want for each of the buttons so let's do that so we're going to move this change this to a wiget variable call this [Music] ontap so we're going to no let's add it to the Constructor now we can go to welcome screen and we specified sign screen on sign up screen now when we click we go to the sign in and we click we go to the sign up so our button is working quite fine now this has a white background and this has a transparent background and we have space around let's work on that so let's continue let's add space around our button text so we're going to add padding now let's Center text so now from we have this with background white and this transparent so let's do that so we need to provide a way to add colors to specify or to add colors to these buttons now let's specify color make this transparent you go there you go now let's work on one button here is white text one is blue let's do that as well so we're going to change the color for the Buton it's this for for okay eror now we need to make this the actual team color for our design so let's work on the team so we're going to create a team five this is our team what we're using when we viewing our app in the light mode so this button style defines the elevated button that we will be using um not too long so this target all of the elevated button in our application so any elevated button we add to our application that elevated that elevated button will have this style this style will be applied to it across the application so this is our light mode Let's create for our dark mode so this is our dark mode we won't be deing too much with our dark mode but what is clear is this dark color scheme is being pulled from this constant color scheme and for our light mode the light color scheme is being pulled from the light color scheme here so um so let's go back to our welcome screen let's light color skin there go so we have successfully completed our log in our welcome green rather so let's work so when we click this we see our Arrow here is black but in this it is white so let's work on that to change that we need to go to our custom abar widget that we created and we apply the necessary team so let's add an icon team so let's work on the login screen I give this size bag a h of 10 because I'm trying to get this right space s bu decoration white background order radius of 40 top right top left save this this is the sign in there you go so if you comment this out straight so we need this to take up this much space so we're going to apply Flex value to this so for this J we going to use a column [Music] so let's define the form key every form has a key that uniquely identifies that [Music] form [Music] [Music] so this is the email email text form field this validator function validates the value the user enter into this text view the text the input decoration defines all of the coloring and the look of the text view so the password for text form Feld so this obsc text is to prevent the text from displaying it leave this um xter in a place so it is defined here you can change this to there you go the validator function validat to make sure that text is entered and that text is entered as as the as you want it to be in the case this text view cannot be null and it cannot be empty if it is out of these this please enter password will be shown let's add some spaces between this let's work on this [Music] [Music] portion so let's put equal space between this password forget password and remember remember me so let's put some [Music] pading [Music] have some space but so let's wrap this simple scoll VI so this is the sign up button we have the onpress function when the button is pressed this check if the validations are met if they are met the form will be processed this check if the me button is checked if it is this will continue on else ask you to please um check it so let's work on this portion [Music] [Music] this a divide we have a Ru and a to to expand with the divider and aing with the text sign me up a divider to expand dividers let's add some space [Music] [Music] [Music] [Music] so for time I just speed up the um recording so the code is available within um the code is available in the description you can download the code and follow everything but essentially sign up screen is just as the sign in screen so you can just download the code and follow all what we have done so if we go to so we notice that all of the buttons have the same St so let's apply our but styles from our team file to our screen buttons so in our team we have already defined the style for our button so let's UT our team in our app in the main file so we're going to take out so we're going to take out this access the light mode so this light mode from our team file that's what we Define here so with this light mode now accessing as our team so when we apply these changes it automatically picks up all of our buttons so if you are new here please subscribe to the channel or please leave a comment on how we can improve the tutorial that we provide um any comment is welcome be it positive or negative we will accept those comment and try to make our tutorial better so thank you for watching there are other um tutorial videos on this channel feel free to check them out and leave your comment subscribe as well thank [Music] you

Channel: EveryDay "Flutter"

Views: 38,462

Keywords: Flutter, Flutter Tutorial, Flutter Development, Dart, Dart Programming, Flutter App Development, Mobile App Development, Cross-Platform Development, Flutter Framework, Flutter for Beginners, Flutter Education, Flutter Lessons, Learn Flutter, Flutter Basics, Flutter Widgets, Flutter UI, Flutter Build, Flutter Design, Flutter Tips, Flutter Tricks, flutter flavors, Flutter Form, TextFormField

Id: lk6o7ukDYhs

Length: 57min 11sec (3431 seconds)

Published: Fri Oct 13 2023