Flutter Email Verification Screen | Flutter Success Screen Design 2023

assalam alikum and welcome back to cing with t today we are going to learn how to create or design verification screens for the email whenever we are going to create anything which requires some success or error notification we can use these screens on them so we'll try to create screen in a way that it should be generic it can be reusable throughout our project or in other projects so first of all let's quickly have a look what we're going to create okay our project is running this is splash screen then we have this onboarding screen after that let's go to login then we created create account screen we have completed the playlist so far till here but next when user is going to submit this form and click on this create account this verify email address is going to be appeared because the notification email or email will be sent to user email address and Firebase uses a technique in which when you're is going to click on the link sent by the Firebase a popup will be appear and user just have to reset or verify that email using that specific link but we will keep on listening in here when the user is going to verify his email address using the email sent by the Firebase this screen will automatically detect authentication and redirect to the next screen or user can manually click on this continue button to go to the next screen which is this success screen so we will create these two screens in the second screen this screen will be usable because we will create a separate wiget of the screen in which this image is replaceable title subtitle and continue button will also be replaceable okay if you're following the playlist you can see we creating flut e-commerce application and we are inside section two in today's tutorial we are going to create the second part which is the second part of the signup screen and in the previous tutorials we have already covered everything I suggest you to watch the section one mandatory section one which is very useful if you're new and you can also get the the complete code from the description below and also link to the playlist is in the description below from the right top corner so without wasting time let's open Android [Music] Studio in the last tutorial we learn how to create signup and in here we have already covered Splash onboarding login and sign up so for today's tutorial uh we are going to create this verify email which I have created a new class inside the features authentication screens and in the signup I have verify email because it is specific to this signup process so that's why I have added this do dot class inside the sign up folder know inside this class if you see the design the first thing we need is cross sign at the top which we are going to create it in the Apper and after that we have one image title subtitle and buttons okay now you can see inside the scaold I created a simple empty stateless widget and name it verify email screen and in the scaold you have created a simple Mt Apper that then in the body we have single child scroll view which will be usable to scroll the design whenever the device is going to be smaller our design should not be crashed so that's why we're using single chart scroll View and then we have added a default pedding a equal pedding which is applied or being applied in all upcoming videos to all the screens we are going to use which will be the default space right over here which is 24 the first thing we are going to create is a cross button at the top so inside this app bar we are going to create a actions because actions always started from the right side to create actions in the app bar we have an actions property and it requires a list of actions so that's why we are using this square brackets and as a cross button we going to use icon button on press will take us to the back screen so if you're using the getex you just have to use get do back and that's it let's import the get property which is get art and down below you have to wrap it in a function then as an icon this time we're going to use Cupertino icon import Cupertino library. clear add a constant so to move to this verify email screen let's go to sign a form and down below for the sign up button use the get do2 and make sure you should wrap it with a function this is single line function and then inside this get do2 again it required a function so use it as a single line and then we're going to call verify email screen add constant at the Start Control Alt L to align the code okay now let's save it click on this continue button and you can see we have cross sign right at the top when we're going to click on this cross we are redirecting back to the create account screen let's go to verify email and in here instead of using get doback because we don't want to let the user to go back instead we will use get. off fall to remove all the screens and directly go to login screen again because when the user is going to redirect or go back from the verify email this means that we already going to store the user data and user have to verify his email so we definitely have to log out the user first and then redirect so this headache is for the back end so don't worry about it left right get. offall go to login screen and that's it okay next thing we need to create an image use the image widget and as an image we are going to use asset image okay to use theu first have to add the images go to assets inside the images I have added a folder which is animations and I have bunch of animations which you can get or download from icon.com but if you want to get this whole data with all the assets you can get it the link is in the description let's close these extra files now to add this folder or to use this folder first have to decare it in the pub speec Down Below in here we have added other images so same way we will use the assets images and animations folder go to assets images animations and right click copy path reference copy this path content from root paste it over here and make sure to add forward slash okay once added because we have to use these animations and wigets again and again so instead of copying the path each time we use the constants in the image strings let's add these animations here okay I've added all the animations to add the animations again you only have to do this hectic routine once go to image or the path which you want to copy copy the path reference use this path from content route and paste it inside over here now we can easily call T images do whatever image we want to use let's close this now inside the assets we have to call T images dot deliver email illustration now let's save the code because the pup spec is being changed now add the get dependencies and whenever you add a new images you make sure you have to hold restart or rerun your application okay now you can see imag is being appeared let me change this mode to the light mode and here you can see in the ab bar we also have a back arrow so to hide that back arrow or to remove that back arrow we will use automatically imply leading to false let's save it and back arrow is gone now inside this image add a width property we will use T helper functions do screen width let's remove the constants from here add other required constants and inside the T helper functions we have already created screen width size function which is going to return a screen width and we all we don't want to use the complete width so we will only take 60% of the screen so multiply it with the 0.6 let's save the code and hopefully it is already taking 60% of the screen because column is not currently taking the complete width so don't worry just add a space at the bottom for the space we're using size box height will be space between sections 32 and space between item is 16 now for the title and subtitle use the text property and inside we will use the text. confirm email which we have already defined verify your email address and then the style we are going to use headline medium theme and text align will be Center then we have a space between items previously between the image we have space between sections now between title subtitle and text we are going to use space between items let's save the code and you can see we are moving towards the right side because currently column does not covering the full width so that's why we can see that it's taking space slowly but once we have everything aligned it will automat automatically take the full width or the way around is wrap the column with the size box and make it full width it's all up to you now let me create another text okay so in the second text I have added email directly over here but in the future in the back end we will get the email from the signup screen and we will use that same email over here as a theme we are going to use the label large and then text align again will be Center let's save it and you can see email is visible okay I have done also with the confirm email subtit the text is written over here it's a bit large text this is the benefit of keeping everything aligned you can see we have a clean code so again it's going to use the label medium size text is Center we have a space between section because text section is completed let's save it and you can see when we have the complete code everything is now aligned perfectly in the center next we have to create buttons to create a full width button we are going to use size box width is going to be double do Infinity as a child we are going to use the elevated button on presses null as a child we going to use text elevator button on press is null and child is going to be text with a t continue button and definitely when the user going to click on this T continue we will redirect to the success screen using the same onpressed from here okay for now let's add some extra space copy the same button but this time instead of elevated button we will use the text button over here and change the text to resent email let's save the code and you can see we have continue button and down below we have recent email button also created okay now this design is completed when user is going to click on this continue button we will perform the next thing which is we want to show the success screen because we are assuming user email has been verified okay to create that reusable button go to Commons inside the buttons and you can see we have success screen folder you just have to create a new folder name it anything now inside I'm going to create a new class success screen dot dot if you want to create multiple success screen designs you can name it success screen 1 2 three or some specific names hit enter import the library material do do create a stess class success screen replace this placeholder with a scaold as a body we will use single chart scroll view because in smaller screens our design might not be in the center exactly there are multiple chances that our design can easily get crashed if we are using the center alignment over here and unable to make it responsive so it's better to add extra space at the top but use single child scroll view we'll use use a pedding as a pedding this time we are going to use the spacing style we created in the previous videos spacing style do pedding with abar height and we will increase that height to two to add some extra space let's go to this class which is right over here in the Styles spacing Styles and inside we created pedding with AB bar height because top is taking the ab bar height which I have defined over here is a 56 but rest everything is default align which is 24 let's close it after this pedding let's add a child because we also want to place elements from top to bottom so we will require a column okay so let's uh go to the verify email inside we're going to use the same image same sizing and then again same text let me just copy it import required libraries let's remove this add text add sizes so the first text is your account created title and the second one is your account created subtitle and then again we need one button we going to copy it from here go to success screen inside the buttons paste it text Will Remain same when us are going to click on this continue we will redirect the user to the login screen import the get Dot doart and use the get do2 property to go to the login screen import it over here press control all L to align the code so buttons title subtitle and images created now let's save it we first have to call the success screen in here control or L success screen is added now let's save the code click on this continue and you can see our success screen is created it's right over there but to make it reusable we quickly have to create everything at the top because we will get image titles description and button onpressed from the user or from where we are calling the screen so I created image title and subtitle in the string and then as a void call back we are going to use this onpress so instead of passing or hardcoding the onpress right over here we will replace this onpress with the on press we created and same with the image title and subtitle images passed inside over here we will change it and pass the image we have created at the top let's remove this constant replace the title and subtitle Control Alt L to align the code and inside the Constructor you can see the error you just have to hover it add final field formal parameters now you added these all variables in the Constructor as a required attribute you can see images required title subtitle and on presses required let's remove the not usable ports and now let's head back to verify email and you can see when we are calling this success screen we can easily get the error because we need to add all the required argument before we want to use this success screen okay I added all the attributes required in the success screen on the onpressed we will call a function which is get do2 which will take us to the success screen but success screen also required these four attributes which is image title subtitle and onpressed so we will pass the image title subtitle and onpress right over here and according to these details our success screen will be created okay let's save the code hit on this continue button and you can see we have that specific image title subtitle and continue button continue button will take us to the login screen as defined right over here now we can easily use uh this success screen by simply calling this success screen pass the values required and that's it let's poose if there is an error we can can pass some error related image error related title subtitle and also the action if required related to the error it's all up to you if you don't want to pass it go to onpressed and in here you just have to add a question mark and remove this required from here and it will not ask you to pass this as a mandatory or it will not be required anymore so that's it for today's tutorial 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 for all the upcoming videos videos once again thank you for watching and don't forget to download the code or project code from description below thank you for watching take care Allah

Channel: Coding With T

Views: 6,577

Keywords: email verification flutter, email verification in flutter, flutter email verification, email verification, verify email flutter, flutter success screen, email validation in flutter, flutter email validation, flutter success message, coding with t, t store, email verification flutter firebase, success screen ui flutter, simple ui design in flutter, flutter design tutorial, flutter email verification 2023, email verification code in flutter, email verification 2023 flutter

Id: b1i1hwWIf0M

Length: 16min 38sec (998 seconds)

Published: Sat Oct 07 2023