A flutter package that gives you custom input fields and a custom keyboard for one time password widgets, transaction pin widgets and simple login widgets

Getting started

To get started with this package: "add the dependency to your pubspec.yaml file"

    sdk: flutter


Example (

Note: it is also important that you initialize the pinInputController to start using this package

  PinInputController pinInputController = PinInputController(length: 6); /// the length can vary based on the number of inputs you want

Normal Example

import 'package:flutter/material.dart';
import 'package:pin_plus_keyboard/package/controllers/pin_input_controller.dart';
import 'package:pin_plus_keyboard/pin_plus_keyboard.dart';

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  State<Example> createState() => _ExampleState();

class _ExampleState extends State<Example> {
  PinInputController pinInputController = PinInputController(length: 6); /// very important
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
        /// ignore: sized_box_for_whitespace
        body: Container(
            width: size.width,
            height: size.height,
            child: Column(
              children: [
                  padding: const EdgeInsets.symmetric(vertical: 4.0),
                  child: Text(
                    "Welcome Back",
                    style: TextStyle(
                      fontSize: size.width * 0.07,
                      fontWeight: FontWeight.bold,
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Enter Passcode",
                    style: TextStyle(
                        color: Colors.grey,
                        fontWeight: FontWeight.w300,
                        fontSize: size.width * 0.05),
                  height: size.height * 0.05,
                  spacing: size.height * 0.06,
                  pinInputController: pinInputController,
                  onSubmit: () {
                    /// ignore: avoid_print
                    print("Text is : " + pinInputController.text);

Example with filled and rounded inputs and buttons

    keyboardButtonShape: KeyboardButtonShape.circlar,
    inputShape: InputShape.circlar,
    keyboardMaxWidth: 70,
    inputHasBorder: false,
    inputFillColor: Colors.grey,
    inputElevation: 3,
    btnTextColor: Colors.white,
    spacing: size.height * 0.06,
    pinInputController: pinInputController,
    onSubmit: () {
        /// ignore: avoid_print
        print("Text is : " + pinInputController.text);


keyboardButtonShapeKeyboardButtonShapeKeyboardButtonShape.defaultShapeRounded, Circular or Square buttonsfalse
inputShapeInputShapeInputShape.defaultShapeRounded, Circular or Square input fieldsfalse
keyboardMaxWidthdouble80Horizontal space that the keyboard occupies on the phone screen(max:100)false
keyboardVerticalSpacingdouble8Vertical space between the buttons on the keyboardfalse
spacingdoublenullSpace between the input fields and the keyboardtrue
buttonFillColorColorColors.transparentFill color of the Keyboard buttonsfalse
buttonBorderColorColorColors.blackBorder color of keyboard buttons if btnHasBorder == truefalse
btnHasBorderbooltrueGives the keyboard buttons a borderfalse
btnTextColorColornullColor of the number Inputsfalse
btnBorderThicknessdoublenullThicknes of the button borders if btnHasBorder == truefalse
btnElevationdoublenullShadow elevation of button on y axisfalse
btnShadowColorColornullShadow color of button if btnElevation != nullfalse
inputSizedoublenullSize of the input containersfalse
isInputHiddenboolfalseHide input as the user typesfalse
inputHiddenColorColornullHidden input overlay if isInputHidden == truefalse
inputsMaxWidthdouble70Maximum Horizontal space the input boxes ocupy (max:100)false
pinInputControllerPinInputControllernullStores the text and handles the number of input fields on the screentrue
onSubmitFunction()nullFunction called on click of the done button or when user has filled all inputstrue
inputFillColorColornullDefault Fill color of empty Inputsfalse
inputBorderColorColornullBorder color of input fields if inputHasBorder == truefalse
inputTextColorColornullColor of the numbers filledfalse
inputHasBorderbooltrueGives the input fields a borderfalse
inputBorderThicknessdoublenullThicknes of the input field borders if inputHasBorder == truefalse
inputElevationdoublenullShadow elevation of input fields on y axisfalse
inputShadowColorColornullShadow color of input fields if inputElevation != nullfalse
errorColorColorColors.redColor of the error textfalse