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);


property type default description required
keyboardButtonShape KeyboardButtonShape KeyboardButtonShape.defaultShape Rounded, Circular or Square buttons false
inputShape InputShape InputShape.defaultShape Rounded, Circular or Square input fields false
keyboardMaxWidth double 80 Horizontal space that the keyboard occupies on the phone screen(max:100) false
keyboardVerticalSpacing double 8 Vertical space between the buttons on the keyboard false
spacing double null Space between the input fields and the keyboard true
buttonFillColor Color Colors.transparent Fill color of the Keyboard buttons false
buttonBorderColor Color Border color of keyboard buttons if btnHasBorder == true false
btnHasBorder bool true Gives the keyboard buttons a border false
btnTextColor Color null Color of the number Inputs false
btnBorderThickness double null Thicknes of the button borders if btnHasBorder == true false
btnElevation double null Shadow elevation of button on y axis false
btnShadowColor Color null Shadow color of button if btnElevation != null false
inputSize double null Size of the input containers false
isInputHidden bool false Hide input as the user types false
inputHiddenColor Color null Hidden input overlay if isInputHidden == true false
inputsMaxWidth double 70 Maximum Horizontal space the input boxes ocupy (max:100) false
pinInputController PinInputController null Stores the text and handles the number of input fields on the screen true
onSubmit Function() null Function called on click of the done button or when user has filled all inputs true
inputFillColor Color null Default Fill color of empty Inputs false
inputBorderColor Color null Border color of input fields if inputHasBorder == true false
inputTextColor Color null Color of the numbers filled false
inputHasBorder bool true Gives the input fields a border false
inputBorderThickness double null Thicknes of the input field borders if inputHasBorder == true false
inputElevation double null Shadow elevation of input fields on y axis false
inputShadowColor Color null Shadow color of input fields if inputElevation != null false
errorColor Color Color of the error text false