Old Meng guide: when I first saw this function, I must feel so easy. At the beginning, I also feel so easy. It is not simple, but when I really write, I find that it is not as simple as IMAGINED.

First above, not above you all do not want to see, I difficult ah, to Github: github.com/781238222/f… A little star is fine, but a fork would be appreciated.



Back to the point, the completion of the verification code input box has gone through 4 stages, although the first 3 attempts are failed, but also want to share with you, to avoid you to go wrong.

The first stage: At the beginning, I thought it was ok to directly modify the TextField control and change its appearance, so I directly changed the TextField property and studied it again, but found it could not meet the requirements. The properties provided by the system could not meet my requirements.

Stage 2: Since the original TextField could not achieve my effect, I would rewrite it (not all rewrite, but copy the source code, modify the code that controls the appearance), so I went to copy the source code, but when I really copy, I found that the relationship between TextField is complicated. This is not a simple StatefulWidget and requires calculating the width of a character. This solution can be implemented, but it is too complicated to consider.

Stage 3: Use 6 Textfields, each control a verification code, although the style and layout is easy to meet the requirements, but the focus control problem is very fatal, this scheme also pass.

The fourth stage: After the above failures, I finally adopted the following scheme: A TextField was used for input, while the verification code was displayed using Container. The verification code was overlaid on the TextField, so that users could not perceive the TextField. This is the most perfect scheme I have found so far.

Focal point

TextField = TextField = TextField = TextField = TextField = TextField = TextField = TextField = TextField = TextField = TextField

TextField(
	autofocus:true,...).Copy the code

If the page has other input fields, it is not necessary to get focus, so it is up to the user to decide whether to get focus.

If the user does not get focus at first, there is a problem. The user needs to get focus when clicking “verification code”. The method of getting focus is as follows:

GestureDetector( onTap: () { FocusScope.of(context).requestFocus(_focusNode); },...).Copy the code

Add the click event to the outer layer of the entire control, with _focusNode being the focusNode of the TextField.

TextField loses focus. The method for losing focus is as follows:

_focusNode.unfocus();
Copy the code

use

It is very simple to use as follows:

Container(
  height: 45,
  child: VerificationBox(),
)
Copy the code

The effect is as follows:

Set the number of verification codes, for example, 4:

VerificationBox(
  count: 4.)Copy the code

The effect is as follows:

Set styles, including border color, width, rounded corners:

VerificationBox(
  borderColor: Colors.lightBlue,
  borderWidth: 3,
  borderRadius: 50.)Copy the code

The effect is as follows:

In addition to the “box” style, the underline style is also supported:

VerificationBox(
  type: VerificationBoxItemType.underline,
)
Copy the code

The effect is as follows:

Set the style of the number:

VerificationBox(
  textStyle: TextStyle(color: Colors.lightBlue),
)
Copy the code

The effect is as follows:

Display the cursor and set the cursor style:

VerificationBox(
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.red,
  cursorIndent: 10,
  cursorEndIndent: 10.)Copy the code

The effect is as follows:

You can also set the cursor to the entire border as follows:

VerificationBox(
  focusBorderColor: Colors.lightBlue,
)
Copy the code

The effect is as follows:

If you don’t like it, you can customize it:

VerificationBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage('images/box.png')),
    ),
    textStyle: TextStyle(color: Colors.lightBlue),
  ),
)
Copy the code

The effect is as follows:

After the verification code is entered, the callback onSubmitted is used as follows:

VerificationBox(
  onSubmitted: (value){
    print('$value'); },)Copy the code

After the input is complete, the default keyboard disappears, set to not disappear, the code is as follows:

VerificationBox(
  unfocus: false.)Copy the code

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com