pin_plus_keyboard

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"

dependencies:
  flutter:
    sdk: flutter
  pin_plus_keyboard:

Usage

[Example] (https://github.com/JoshuaObateru/pin_plus_keyboard/blob/main/example/example.dart)

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  PinInputController pinInputController = PinInputController(length: 6); /// very important
  @override
  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(
            mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 4.0),
                  child: Text(
                    "Welcome Back",
                    style: TextStyle(
                      fontSize: size.width * 0.07,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Enter Passcode",
                    style: TextStyle(
                        color: Colors.grey,
                        fontWeight: FontWeight.w300,
                        fontSize: size.width * 0.05),
                    textAlign: TextAlign.center,
                  ),
                ),
                SizedBox(
                  height: size.height * 0.05,
                ),
                PinPlusKeyBoardPackage(
                  spacing: size.height * 0.06,
                  pinInputController: pinInputController,
                  onSubmit: () {
                    /// ignore: avoid_print
                    print("Text is : " + pinInputController.text);
                  },
                ),
              ],
            )));
  }
}

Example with filled and rounded inputs and buttons

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

Properties

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	Colors.black	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	Colors.red	Color of the error text	false