preface

The TextField component of Flutter cannot meet the requirements of the current mainstream UI captco interface (especially the 4,6 digit pure captco component). Even in iOS, the native implementation of Flutter is mostly implemented in the way of custom UIView. The author of this article has tried to improve the TextField that comes with Flutter to achieve this interface.

  1. Finally, some problems were found, such as disuniform displacement in Android and iOS (possibly affected by font disunity). In particular, the height of the Cursor was not exposed and could not be set. The height of the Curosr can only be affected by changing the FontSize of the TextField,

  2. The UI problem is easy to solve by using multiple Textfields, but it seems feasible to constantly switch FocusNode by calculating the number of text input (in iOS, the keyboard can only know which TextField you are currently typing by constantly switching the first responder). But in fact, some of the monitoring of Flutter on FocusNode, including keyboard notifications (iOS can be implemented by plug-ins, while Android, as far as I know, has less convenient apis, which are basically implemented by listening agents like Windows changes), is not very friendly, and this kind of monitoring is actually at the bottom of the hardware. Flutter is always a UI engine. Many of the system implementations are manual through plug-ins. This ecology needs to be strengthened.

  3. The third solution is the one adopted below. According to the TextField source code of Flutter, its Cursor flicker animation is actually a Timer rotation, constantly changing the transparency 0-1-0 and so on. Why not create a blinking cursor by hiding the cursor (showCursor = false)? This is where the elegant captcha Widget below comes in. Interested partners can also download down to view the source code, currently compatible with two kinds of market use very wide mode, in fact, very simple.

In addition, Auth_CODE_TextFiled has also been published to pub, and developers who need it only need:

Dependencies: auth_code_textfield: ^ hundredsCopy the code

Can be integrated. The following describes some simple uses and examples of auth_CODE_textFiled.

Useage

Mode: singleItem , like Keep

Item pattern, as in Keep style.

AuthCodeTextfield( mode: AuthCodeMode.singleItem, itemWidth: 50, itemHeight: 50, itemSpacing: 35 * scaleWidth, itemBackgroundColor: Color.fromRGBO(120, 114, 127, 1), textColor: Colors.white, cursorColor: Color.fromrgbo (94,178,138,1), onChanged: (s) {setState(() {_inputText = s; }); },),Copy the code
iOS Android

Mode: bottomLine , like DingDing

BottomLine mode, such as nail nail style.

AuthCodeTextfield( mode: AuthCodeMode.bottomLine, itemWidth: 50, itemHeight: 60, itemSpacing: 35 * scaleWidth, itemBottomLineColor: Color.fromRGBO(229, 231, 233, 1), cursorWidth: 1, cursorHeight: 30, onChanged: (s) { _inputText = s; if (s.toString().length >= 4 && widget.onSubmited ! = null) { widget.onSubmited(_inputText); Navigator.pop(context); }}),Copy the code
iOS Android