Flutter Forget Password - Flutter Firebase - Flutter UI 2023

today we're going to learn how to create forget password screens okay so let's quickly have a look what we are going to create in this tutorial open the application and you can see this is the splash screen we created after the splash screen we have this welcome screen and we have two options login and sign up so first see the login we created in the previous tutorial and then in the login screen you can see also this transition in and out transition so we'll also learn this today and when we click on this forget password so this login is already created before the sign up screen you can get the playlist link from the description below but when we are going to click on this forget password which is the today's tutorial you can see we have two options email and phone number so let's say we want to reset our password using the email when we click on this email we will be redirected to this new screen which will ask the user to enter the email and also for the forget password phone number same screen appears with the phone number verification and when the user is going to provide the phone number it will be redirected towards the OTP screen which is the next tutorial so once the user enter the OTP then his account will be verified and once the verification process has been completed then we will allow the user to reset his password right so this is what we are going to create two things the first one is this bottom sheet and then we are going to click on it the new screen appears with this design so without wasting time let's head back towards our playlist so as you can see on your screen we're creating a login filter application those who are new this application can be used on any type of flutter application which is going to required login and sign up functionality and we are creating this design portion and this is the forget password screens after that we are going to get the OTP and then we are going to create a profile once the design is completed we will jump towards the back end using Firebase and we start learning the back end which will again be extensive tutorials so if you are new Please Subscribe and hit the Bell icon to get notified about the latest updates so without wasting time let's get started open Android studio and we are inside the project we created for our login playlist and inside the assets you know the drill if you are new we first have to add the assets and all the required constants and then we'll start the coding so first we will go to the images inside the assets and in here you can say you created a folder forget password and inside we have an image which we're going to use after the assets go to live folder and inside the source inside the constants if you are not familiar with this photo structure I suggest you to watch the previous full structure tutorial you can get the link from the description below okay first we are not going to add any new colors image strings the image we have added we will Define the link over here and then this variable will be used throughout the application then the size is nothing change then the text strings I have added the forget password text which will be title subtitle and bunch of other text okay so once edit you can again get the code from the description below we will go to features and because we are using the feature first approach in the folder structure so in the authentication we have all the screens created and today we are going to learn how to create this forget password so in this folder I've created four subfolders this forget password options is going to contain the custom widget which will pop up on the login screen basically a bottom sheet and then we we have the OTP folder font folder and email folder right so let's first we have to go to login screen this is the login screen and we have login header we have a form widget login form widget and inside the form widget in here you can see we have forget password button which is basically a text button now inside it's on pressed we are going to call our we want to pop up the model so let's start with a function it is a shoe model bottom sheet we have to pass the context and the Builder for the Builder let's create another function first we have to pass the context inside of this brackets use fat arrows and we are going to return container add a column comma Control Alt l so we have a context and we have a builder so let me just run the application okay so our application is running this is the splash screen and then we have the welcome screen and we're going to click on this login and then click on this forget password and you can see an empty bottom sheet has been created now inside the container the first thing we need to add is a padding we will use the padding the default size padding which we have already created in the constraints 30.0 then as a child because we are going to place elements in a vertical Direction so we will use column and for the cross axis because all the elements should start from the left side so cross axis will be at the start as the children of column the first thing we need to add is a text so this text is going to be so this text is already created in the text strings press Ctrl D to duplicate and this time we're going to use T forgot password subtitle assign a theme so for the first one for the title we're going to use the headline two and for the subtitle we're going to use body text to add line 2 and body text to it and for the second one we're going to use body text to after text we need to add some space using a size box okay after the space we have to create two buttons two large buttons so instead of creating a buttons I am going to use a container and we can easily convert that container into by wrapping it into a gesture detector to make it clickable so first create a container it will also have some padding after that we are going to add some background so we will use box decoration with the Border radius and make it circular it will be water already S10 to add some curves and we will use gray with the shade 200 click on forget password and you can see we have a container created two text and also we can add a curve at the top okay now inside this container let's add some content so inside this container we first have to add a row because we have one icon and two text so inside this Row the first one is the icon and its size is 60.0 and then you can see we have two text so for the two text again we will use column as a second child so column can lay out easily elements in a vertical Direction so as a children's of the column we will create text P email and as a theme we will use headline 6 Ctrl D to duplicate so we have two text let's say the code click on forget password and you can see we have one icon and two text but text are being aligned in the center Direction so we have to again copy it from the top column paste it so it should start from the left side click on forget password and you can see it's being shifted to the left side but we need to add some space so we can again use size box but this time we can add width instead of column add only 10.0 at a constant click on forget password and you can see we have the elements aligned towards the left side with the title and subtitle so our design is ready we can easily wrap our container now to make it clickable we can easily wrap our container with a widget called gesture detector and inside this detector you can see we have lot of options so we will follow the on tab for now let's say it's doing nothing okay so first button is ready and also to make model bottom sheet or to change the shape and make it curvable inside the bottom sheet at the top as a shape we can add a rounded rectangle border with the property border radius border radius towards circular and give it a value let's save the code again click on forget password and you can see the curves have been added okay now inside this gesture detector you can see the code has been increased but let me just add size box at some height and we can easily paste it one more time to create a second one but you can see the code has been increased for creating just two buttons this much code is useless so so let's save it click on forgot password and you can see we have two buttons but we only need to change icon and to text creating another bulk of code is useless so instead of just copying and pasting the things we are not going to follow this approach click on this gesture detector right click refactor and extract it as a flutter widget and name it forget password button widget refactor and at the bottom you can see we have forget password button widget but we need to pass three things instead of passing the static things icon and to text so you know the drill we have to create the variables so list items the first one is the button icon then we have title and server title right now inside the Constructor we can add a required attribute add distort button icon and all three so we have defined that just replace this button icon with the icon over here remove this constant add title and also subtitle right so we have title subtitle and icon being replaced so now we can pass these three properties and our button is ready but you can see we have to also pass this on clickable so let's create another final void callback which is a button clickable so this is the on Tab instead of this one tab we will pass on tap here so now we can easily write the functionality of the button inside this on Tab and let's also make it required this dot on Tab now at the top we will be calling this forget password we have to pass all the required features button icon so I have created the icon over here title subtitle and ontap is currently now so we can add functionality later on so now just have to copy this and after the space we can paste it change the icon okay so we have on Tab title subtitle and button for the second one now let's save it so in password and you can see the icon has been changed title and subtitle has been changed now let's extract this class need to forget password and inside the options let's create a new file name it forget password button widget dot dot import material Library paste the class close it and inside the login let's import the library and the error is gone but still you can see this button is being too huge so we are not going to place our button over here and also we are going to extract so now to remove this function from here we will right click refactor and extract this node of flutter widget this is a function so you will extract a method so name it build show model bottom sheet refactor and this is the function that has been generated so we are not going to use this function and place this function in here cut it from here again go to forget password options and create a new file name it forget password model bottom sheet or dot hit enter now inside create a class forget password screen paste the function inside it import the material.dot and also add all the required attributes all the required libraries so our function is this we can easily really use it by making it a static function static means that we can easily access it using forget password screen dot build show model we don't have to create the instance now close it in here we just have to call the class name dot so import this library and we are done now you can see the code has been simplified we have a simple forget button and inside this button we have nothing to do okay once these screens are created let's create forget password mail create a new file forget password mail.gov the library create a stateless widget forget password mail screen inside the container first wrap it with the material widget which is scaffold to use the material property inside the container add padding as a child we are going to use column column will have some children's first we need to add some space from the top okay after the space we are going to use the login let's go to login one more time inside the login screen us you can see we have form header widget which is using one image title and subtitle so we have already created this attribute in which we can the required is image title and subtitle is required and brush we can pass the image height cross axis alignment is by default at the start image height is by default at 0.2 we can also pass these properties we have a height between image and text and we have also have a image color property so instead of creating everything from the start we can use this widget over here after the size let's paste it import its Library change the image name to T forget password image change the title and also change the subtitle we also want to add some space and we also want to increase the image we can now first try to run the application but before that go to the forget password bottom sheet and inside the on click let's call the next screen which is get.2 you can use the Navigator dot push but we are going to use the get text property which will get.2 and in here we can easily provide for get password mail screen add a column import the get X so you can see we have we are just calling the next screen which is the forget password and also we want to close the open sheet so to close it just call Navigator dot for it is going to close the open sheet so the sheet will be closed and then we will redirect it towards the forget password screen you can just do the hot reload and go to login click on forget password click on email and you can see that we have one image and two text but their orientation is towards the left side but we want the orientation towards the center so over this form header widget allows us to provide its orientation cross axis alignment and also we want space between image and text so we have height between property so let's first add cross access alignment as Center and we have a height between property and let's add 30.0 let's save it and you can see now the text is in the center and also the image is centered with the space between but one more thing that you can see the current text is not in the center and this widget should have to make it in the center so so we have property which is a text align property so instead of directly hard coding text align Dot Center we can do is at the top we can create another variable final texture line make it nullable so if in case there are some places that we don't want to change the text align so we don't have to change the text align so text align and now inside the constructors when we are going to call this we will not add a record attribute and we will also use text align and we are not going to assign any value because it is by default nullable use this text align over here and now we can easily come here add a text align property text align Dot Center let's refresh we have to hold reload click on forget password click on email and you can see the text is in the center but in the login you can see the text is not in the center so this is again this portion is using the same widget and also this email after this you can see this is using the same widget right so our header is ready let's add some space create a form as a child because we have two properties text field and a button so we will use as a shield one if you see the error like this so this error means evaluation of this constant expression throws an expression exception this means that you are using constant somewhere so remove it use it with the required widgets now inside the column we can create our text form field widget as a decoration property we will use input decoration and as a label we will use a text with a t email so inside the placeholder we will use the same T email let's add a constant let's save it and you can see the email has been created but this is the error which is saying bottom overload overflowed by 55 pixels why because we have not added scroll view so let's add a single cell scroll view wrap the container with it Ctrl alt and let's save the code and now click on this email and you can see there is no error from next to the hill text we can add a prefix icon after the text form field adds space and then we can add elevated button on press test for now none as a text we are going to use the text which is the next add a comma let's save it and let me just you can see the text has been created but we have to wrap it with the widget to make it forget the size box just before the child let's add its width make it full width we will use double dot infinity and save it and you can see the button is now covering the full screen so this is how we create the design and the same we are going to duplicate it for the phone number so when user is going to click on the phone number so the phone number screen is going to be appeared we have to wrap the scaffold with a safe area so this top line should be black which means that is not included in the design now so this is how we are going to create our designs now the last thing is we need to add the animations if you are following me and using the get X State Management you just have to go to the main main Dot and inside as you can see we are using get material app so if you are following the gettex you can add the animations with the default animation property and there are a bunch of animations you can say transitions so these all are the page transitions right and you can also add the duration of page transition and when I am going to get back you can see screen is coming with a fade effect from left to right when we are going back again this is same for the sign up login go to forget password click on email and you can see the design so this is how we create animations Transitions and also the forget password screens that's it for today's tutorial if you learned something new please like the video and if you are new to this Channel please don't forget to subscribe it because more amazing videos are coming once again thank you for watching take care Allah Hafiz

Channel: Coding With T

Views: 15,841

Keywords: flutter forgot password, flutter firebase forgot password, flutter forgot password ui, reset password firebase flutter, reset password flutter, flutter reset password, flutter reset password 2023, reset password flutter 2023, flutter forgot password firebase, flutter bottom sheet dialog, firebase forgot password flutter, flutter forget password, forget password flutter, flutter reset password firebase, forgot password using firebase, firebase reset password

Id: IQ0-_MLjHL4

Length: 18min 2sec (1082 seconds)

Published: Thu Sep 29 2022