A flutter package which will help you to generate pin code fields

pin code fields

a flutter package which will help you to generate pin code fields. can be useful for otp or pin code inputs.

features ��

• automatically focuses the next field on typing and focuses previous field on deletation
• can be set to any length. (3-6 fields recommended)
• 3 different shapes for text fields
• highly customizable
• 3 different types of animation for input texts
• animated active, inactive field color switching
• autofocus option
• otp-code pasting from clipboard
• ios autofill support
• get currently typed text and use your condition to validate it. (for example: if (currenttext.length != 6 || currenttext != “<your desired code>“))

properties

/// length of how many cells there should be. 4-6 is recommended by me
final int length;

/// you already know what it does i guess :p default is false
final bool obsecuretext;

/// returns the current typed text in the fields
final valuechanged<string> currenttext;

/// this defines the shape of the input fields. default is underlined
final pincodefieldshape shape;

/// the style of the text, default is [ fontsize: 20, color: colors.black, fontweight: fontweight.bold]
final textstyle textstyle;

/// background color for the whole row of pin code fields. default is [colors.white]
final color backgroundcolor;

/// border radius of each pin code field
final borderradius borderradius;

/// [height] for the pin code field. default is [50.0]
final double fieldheight;

/// [width] for the pin code field. default is [40.0]
final double fieldwidth;

/// if the pin code field should be autofocused or not. default is [false]
final bool autofocus;

/// this defines how the elements in the pin code field align. default to [mainaxisalignment.spacebetween]
final mainaxisalignment mainaxisalignment;

/// colors of the input fields which have inputs. default is [colors.green]
final color activecolor;

/// colors of the input fields which don't have inputs. default is [colors.red]
final color inactivecolor;

/// border width for the each input fields. default is [2.0]
final double borderwidth;

/// [animationtype] for the text to appear in the pin code field. default is [animationtype.slide]
final animationtype animationtype;

/// duration for the animation. default is [duration(milliseconds: 150)]
final duration animationduration;

/// [curve] for the animation. default is [curves.easeinout]
final curve animationcurve;

/// [textinputtype] for the pin code fields. default is [textinputtype.visiblepassword]
final textinputtype textinputtype;

flare animation credit: https://www.2dimensions.com/a/atiq31416/files/flare/otp-verification/preview

getting started

demo

different shapes

the pin code text field widget example

pincodetextfield(
  length: 6,
  obsecuretext: false,
  animationtype: animationtype.fade,
  shape: pincodefieldshape.box,
  animationduration: duration(milliseconds: 300),
  borderradius: borderradius.circular(5),
  fieldheight: 50,
  fieldwidth: 40,
  currenttext: (value) {
    setstate(() {
      currenttext = value;
    });
  },
)

shape can be among these 3 types

enum pincodefieldshape { box, underline, circle }

animations can be among these 3 types

enum animationtype { scale, slide, fade, none }

this full code is from the example folder. you can run the example to see.

class myapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: 'flutter demo',
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: pincodeverificationscreen(
          "+8801376221100"), // a random number, please don't call xd
    );
  }
}

class pincodeverificationscreen extends statefulwidget {
  final string phonenumber;
  pincodeverificationscreen(this.phonenumber);
  @override
  _pincodeverificationscreenstate createstate() =>
      _pincodeverificationscreenstate();
}

class _pincodeverificationscreenstate extends state<pincodeverificationscreen> {
  var ontaprecognizer;

  /// this [streamcontroller] will take input of which function should be called

  bool haserror = false;
  string currenttext = "";
  final globalkey<scaffoldstate> scaffoldkey = globalkey<scaffoldstate>();
  @override
  void initstate() {
    ontaprecognizer = tapgesturerecognizer()
      ..ontap = () {
        navigator.pop(context);
      };

    super.initstate();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      key: scaffoldkey,
      body: gesturedetector(
        ontap: () {
          focusscope.of(context).requestfocus(new focusnode());
        },
        child: container(
          height: mediaquery.of(context).size.height,
          width: mediaquery.of(context).size.width,
          child: listview(
            children: <widget>[
              sizedbox(height: 30),
              image.asset(
                'assets/verify.png',
                height: mediaquery.of(context).size.height / 3,
                fit: boxfit.fitheight,
              ),
              sizedbox(height: 8),
              padding(
                padding: const edgeinsets.symmetric(vertical: 8.0),
                child: text(
                  'phone number verification',
                  style: textstyle(fontweight: fontweight.bold, fontsize: 22),
                  textalign: textalign.center,
                ),
              ),
              padding(
                padding:
                    const edgeinsets.symmetric(horizontal: 30.0, vertical: 8),
                child: richtext(
                  text: textspan(
                      text: "enter the code sent to ",
                      children: [
                        textspan(
                            text: widget.phonenumber,
                            style: textstyle(
                                color: colors.black,
                                fontweight: fontweight.bold,
                                fontsize: 15)),
                      ],
                      style: textstyle(color: colors.black54, fontsize: 15)),
                  textalign: textalign.center,
                ),
              ),
              sizedbox(
                height: 20,
              ),
              padding(
                  padding:
                      const edgeinsets.symmetric(vertical: 8.0, horizontal: 30),
                  child: pincodetextfield(
                    length: 6,
                    obsecuretext: false,
                    animationtype: animationtype.fade,
                    shape: pincodefieldshape.underline,
                    animationduration: duration(milliseconds: 300),
                    borderradius: borderradius.circular(5),
                    fieldheight: 50,
                    fieldwidth: 40,
                    currenttext: (value) {
                      setstate(() {
                        currenttext = value;
                      });
                    },
                  )),
              padding(
                padding: const edgeinsets.symmetric(horizontal: 30.0),
                // error showing widget
                child: text(
                  haserror ? "*please fill up all the cells properly" : "",
                  style: textstyle(color: colors.red.shade300, fontsize: 15),
                ),
              ),
              sizedbox(
                height: 20,
              ),
              richtext(
                textalign: textalign.center,
                text: textspan(
                    text: "didn't receive the code? ",
                    style: textstyle(color: colors.black54, fontsize: 15),
                    children: [
                      textspan(
                          text: " resend",
                          recognizer: ontaprecognizer,
                          style: textstyle(
                              color: color(0xff91d3b3),
                              fontweight: fontweight.bold,
                              fontsize: 16))
                    ]),
              ),
              sizedbox(
                height: 14,
              ),
              container(
                margin:
                    const edgeinsets.symmetric(vertical: 16.0, horizontal: 30),
                child: buttontheme(
                  height: 50,
                  child: flatbutton(
                    onpressed: () {
                      // conditions for validating
                      if (currenttext.length != 6 || currenttext != "towtow") {
                        setstate(() {
                          haserror = true;
                        });
                      } else {
                        setstate(() {
                          haserror = false;
                          scaffoldkey.currentstate.showsnackbar(snackbar(
                            content: text("aye!!"),
                            duration: duration(seconds: 2),
                          ));
                        });
                      }
                    },
                    child: center(
                        child: text(
                      "verify".touppercase(),
                      style: textstyle(
                          color: colors.white,
                          fontsize: 18,
                          fontweight: fontweight.bold),
                    )),
                  ),
                ),
                decoration: boxdecoration(
                    color: colors.green.shade300,
                    borderradius: borderradius.circular(5),
                    boxshadow: [
                      boxshadow(
                          color: colors.green.shade200,
                          offset: offset(1, -2),
                          blurradius: 5),
                      boxshadow(
                          color: colors.green.shade200,
                          offset: offset(-1, 2),
                          blurradius: 5)
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}