How to create Pin Input screen Flutter

October 23, 2020

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

You Will Like Also

Flutter