pin_plus_keyboard

Description:

pin plus keyboard

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:
copied to clipboard
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

copied to clipboard
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);
},
),
],
)));
}
}

copied to clipboard
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);
},
),

copied to clipboard

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