Features

This is a flutter package that gives you a custom and reusable keyboard experience for one time password widgets, transaction pin widgets and simple login widgets.

Getting started

Simple pin keyboard

Example Image.

Usage

Create a controller for your pin code field as _pinCodeController or any name of choice. Create an integer variable to hold the pin length as _pinLength or any name of choice

Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      width: double.infinity,
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 40,
        ),
        child: DynamicPinKeyboard(
          biometric: false,
          numberOne: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberTwo: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberThree: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberFour: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberFive: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberSix: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberSeven: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberEight: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberNine: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          numberZero: (p0) {
            if (_pinCodeController.text.length < pinLength) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text + p0;
              });
            }
          },
          removePin: () {
            if (_pinCodeController.text.isNotEmpty) {
              setState(() {
                _pinCodeController.text = _pinCodeController.text.substring(
                  0,
                  _pinCodeController.text.length - 1,
                );
              });
            }
          },
        ),
      ),
    );

Feel free to open pull requests.

Acknowledgments

This package was originally created by Emmanuel Okon.