Flutter OTP Verification Screen UI - Flutter OTP TextField - 2023

today we are going to learn how to create OTP screen design in the flutter we are creating the login application playlist and we are about to complete our design section so first let's quickly have a look at what we are going to create open our application and our application is running you can see the splash screen we created at the very beginning of this course and then we have a welcome screen when we're going to click on this login signup is also created and this is a login screen when we're going to click on this forget password this is the bottom sheet we created in our forget password video bottom sheet appears your user can select any option so you can reset his account using email and phone number let's say you click on this email user is going to enter the email whatever the email of his account and once the email is entered he is going to click on this next and we will send verification OTP which is a one-time password to his mail user will have to enter the six digit OTP because Firebase sends six digit OTP so let's say these are the six digits and once completed the bottom number pad will automatically disappeared and also we are going to learn how we can fetch the data from these fields using its methods so so this is what we're going to learn today without wasting time let's head towards the playlist as you can see we are creating a flutter login application and inside we are creating currently the design portion and currently we are inside the design portion and later on once the design is computed we will add the backend functionality using Firebase so if you are new to this playlist you can watch the previous videos link is in the description so without wasting time let's get started so open Android studio and we are inside the project we created for our flutter login application so before directly start coding first of all we have to go to assets and we have to follow the approach if you need to add images we will add images over here phones logos and videos if you don't have any assets then we will go towards the main folder which is a loop folder and inside the source we created folder structure in the start of this playlist so if you are new you can watch the previous videos as well if you don't need folder structures you don't have to be worried about this inside the constraints we first have to check that if we need any colors image strings as we don't have any image for this tutorial we are not going to add image strings no specific colors no sizes but in the text strings you can see I have added three variables OTP title OTP subtitle and OTP message this T is not necessary so I use this t for all the custom classes and all the custom variables if you want to use it it's up to you if you if you don't want to use it then you can simply use these names okay after the constants basically to add the OTP screen and the design we created we have two packages in the photodo dev so open the browser and you can see in the pub.f not flutter.f sorry it's pop.dev you can see the first one is OTP text field and the second one is flutter OTP text field so it's up to you you can use anyone this is the latest one which is the published 30 days ago and this one is the old which is published five months ago both have a null safety this also have no safety so it's up to you but for today's tutorial I am going to use the second one which is the flutter OTP text field you just have to copy it go back to your code open pubs to actually ml file and in here inside the dependencies you just have to add filter OTP text field and click on this pocket okay once edit close the housewife.aml file and go to Features inside the screens if you're following you must know that we are creating the authentication tutorial and inside we created all these tutorials previously but for the forget password let's add OTB this is the OTP screen which is the empty screen and it has only sk4 which is a stateless widget and a container now first let's add a padding after the padding we are going to use as a child column because the column is going to layout all the elements vertically and we want to place all the elements in the center so we will use main axis alignment Dot Center and then as a children's of the column the first thing is the text widget t or TP title and as a text Ctrl D to duplicate and dotp subtitle okay now first we have to design it but let's first run the application okay so our application is running you can see this is the splash screen of the splash screen we have welcome screen with the animation then we are going to click on this login login and sign up is already created all the screens are created with the tutorials and also with the code you can get the link from the description below or click on this forget password and when user is going to click on this email and then on the forget password OTP will be sent to the user so to call the forget password screen go to forget password mail previous activity which we created and inside the elevated button we will use getter to which is the get X if you are not using the getex you can simply write Navigator with a push function to navigate to the next screen so get dot 2 using a fat Arrow will call our screen which is a OTP screen so that's it save the code click on this next button and you can see we have code verification you can see it is in the center but it is aligned towards the left side because the width is not completely covering the whole screen so let's style the text first align the text give your style the text and we will use the Google fonts Google fonts. and inside we will going to add few properties font weight as bold and font size as 80.0 so let's remove this constant from the top error is gone let's save the code and you can see our code is looking bigger if you go towards this code you can see we have Co and then we have a backslash n which is going to break the line and then d e right so you just change the font weight and increase its size and for the second text we will make it uppercase and as a theme we will assign headline six let's save it and you can see it has been increased after the two text let's have some space and then again we are going to add a text which contain T OTP message let's save it okay so you can see enter the verification code sent add so we will write concatenation and for now we are going to just add a dummy text so we're just going to suppose that this is the email that user passed in the previous screen now let's save it and you can see we have enter the verification code sent add this now to make it Center we will use text align as Center let's save this and the text is in the centers now design is looking pretty much better so you can replace the plus sign with the interpolation you just have to add dollar sign and there is also no need to add W braces so this is how you can use concatenation okay next let's have some space and after that we're going to create our OTP field so to create the OTP screen to create OTP text feed you just have to write OTP text field it will import its dependency first now let's save it and by default you can see we have four options right so I'm going to click on this we can remove them one by one and by default they are textual okay now as we are going to use the file is the back end so we are going to need six input Fields because the OTP send by the Firebase contains six digits so we will use number of fields as six let's save it okay so now we have six text Fields if you are facing any error over here so if you face a red screen then you just have to rerun your application okay after this add a fill color and fill color is black with opacity 0.1 let's save it it's not visible because we have a variable called field make it true and now you can see the field color when we click on it you can see the field color with the underscore color you can also change the underscore color add radius and bunch of other options if you're using complex password using complex OTP screens you can change the keyboard type as well so with the keyboard type you can have multiple options you just have to write text input type and we have number text date time and bunch of other options so whatever you want to use so this is how we create OTP and the next thing is again first we are going to add some space and then we will create our elevated button on press will be none as a child let's add a text and we will use the next text key next let's save it button has been added but we have to increase its wrap this button we will first drag this button with a size box and inside the side box let's add a width as double dot Infinity let's save the code and you can see button has been increased in size okay once the design is completed we have to we can add basically two type of functions inside the OTP text field we can get each field value using on code change so well Single Character is going to be add in the first feed we can get that as well and also using this on submit it is a function we can get a complete code entered by the user so let's say it's a code that we are going to receive and then inside this function we can print it OTP is this code let's add a semicolon save the code open this one method okay now inside this run method let's just delete everything and you can see I have just deleted two values and when I'm going to also delete it again and when I'm going to add the last value and you can see over here OTP is this is the OTP one five eight six double eight which is entered right on the screen so this is how we can get the value entered by the user so I hope you learned something new if you learn something new please like the video and if you're new to this Channel please don't forget to subscribe because more amazing videos are coming and also this playlist is going towards the back end so those videos will be more amazing again thank you for watching take care I love this

Channel: Coding With T

Views: 17,374

Keywords: flutter 2023, flutter tutorial 2023, flutter tutorial for beginners 2023, flutter otp verification firebase, flutter otp screen, flutter otp verification, flutter otp 2023, flutter otp verification screen, flutter otp screen ui, otp screen in flutter, otp screen, otp flutter, otp flutter ui, flutter otp verification ui, otp ui flutter, flutter ui design, flutter email verification, flutter verification, coding with tea, coding with t, flutter firebase authentication

Id: pkzaODznLMw

Length: 9min 53sec (593 seconds)

Published: Tue Oct 04 2022