Pin input is kind of common password strategy used in the mobile application now a day. But the implementing that kind of widget for Flutter from scratch can be time-consuming.
But there are some libraries which are implemented by the Flutter community and you can just use those to implement Pin code input screen less than one minute. Pretty cool right? Let’s dive into coding
Adding library
open pubspec.yaml and add the following library under the dependencies
pin_code_text_field: 1.7.1
Import Library
Before using the widget import the library as below in your page
import 'package:pin_code_text_field/pin_code_text_field.dart';
Implementing pin code widget
Now you can use the PinCodeTextField widget from that class. When you adding a widget we need a controller to access the input value inside the Pin widget. Therefore we can create a TextEditingController and set that controller to PinCodeTextField’s controller property.
TextEditingController _textEditingController = TextEditingController();
PinCodeTextField(
autofocus: true,
controller: _textEditingController,
maxLength: 5,
highlight: false,
hasUnderline: false,
hideCharacter: true,
pinBoxColor: Colors.red,
highlightPinBoxColor: Colors.green,
onDone: (text){
print(_textEditingController.text);
},
highlightColor: Colors.green,
defaultBorderColor: Colors.black,
hasTextBorderColor: Colors.green,
maskCharacter: "*",
)
Useful Properties
maxLength | Define number of input which is accepted by the widget |
onDone | trigger when the all fields has completed. |
maskCharacter | Password mask character |
highlightPinBoxColor | Color of the Pin box which has already entered |
