Many apps now require captchas to be filled in, and the UI of this captchas is not a normal input box (after all, the main conflict of mobile development is the contradiction between designers’ increasing creativity and backward development). Flutter, which is a cross-platform solution, will also use this control. In line with the principle of less wheel, more copy, want to find a verification code control directly used, but searched Github and SO did not find alternative controls.

No wheels, build your own!

First of all, there are three types of common CAPtcha UI.

  1. The underline
  2. Loose wireframe type (adjacent rectangles do not intersect)
  3. Fit wire frame (adjacent rectangles intersecting the Y-axis)

There are some differences in the UI, but the actual usage is similar. First we need a Widget that can accept input, so TextField is a good fit. However, TextField can’t be reloaded or InVisible like in Android, so we will make all the contents of the TextField transparent to give the user the appearance of blank.

The next step is as simple as drawing the input received by the TextField onto the Widget we’re actually showing. Like the three giFs below

In fact, the core idea is very simple, it doesn’t need that much theory. 😂

Plugin has been uploaded to Dart Packages and you can add the following code to use

dependencies:
  pin_input_text_field: ^ 0.0.1
Copy the code

Welcome PR and Issue, github.com/TinoGuo/pin…