Flutter OTP dots placeholders UI

user_11217945 0
Viewed 132

I am trying to implement an OTP UI like the one in the following image with Flutter:

required_ui

The idea is that the keyboard and placeholder gray dots would be always shown and when the user enters a number, the corresponding placeholder dot color should be changed to blue.

I want know how to implement the logic of changing the placeholder dot color depending on the user input?

dart flutter user-interface
1 Answers

The described logic can be implemented with a variable to store the OTP code and then use it to determine the color of the placeholder dot depending on the length of the currently entered OTP.

I have created a demo example in this link which implements the same described logic, you can run it directly from DartPad.

flutter_otp_dots_placeholders_ui_demo

user_112179450
Related