Flutter OTP Verification Screen

hello today i'm gonna show you how easily you can create otp code verification from onslaughter at first need to define a form then need a rule let's say the verification code is four digits which means need four text fields and each field is 64 by 68 almost square size box make sure each text will use exactly the same height and width time to define the first text field now it look like that first increase the text size it looks good on headline six if you want to learn more about text theme check the description if the verification code only contains numbers then change the keyboard type to numbers each text field needs to contain only one number inside input formatters define length limiting text input formatter and set the limit to 1. also make sure to import services.dirt filtering input digit only makes your text fill only contains integer or you can send number set the text alignment to center almost done with the fast text field just copy and paste it three times let's fix the spacing problem by set main axis alignment to space between for better user experience once the user put their fast pin it should ship to the next one for that we need to use unchanged if the length of the value is one then it ship to the next focus it works perfectly use the same technique for other fields [Music] oops i made a mistake i'm using text field but we should use text form field if you are using bs code like me is a select text field press command d three times it allows us to edit all at once you can use hand text for example i'm gonna use zero as a hint text finally you can use on saved to get the value this otp screen are taken from our new shop ui kit which contain everything [Music] [Applause] [Music] go [Music] uh [Music] you

Channel: The Flutter Way

Views: 121,802

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: G9VDqDAA3ME

Length: 3min 34sec (214 seconds)

Published: Fri Apr 15 2022