30 minGenerally takes around 30 min to solve.

Phone number verification flow

medium

Build a "Verify your number" screen: the OTP step after a user enters a phone number during signup.

Show the heading "Enter the 6-digit code sent to +91-9XXXXX1234".
Render six single-character boxes side-by-side; typing a digit auto-advances focus; backspace on an empty box moves focus back.
Accept only digits (drop non-digit input silently).
Disable the Verify button until all 6 boxes are filled. On tap, if the code equals 123456 navigate to a Success screen; otherwise shake the row (horizontal jitter animation) and show "Invalid code" in red.
Show a "Resend code in 0:30" countdown text under the button; after 30 s it becomes a tappable "Resend code".

Reference UI

Acceptance criteria

...

21Online

lib/main.dart

Copy & open DartPad

Switch to Dark

Copy code

Reset code