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


Use this package as a library

  1. Depend on it Add this to your package's pubspec.yaml file:
  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';


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:,)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
customKeyboardWidgetWidget which help you to show your own custom keyboard in place if default custom keyboard
showDefaultKeyboardbooltruebool which manage to show default OS keyboard


///  Otp pin Controller
  final _otpPinFieldController = GlobalKey<OtpPinFieldState>();
              key: _otpPinFieldController,   /// to clear the Otp pin Controller
              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
                  // 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: 20),
              middleChild: Column(
                children: [
                  SizedBox(height: 30),
                      onPressed: () {
                            ?.clearOtp(); // clear controller
                      child: Text("clear OTP")),
                  SizedBox(height: 10),
                      onPressed: () => Navigator.push(context,
                          MaterialPageRoute(builder: (context) => NextPage())),
                      child: Text("Next Class")),
                  SizedBox(height: 30),
              showCustomKeyboard: true,

              ///bool which manage to show custom keyboard
              // customKeyboard: Container(),  /// Widget which help you to show your own custom keyboard in place if default custom keyboard
              // showDefaultKeyboard: true,  ///bool which manage to show default OS keyboard
              cursorWidth: 3,

              /// to select cursor width

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

refer to example/lib/main.dart

Different Shapes

More information

Pub package Flutter documentation.