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.

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

Example

 OtpPinField(
              otpPinFieldInputType: OtpPinFieldInputType.custom,    // OtpPinFieldInputType.none || OtpPinFieldInputType.password || OtpPinFieldInputType.custom
              otpPinInputCustom: "\$",  // A String which you want to show when you use 'inputType: OtpPinFieldInputType.custom, '
              onSubmit: (text) {
                print( 'Entered pin is $text');     // return the entered pin
              },
              
              // to decorate your Otp_Pin_Field 
              otpPinFieldStyle: OtpPinFieldStyle(
                 defaultFieldBorderColor: Colors.blue,   // border color for inactive/unfocused Otp_Pin_Field
                activeFieldBorderColor: Colors.red, // border color for active/focused Otp_Pin_Field
                  defaultFieldBackgroundColor: Colors.pinkAccent,   // Background Color for inactive/unfocused Otp_Pin_Field
                activeFieldBackgroundColor: Colors.cyanAccent,    // Background Color for active/focused Otp_Pin_Field
              ),
              fieldCount: 4,  // no of pin field 
              highlightBorder: true,  // want to highlight focused/active Otp_Pin_Field
              fieldWidth: 50,   //to give width to your Otp_Pin_Field
              fieldHeight: 50,  //to give height to your Otp_Pin_Field
              keyboardType: TextInputType.text,    // type of keyboard you want 
              autoFocus: false,   //want to open keyboard or not
              
              // 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.

Libraries

otp_pin_field