Modern Signup form in Flutter - Signup page Flutter - Flutter UI 2023

today we are going to learn how to create signup screen inverter we are not just going to design the flutter signup screen but we will also learn how to define theme for text field we will Define all the design inside our theme we'll get the design from there so we don't have to design again and again for each field okay so in this tutorial let me just open the application this is the splash screen with the animation we already created of the splash screen welcome screen appears again with an animation so in the previous Studio when we go on the login you can see we already created the design but in today's tutorial when you click on the sign up this is what we are going to create and also when we click on this full name or any other field you can see their border icons and text design is changed but when we're going to switch it towards the dark mode inside the dark mode you can see the whole theme has been changed but the text is clearly visible so this is what we're going to learn how we can customize the themes in the plateaus instead of Designing each field separately we will Design the theme and the theme tutorial has already been created but for this tutorial we will learn how we can customize and design the text form field team which is the input decoration as you can see we are creating this playlist which is a login flutter application this application can be used on any type of letter application and you can get the code from codingwitty.com which the link is in the description and also you can get the playlist Link in which we already created all these videos so you can also get the link from the description below so in traditional we are just going to cover the design and the back end which is related to the Firebase will be started after this design portion which is about to an end so without wasting time let's get started open Android studio and in here you can see we first have to go to assets inside the images we have to declare the image and we are using this welcome image if you are following the tutorials you know that inside our previous tutorial which is the login tutorial we use the same image so we don't have to declare it also go to the lib folder and also if you're not familiar with this folder structure we already covered it as well so go to constants inside this image strings you can see we already defined the welcome screen image and also this Google logo image for the button nothing new in the sizes but in the text strings and here you can see here you've declared sign up screen text which is title subtitle and already have an account you can get all these declarations and assets right from the description below and you can also get the complete code from coding with t okay just close it go to Features here we have actually created our authentication features and inside the screens we are going to create this sign up in the signup. it's a simple stateless widget okay now let's start coding inside the scaffold as a body we will create single chart scroll view to make our screen scrollable as a child we will create container and inside the container as a padding we will use the default padding we are already created this padding in the constant sizes which is 30.0 so we'll keep the same inside the whole application then as a child we will create a column as a children of column if you remember the login design we will again going to divide the sign up screen the same way we divided the login screen into three parts the first one is the header then we have a form and then we have a footer so let me just quickly show you if you're new here you can see we have a single child view which is scrollable and also we have to make it a safe area then container with the same padding and as a column we have header widget login form and login photo widget basically when we go to this login header widget you can see we have a column with orientation at the start one image and two text right so instead of creating again the same code which is not going to be reusable so to make this code reusable inside the login widgets you can see we have login header name so we can change this name and extract it into two common widgets so it can be reusable for both login and sign up okay inside the common widgets I have created a folder with a name form and inside you created a DOT file which is form header widget and I pasted the same code which is the login editor widget and I have named it form Adder widget so this form header widget can be used on login sign up forget password and bunch of other screens that are using the same header okay here if you notice that we need to pass image name title and subtitle name the rest of the things are same so we will first get the image name okay you created a string which is image title and subtitle press Ctrl alt L now to get this from the users inside this Constructor we will create required this dot image title and subtitle we will pass all the three values from where we are going to use this form header widget and let me just replace this with image remove this constant title and subtitle control order to align the volt so you can see we have a simple column one image and two text and the design the theme that we want to use is applied with the same height with the image height has already been defined but let's say if you want to change the height for some screen so you can also get this height from where you are calling this Widget the same way we are using this string right let's just remove the unused Imports our widget is ready let's go to sign up screen in here let's call our form header widget Alt Enter import the library and if you hover over it you can see we have a required attribute which is image subtitle and title so as an image we will pass T welcome screen image as a title we have sign up title and as a subtitle will have t sign up subtitle we know first let's try to run the application if you're confused in this I will drop the same code inside the coding with T so don't get confused you can get the code from there and simply use the that code instead of this widget if you don't want to use this okay so our application is running this is the splash screen that we created in our previous tutorials and then this is the welcome screen with the animation okay let's click on the sign up screen and you can see we have one image and two text and also at the top we have to wrap the scaffold widget with the safe area let's save it and you can see this top is now not being used okay so the header is ready now we have to create a form for the form let's wrap this in the container container will have padding padding would be from the top and bottom so we will use symmetric and vertical deform height deform height is again a variable which has a 30 height so we will use 30 minus 10 at a constant now as a child we will create a form inside this form we will create list of elements so we will use column as a list of elements and to make all the elements go to the left side we will use cross access alignment because column is in the vertical Direction which is its spin axis so we are dealing with the horizontal alignment so we will call it as cross axis alignment cross axisalignment dot start now all the elements will start from the left side as a children of column we will add text form field inside the text form field let's call it let's add a declaration property and we will we will use input decoration inside this we have a label label is full name so as a label text we will use T full name we have already declared let's save the code okay so in here you can see our text field is created label is a full name and in here we can write anything next to the label let's add a prefix icon let's save it and you can see the icon has been created now to make the shape to cover the outline as a border property we will use outline input models okay you can see the outline input border has been applied now you can see that everything is blue inside this label is blue icon is blue and also the border is blue so that's we don't want to make it blue because our theme is not blue so we will change it so let's first change the icon color so to add a colors go to constraints in the colors you can see we have already defined all the colors so we'll use this T secondary color imported Library okay now let's add constant align the code let's save it and you can see the icon color is changed I've changed label colors label text on the label style use the text style add a color and again we will use the skin recolor let's save it and you can see the text color is changed now the border is left we will use the property which is called the focus focus borders again use the outline input border and inside as a Border Side use the Border Side property make the width to 2.0 and change its color to these country Colors Let's save it and you can see it has been applied ignore the next thing that we want to learn is because we are going to use these text form fields and we already use this text form Fields inside our login design and as in the dark color you can see it's not visible the text field is not visible so we cannot use the text field like this or we have to design it for the light and dark modes so we have already created and it's also not good practice to keep reusing this whole code again and again because we have already created two text fields in the login then we are going to create four to five text fields in the sign up that forget password and bunch of other places so it's not a good practice to repeating this input decoration Style again and again so let's use this input decoration inside our themes go to utils and in the themes we have already created a theme and in the widget tree I have created a feed which is text field theme dot dot and I have just copy and pasted whatever we have created over here inside our theme but the first variable is the light input decoration theme with the secondary colors the one we designed for the light theme and for the dark I just change the color to primary color the rest of the things are same just this is the skin regular which is the dark and this is the primary color see this is the primary one this is a second result so once this theme is created if you are confused about the themes I suggest you to please watch the theme tutorial we learned to create themes in the filter as in the main road dot you can see we have defined the theme and also the Dark theme and we're using the theme mode and inside the theme. we just have to call input decoration theme and we have to call the class name which is T text form field and with a static variable we can simply pass light input decoration theme the way we have created outline button elevated button and text themes same for the dark mode just inside the theme data call input decoration theme and pass the dark input decoration now we can go to sign up screen and we can remove the all code from here just inside the input decoration we have to pass label we will remove all the things all the styles from there and in the decoration we're just going to pass label as a text because we cannot pause the label inside the theme mode right so now let's save the code but we have to forward reload it again show our application is running it's in the dark mode so this is the welcome screen let's click on the sign up and you can see the full name is there but when we click on it we have a full name like this we are missing we forgot to add a prefix icon let's save it and you can see the icon is there with the text and this is the design for the dark mode now let's switch it to light mode and you can see in the light mode we have the dark text dark icon and dark border once the text form field is created so let's copy and paste it for the other text Fields okay you just change the names and icons and created four text Fields full name email phone number and password let's save it and you can see we have four Fields with the four different names now we have to add space so we will use size box for the space as a height we have deform height minus 20 because we want to use as a space as a 10 let's copy this let's save the code and you can see the space has been applied now we need to create a button let's give a bit more space and create elevated button on press will be empty for now as a child let's create a text name it t sign up Control Alt L2 align constant let's save it and you can see the button is created and we know that if we want to make it full with inside the column we have to wrap it either with the expanded or with the side box so we will wrap it with the size block because expanded is not going to work in this case and as of it we will make it H double dot Infinity to cover the full width available let's save it and you can see the button is now taking the full space and also to make it uppercase next to the text we will use dot to uppercase remove this constraint let's save it so button has been created so form has been completed let's close the form and also let's close this container we can right click refactor and extract it as a flutter widget name it signup form widget refactor class has been created over here let's cut it inside the sign up create a new directory widgets inside this create a new file sign up form widgets.door the material package paste the class import the missing libraries so once the widget is created let's close it and also the files let's import this Library okay it's imported and you can see that we have the header ready we have a form ready so now we have to create a footer which is again we can extract as a another widget so before extracting let's create it over here let's wrap it with the column for the children let's add text which is saying or and next we have to create a Google buttons first we will wrap it in the size box with a width of full double dot Infinity so it can cover the maximum space available as a child of size box we will create outline button and on precious now we are not going to add a child but we will convert this outline button with the icon so you can say outline button dot icon so we have a property icon this is a widget we can pass any widget you can pass icons but I have an image so I will pass image so to pass the image I have an asset image which is the Google logo I have already declared and then instead of a child we have a label the Google sign in with Google so the level we will use T sign in with Google as a text let's save it and you can see the button is sorry the image is going outside the screen so we have to limit it using a width width is 20.0 but save it and you can see the button has been created now the last thing is a text button so on precisional as a text we will use T already have an account let's save it and you can see already have an account is there but we will use text Dot Rich Control Alt line and inside the text Dot which we can use text span text span has multiple children's so as a children we can use text pen and other text we have t already have an account the first one Ctrl D to duplicate and the second one is T login let's save the code and you can see we have two text the reason is that we can easily convert using a style property the first one is a body text one let's save it and you can see it's change and also its property is changed and also we forget to make it to uppercase so that second expand we will just make it dot to uppercase let's save it and you can see the design is ready so this is how basically this is also a scrollable design so if you want to scroll it if it goes down so we don't have an issue and it's responsive from the right and left side so basically this is how we create the designs in the flutter and you can get all this code from the description below and you can also get the complete project from the coding with T so if you learn something new please like the video and if you're new to this Channel please don't forget to subscribe it because more amazing videos are coming we will add the logic in the upcoming video so don't forget to subscribe this channel that's it for this video thank you for watching take care allow office

Channel: Coding With T

Views: 26,434

Keywords: signup page in flutter, signup form in flutter, signup page flutter, login signup flutter, login signup flutter ui, login signup page flutter, flutter sign up page, flutter signup and login, flutter ui, flutter ui design, flutter ui 2023, flutter registration form design, flutter for beginners, flutter signup ui, flutter signup ui 2023, flutter register and login firebase, signup ui flutter, coding with tea, coding with t, flutter login app, registration screen in flutter

Id: rcRppzsY-yw

Length: 16min 31sec (991 seconds)

Published: Fri Sep 23 2022