entering pin code

it’s a flutter widget for entering pin code. suitable for use cases such as login and otp.

usage

use this package as a library

1. depend on it
   add this to your package’s pubspec.yaml file:

dependencies:
  pin_code_text_field: ^1.2.1

2. install it
   you can install packages from the command line:
   with flutter:

$ flutter packages get

alternatively, your editor might support flutter packages get. check the docs for your editor to learn more.

3. import it
   now in your dart code, you can use:

import 'package:pin_code_text_field/pin_code_text_field.dart';

api

example

class myhomepagestate extends state<myhomepage> {
  texteditingcontroller controller = texteditingcontroller();
  string thistext = "";
  int pinlength = 4;

  bool haserror = false;
  string errormessage;


  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text("pin code text field example"),
      ),
      body: container(
        child: singlechildscrollview(
          child: column(
            mainaxisalignment: mainaxisalignment.center,
            crossaxisalignment: crossaxisalignment.center,
            children: <widget>[
              padding(
                padding: const edgeinsets.only(bottom: 60.0),
                child: text(thistext, style: theme.of(context).texttheme.title),
              ),
              pincodetextfield(
                autofocus: false,
                controller: controller,
                hidecharacter: true,
                highlight: true,
                highlightcolor: colors.blue,
                defaultbordercolor: colors.black,
                hastextbordercolor: colors.green,
                maxlength: pinlength,
                haserror: haserror,
                maskcharacter: "��",

                ontextchanged: (text) {
                  setstate(() {
                    haserror = false;
                  });
                },
                ondone: (text){
                  print("done $text");
                },
                pincodetextfieldlayouttype: pincodetextfieldlayouttype.auto_adjust_width,
                wrapalignment: wrapalignment.start,
                pinboxdecoration: providedpinboxdecoration.underlinedpinboxdecoration,
                pintextstyle: textstyle(fontsize: 30.0),
                pintextanimatedswitchertransition: providedpinboxtextanimation.scalingtransition,
                pintextanimatedswitcherduration: duration(milliseconds: 300),
              ),
              visibility(
                child: text(
                  "wrong pin!",
                  style: textstyle(color: colors.red),
                ),
                visible: haserror,
              ),
              padding(
                padding: const edgeinsets.only(top: 32.0),
                child: row(
                  mainaxisalignment: mainaxisalignment.spaceevenly,
                  children: <widget>[
                    materialbutton(
                      color: colors.blue,
                      textcolor: colors.white,
                      child: text("+"),
                      onpressed: () {
                        setstate(() {
                          this.pinlength++;
                        });
                      },
                    ),
                    materialbutton(
                      color: colors.blue,
                      textcolor: colors.white,
                      child: text("-"),
                      onpressed: () {
                        setstate(() {
                          this.pinlength--;
                        });
                      },
                    ),
                    materialbutton(
                      color: colors.blue,
                      textcolor: colors.white,
                      child: text("submit"),
                      onpressed: () {
                        setstate(() {
                          this.thistext = controller.text;
                        });
                      },
                    ),
                    materialbutton(
                      color: colors.red,
                      textcolor: colors.white,
                      child: text("submit error"),
                      onpressed: () {
                        setstate(() {
                          this.haserror = true;
                        });
                      },
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

wishlist

1. localization (l-r, r-l)
2. highlight animation
3. pin box animation