Flutter forgot password UI | flutter reset screen design 2023

assalam alikum and welcome back to cing with t today we are going to learn how to create forget password and reset password screens in flutter okay our application is running this is the onboarding screen we created earlier and we have already done with the login screen sign up screen and in the previous tutorial we learn when the user going to click on this create account this verify email address and when the email is going to be verified this success screen will be appeared to the user and when user is going to click on this continue button he will be redirected to the login so we going to reuse that success screen has a reset password screen so let's quickly click on this forget password okay here user is going to enter his email and user is going to click on this submit button the password reset email will be sent and based on that email Firebase will show a popup in which user can easily reset his email and once the email has been verified us will click on this done button to go to the login screen so without wasting time let's get started okay as you know we are creating for e-commerce application and we have completed our section one and we are inside our section 2 2 and this is the last video of section two in this we have already completed all the design related to the login screen and if you're interested to get the complete code you can get the code from the description below or you can get it from the coding m.com okay so without wasting time let's get started open Andro studio and we are inside our project we created for our Ecom application and you can see previously we have already designed this verify email sign up screens sign up form Etc so this time we are not going to talk about the sign up okay I created a forget password and reset password files inside a folder which is password configuration so first of all let's talk about the forget password in here it's a simple stess class scold with an empty appar and just to add equal space from all the sides Ive added pedding with a default space which is 24 if you're new you don't know what is T sizes class and what is created over here in the constants I suggest you to watch the pr previous videos then as we have to align all the elements vertical from top to bottom so we have to use the column property and in here you can see first have to add headings text field and submit button in the text field we are going to get the user email based on that email we going to reset users password so first of all let's create headings in here I added two text the first one is text which is forg password title which is already mentioned inside our text strings let me show you again it is inside the constants and for the second it is forget password subtitle and for the themes we use a style with a text theme which is headline medium and for the second one which is a label medium so once we have declared two headings it will work uh for both light and dark modes because we are using headline medium and label which is already defined inside our themes text theme and to add further space next to the theme you can see I have given a default size which is space between sections but multiply by two which which will add it extra space between text field and text to create a text field we will just use text form field property in the decoration I'm going to use the input decoration property and inside the input decoration let's add a label text text. email and as a prefix icon I'm going to use the icon property of direct right control altl to align this icons X package already being used in the ppml file let's add a constru over here and one more thing go to the login screen inside the login form we have created remember me and forget password for the forget password when this button is going to be clicked we want to redirect our user to forget password screen using get. two add a constant and make sure it should be in the function and then get. two again requires a function and then we are going to call our next screen let me run the application okay so our application is running let's go go to login so when we are going to click on this forget password you can see we have a text back arrow of the app bar and we have a text field now after this text field we want to create a button go to the forget password screen and inside the buttons we first have to add a space of the size box I'll use elevated button on press is currently null but it will be redirect to the reset password screen and as a child use the text property add constant at the start and to make this button full width we have to wrap this button with the size box widget press Alt Enter and down below you can see we have a size box widget at the start use the width property and to make it full width use double dot Infinity let's save the code and you can see we have full width button okay so far our forget password is completed but when we going to click on this forget password button we should redirect to the reset screen or the reset password screen okay use the same way which is the gex way to move to the next screen we are using get do2 and use the reset password if you don't want to let the user to come back to this screen so you can simply use get. off which means that it is not going to keep the instance of this forget password screen when us going to go to the reset password and click the back button he will be redirected directly to the login screen inside of this forget password screen so it's all up to your choice Control Alt L and and let's save the code click on this submit screen and you can see we are redirected to the reset password screen we have created over here it also contains a simple appar single child scroll view pedding which is a default pedding and again a column which is going to require some image title subtitle and buttons so first of all let's talk about the app bar we don't want an app bar with a back arrow over here so we'll use automatically imply leading to false to remove the default back arrow save the code and and back arrow is gone next to create a cross icon on the right side we are going to use actions and in the actions we are going to create icons button on press will simply get us to the back screen get. back and as icon use the cutino icons do clear which is a cross sign okay we have to add or wrap this get dot back in a function so for a single line function we can use the fat arrows let's save the code and you can see we have a cross sign right on the right side Control Alt f okay now we have the pedding Align in the column we are going to create an image title and subtitle so let me walk you through to the common widgets in the widgets success screen if you remember that we have a design which is scaffold which contains pedding a column with an image title subtitle and buttons and it is also asking us to provide this image title subtitle and onpress as we like right so this means that we can simply use this as well if you want to use but on the other hand we also require reset button which is an add-on button you cannot see that over here so we can simply copy this image which we have already created in the previous video which is a image tag asset image and image will be provided then as a width we are going to use the 60% of the width which is the screen width you can simply call Media cury of context and you have to provide the context over here then size do width is going to return the width of the screen and then we going to add some space which is a space between sections which is 32 then we have a title and subtitle with the same headline medium and label medium and both title contains space between items and after the text we have space between section space which is a extra space and then at the bottom we have a simple button so let me just simply copy these three things go to reset password and in here we going to paste it right over here okay in here as an image we have to pass delivered email illustration you can pass any image we have already declared all these images in the T images class and let me just show you over here in the constant util you can see we have image strings do Dot and this class is directly link to the assets which we have already added at the top in the images in the animations we copy this path and paste it over here and now we can easily call T images dot because these are static so we can directly call them okay we have to remove this constant and add constant over here and for the T helper function let me just show you this class as this is a simple T helper function class and all the functions use this static keyword so that's why we can easily call T helper functions. screen width and you hover over it you can see it's returning double property to us so we can easily multiply it with a 0.6 to get the 60% of the width then as a title we have already added change your password title in the text strings and change your password subtitle for the second one so it's again a text class class already defined in the constants down below here so every variable is a static so we can simply Define everything over here and we are using these variables and then for the button we are going to use the continue instead of continue we can call text DOD let's save the code and you can see we have an image title subtitle and a button which is saying done but we can again create another button so let me just add space over here and after this space we are going to copy this button paste it change this elevated button to text button and instead of done we are going to call it resend email let's save the code and you can see we have reset email button created down below the done button when user is going to click on this cross sign he will be redirected to back to the login go to the forget password click on this and resent email is going to resend that email again to the users so this is what we are going to achieve if you have any question or if you want me to go in more details uh talk about everything again and again you can ask me down below in the comments once again thank you for watching I hope you learn something new if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified about the all upcoming videos thank you for watching take care Allah

Channel: Coding With T

Views: 7,209

Keywords: flutter forgot password ui, how to create forgot password form in flutter 2023, reset password flutter 2023, how to make forgot password page in flutter, flutter reset password, flutter reset password 2023, flutter change password, flutter forgot password firebase, flutter forgot password, forgot password flutter ui, forgot password flutter firebase, forget password flutter, flutter reset password firebase, reset password flutter firebase, coding with t, flutter tutorial 2023

Id: _CVK7xYdVXU

Length: 10min 18sec (618 seconds)

Published: Mon Oct 09 2023