 Hello guys in this video we are going to see how to create a OTP verification screen. So I will be creating for four digit OTP. You can create according the either four six or eight whatever you want. So let's get started. So first of all I need four text fields. So what I will do I will just create one separate function which will be returning with a text field back. So let's create a function my input box which should be returning a widget back and let's a return a container and you can add some decoration with the help of container. I just add child and then we need this text field and here we need to specify we need a controller as well. So let's take a controller and say controller and this controller should be coming from here. So that would be text editing controller controller and one more thing we can take here is build context in case we need it. Okay. Okay fine. Now for container decoration we will do it later on. Let me just write rest of the things so we need numbers only. So let's use keyboard type text input type dot number save it and we just go here and instead of using this text let's remove this first of all we just put it into a single child scroll view and let's add comma and here we just need some padding everywhere. So we can simply use the column here I will wrap this column with padding and here I need to use this let's use this over here and we need to create controller as well. Let's go here on the top and create four controllers here. Text editing controller let's give it txt1 equal to text editing controller. Second third and fourth change it to two three four save it and let's give this controller here that would be txt1. Okay so let me just close this add comma here and remove this scones from here and save this and see how it looks okay so we got this here it's fine let's put it down. Now I can do what I need four controllers over here copy paste and just write two three four and these should be in one row not in a code but let's save this and see how it looks. Okay so we are having some width issue so what we need to do is let's use that column we have used for decoration over there at the container so here we can mention the height and width okay 70 and just give some width let's say three later on we will modify accordingly save this and I just restart this and meanwhile it is restarting let's add some decoration here as well so for decoration we will be using box decoration and in this box we need to use border border dot all and we can give some border give it some width to one you can modify it accordingly later on and we need anything else yes we can just save this first of and here what I can do just I will use main access alignment main access alignment what space so seems better and just go here and go here if you want you can just make your border radius as a border radius post order radius dot all so let's say radius problems let's give it something let's keep it on then we will see that okay that's fine and here the text you need to increase so for that what I will do just add a style over here so let's go here for using some style here text style let's give it font size to let's say what do you do and let's save this okay now seems better but we need one more thing text align should be enter first of all save this okay and so we are getting multiple so I just want only one digit over here so for that what I can do let's use on change let's say once on changes there we will be getting one function that's gonna give you some value back let's use this so we will check if this value ever is entered in this text with dot length becomes one and what simply focus focus scope dot of context dot next focus yep so this gonna move to the next whenever you enter any value let's say I say I just delete this one you can see the cursor is automatically moved to next to five seven okay okay so let's do what this is fine and I delete this and check it again so we can enter multiple values as well okay so what we can do in order to do so there is a one more property here next length so let's give it one let's try this time okay you can see something is coming over here let's delete it is basically the count so what we can do in order to remove this count so we have to use one more property over here that is decoration and here we can use a const input decoration and there is a something counter and you can say there is a counter text so you can just make it empty save this and this is removed okay yep okay so this is fine now I need to move here and here I will just add some decoration so first of all I just wrap this row with the columns go here so first of all on the top you can simply display some text and saying and if you want you can just style save this done next as we can just simply some text let me just copy this and we will be saying here let's say enter the code is it so you can update your text accordingly and let's decrease this to 20 and save this okay and we can add some space here so const sized box save this and we just add one more spacing over here as well okay so that's fine now we need a button as well just go under this row say elevated button and on press we will be doing later on and the child could be const text that is ready save this okay so this is basically giving us smaller written we can do what we can just add the style let's add the style and we can say all the way to important dot style from and we can use there is a property minimum size size dot yeah from height so we can specify some height over here let's give it 50 and we don't need const here let's remove check here what's wrong so we have added this style here it should be to the button let's remove this and save this and check this okay so we got a button with full width okay so this is just a height if you specify height the width would be wide for it full screen whatever width is available now here comes the role of padding we just go here and wrap this column into padding so now your button will look better okay and same way before this button we need some spacing scroll here and give it some spacing let's say 40 okay so if you want you can increase your font size here as well let's say and save this fine so you can adjust accordingly that's fine and on click of button we need to do what we need to check the value center is valid or not so we just add a dummy condition over here so what to do is first of all we need to fetch value from these fields so do what here final let's say otp is equal to so we will be getting wrong text one dot text plus text two dot sorry txt two dot text plus txt three dot text plus txt four dot text so this is going to give you one string of otp and you can check it over here if this otp is equal to is equal to let's say any any condition you can add let's say one nine eight nine if this is a otp then go to welcome otherwise simply say invalid otp invalid otp is equal to true so this we need to put it into set state and this variable we can create on the top let's go here and simply say initially it would be false okay save now you can verify this and we are not displaying this actually so what to do is if this is invalid otp then we have to display that that the otp is not valid just before this button here what we can see we can simply write a text invalid otp if it is then simply say invalid otp otherwise we can simply say nothing and we have to add the style as well so let's add style and we need the color of text as well that should be let's save this and you can see it is coming here so let's add some spacing over here as well save this okay that's fun and what else you need so if it is valid it should go to the it should go to that homepage let me just remove this it's one nine eight nine verify and we can check here so we have not added any condition over here so here if it is one eight nine eight you can say this otp is valid it should be false and just check it over here and see this is removed so here we can navigate it to that homepage whatever you have okay so simply use navigator dot of context dot push replacement and here you need to give your material page route and you need to add builder over here let's add a builder function and simply say const homepage so I have already that's fine so if I go here it will be going to homepage so let me just restart it and let's try with this invalid and this time one nine eight nine and verify and you can see your move to welcome okay let's go back here and if you want you can add little more decoration over here so what I can do here is on the top of this we can add one more text and saying let's add more spacing over here and simply say what I just need one row and here I will be adding children and here I will be adding some text so let's say const text save this let's add style so go here and simply use main access alignment and okay so here along with this I will be displaying one more button or you can simply display a text as well so let's say so based on the condition we can do so so what condition we can do let's create one variable here on the top recent or you can say recent time is done we just keep it zero initially I'll go here and check if this is zero then do what then I want a text so I want to clickable text so let's say ink well and child would be so const text that would be three cent and you can say style text style color and I just remove this course here and this is fine and because we have used const here that's why we are facing this issue let's paste it over here and let's paste it over here and there is one more property over here for the same that is on tap on tap we will be executing some function over here that is recent ODP code so we can write that code over here okay if it is not then do what then simply don't display anything so const sized box what's wrong okay so this is not here it should be something after the sinker that should be something here that's fine so let's save this so we are just adding this button or you can say clickable text and let me just use the same style over here copy this and use it over here save this it should be looking similar and here we can add little spacing let's use const sized box and we can use some width here so let's give it some width save this and that's fine so this is now okay fine so what I want I want once this verification is started one timer should be coming over here okay so for that I need to write some code here go here so I can use this code let's say recent time is let's say 60 seconds we are keeping initially okay and we need what we need one timer so let's say late timer let's say count down timer and let me just import this from a sink okay let me just show you here that's okay so this is late so we need to initialize it in in it so in in it we will be doing something over here so what to do is let's create one function here is start timer we're just going to initialize it and here we can call that start timer so what to do here is we were using this countdown timer is equal to we want a timer dot periodic we want to execute something after a interval so for that I'm using this periodic so here you need to pass the duration so our duration would be one second always so after one second it should be changing the text and this would be const so let's add const here and now here this would be your call so what we can do here is here we need to write the code so what I want here this set state and just decrease that time let's copy this and use this time is equal to this time minus one so we'll decrease it one second by one second and what else I need to do so once this is done I need to check one condition as well if this timer or you can say this recent time goes below one then we need to do what we need to just cancel this countdown timer so copy paste dot we have yep so cancel this so once it is getting less than this so we will be canceling and this done with this so same way we need to stop the timer as well so in stop you also need to do that uh cancel so if you want you can create a separate function over here like I just create here let me stop timer and once it is doing what you can just cancel we can check it if this timer is active let's say dot is active then you can cancel that timer okay done with this another thing is we are not displaying that text anywhere so we need to display that text somewhere just go here so let's go what before this we can use one more and here we can write here check for this recent time if it becomes zero then do what simply say text you don't need to say anything so let's go over if it is not zero then you can simply say let's say dollars um recent time and seconds or you can write like this okay and otherwise you can simply say const sized box and then save this what I'm missing is comma let's add that save this and you need to mention the style go here now this is not zero that's why this text is not coming okay so what to do is initially it should be 60 that is already and yeah so we have started the timer so let me just restart and see you can see the time is coming over here and meanwhile it is executing after this row we don't need much space let's give it 10 save this and why there is much space after this let's decrease this to 20 and yep here is a space let's decrease fine so let's wait now you can see this recent is coming over here so what if if you want to do one more thing once it is coming under 10 you can append a zero in front of it what we can do is I just create one function over here which is going to give me a string back that is what you can say string to let's say string for padding and which gonna simply return me let's take one input from here first let's say any number we are getting from here so we are keeping number in a recent time so if this number let me return this this number dot true string and then there is a function add left so which we need to specify the width and if width the number of elements are lesser than width then what to be filled so we want two digits always and if the digit is less than append zero in front of that fine and here we need to do what we just need to put it here and we can wrap it like this so since it is more than one so let's wrap it with the curly braces so save this now you can just restart it and you can see now now you can see after 10 it should be 0 9 yep and so what we have to do once it is moved to 0 so we need to execute some code on the recent click so currently it is not doing anything so what I want to do here is first of all there's invalid OTP what's the variable name so invalid OTP to false once we click on recent button it should not show the error and what else so the time that is recent time is again set back to 60 so you can keep it as much you want so I just keep it with 60 seconds and you can some start the timer okay so it will start the timer again and one more thing I'm missing is once the code verified is okay so we don't need this by default it is going to move to next but instead of this we can do what we can just cancel the timer there is a function we have written stop timer yep we can call it okay so that is all let's quickly restart and if I click on recent again you can see the timer is again started and same way if I just enter the 1 9 8 9 OTP and verify it is moved to welcome so that is all for this video if you have doubt do comment in the comment section otherwise like share and subscribe thank you