otp_pin_field 1.1.1+2 icon indicating copy to clipboard operation
otp_pin_field: ^1.1.1+2 copied to clipboard

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs

Pub

otp_pin_field #

A flutter package which will help you to generate pin code fields with beautiful design and animations. It's a beautiful and highly customizable Flutter widget for entering pin code. Can be useful for OTP or pin code inputs.

Created by Shivam Mishra @shivbo96

Usage #

Use this package as a library #

  1. Depend on it Add this to your package's pubspec.yaml file:
dependencies:
  otp_pin_field: <VERSION>
  1. Install it You can install packages from the command line: with Flutter:
$ flutter pub get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

  1. Import it Now in your Dart code, you can use:
import 'package:otp_pin_field/otp_pin.dart';

Properties #

nametypedefaultdescription
fieldCountint4The total length of pin number & the number of pin boxes.
highlightBorderbooltruehighlight the focused pin box.
activeFieldBorderColorColorColors.blackSet color of the focused pin box.
activeFieldBackgroundColorColorColors.transparentSet background color of the focused pin box.
defaultFieldBorderColorColorColors.black45Set color of the unfocused pin box.
defaultFieldBackgroundColorColorColors.transparentSet background color of the unfocused pin box.
fieldPaddingdouble20.0Set padding for pin box.
fieldBorderRadiusdouble2.0Set border radius for pin box.
fieldBorderWidthdouble2.0Set border width for pin box.
textStyleTextStyleTextStyle(fontSize: 18.0,color: Colors.black,)TextStyle for styling pin characters.
otpPinFieldInputTypeOtpPinFieldInputTypeOtpPinFieldInputType.noneWant to show text of otp_pin_field(OtpPinFieldInputType.none) or not(OtpPinFieldInputType.password) or want to show some special character(OtpPinFieldInputType.custom)
otpPinInputCustomString"*"Special character to mask the pin code. Will only work if uses otpPinFieldInputType is set to OtpPinFieldInputType.custom.
onSubmitvoid Function(String)Callback when the max length of pin code is reached.
otpPinFieldStyleOtpPinFieldStyleOtpPinFieldStyle()Customization for the individual pin boxes. Check OtpPinFieldStyle for possible options.
fieldHeightdouble45.0Height of pin boxes.
fieldWidthdouble70.0Width of pin boxes.
otpPinFieldDecorationOtpPinFieldDecorationOtpPinFieldDecoration.underlinedPinBoxDecorationPredefine customization for the individual pin boxes. Check OtpPinFieldStyle for possible options and use OtpPinFieldDecoration.custom for fully customization like boarder radius,width, active and default otp_pin_field colors and etc..
keyboardTypeTextInputTypeTextInputType.numberThe type of the input keyboard
autofocusboolfalseAutofocus on view entered
cursorColorColorColor.blackTo give color to the cursor
cursorWidthdouble2To give width to the cursor
showCursorbooltrueTo show cursor in the otp pin fields
mainAxisAlignmentMainAxisAlignmentMainAxisAlignment.centerManage the spacing in the otp pin fields
upperChildWidgetContainer()Widget which will show above the otp pin fields only when showCustomKeyboard is set to be true
middleChildWidgetContainer()Widget which will show between the otp pin fields and Custom Keyboard only when showCustomKeyboard is set to be true
showCustomKeyboardboolfalseTo show custom keyboard in place default keyboard

Example #

  OtpPinField(
              onSubmit: (text) {
                print('Entered pin is $text'); // return the entered pin
              },
              onChange: (text) {
                print('Enter on change pin is $text'); // return the entered pin
              },
              // to decorate your Otp_Pin_Field
              otpPinFieldStyle: OtpPinFieldStyle(
                  // border color for inactive/unfocused Otp_Pin_Field
                  defaultFieldBorderColor: Colors.red,
                  // border color for active/focused Otp_Pin_Field
                  activeFieldBorderColor: Colors.indigo,
                  // Background Color for inactive/unfocused Otp_Pin_Field
                  defaultFieldBackgroundColor: Colors.yellow,
                  activeFieldBackgroundColor: Colors
                      .cyanAccent // Background Color for active/focused Otp_Pin_Field
                  ),
              maxLength: 4,
              // no of pin field
              showCursor: true,
              //bool to show cursor in pin field or not
              cursorColor: Colors.indigo,
              // to choose cursor color
              upperChild: Column(
                children: [
                  SizedBox(height: 30),
                  Icon(Icons.flutter_dash_outlined, size: 150),
                  SizedBox(height: 10),
                ],
              ),
              middleChild: Column(
                children: [
                  SizedBox(height: 30),
                  ElevatedButton(
                      onPressed: () => Navigator.push(context,
                          MaterialPageRoute(builder: (context) => NextPage())),
                      child: Text("Next Class")),
                  SizedBox(height: 30),
                ],
              ),
              showCustomKeyboard: true,
              //bool which manage to show custom keyboard
              cursorWidth: 3,
              // to select cursor width
              mainAxisAlignment: MainAxisAlignment.center,
              // place otp pin field according to yourselft

              // predefine decorate of pinField use  OtpPinFieldDecoration.defaultPinBoxDecoration||OtpPinFieldDecoration.underlinedPinBoxDecoration||OtpPinFieldDecoration.roundedPinBoxDecoration
              //use OtpPinFieldDecoration.custom  (by using this you can make Otp_Pin_Field according to yourself like you can give fieldBorderRadius,fieldBorderWidth and etc things)
              otpPinFieldDecoration:
                  OtpPinFieldDecoration.defaultPinBoxDecoration),

refer to example/lib/main.dart

Different Shapes

More information #

Pub package Flutter documentation.

11
likes
120
pub points
79%
popularity

Publisher

unverified uploader

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on otp_pin_field