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.

Created by Techahead Software

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>

2. Install it You can install packages from the command line: with Flutter:

$ flutter packages get

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

3. Import it Now in your Dart code, you can use:

import 'package:otp_pin_field/otp_pin.dart';

Properties

Example

///  Otp pin Controller
  final _otpPinFieldController = GlobalKey<OtpPinFieldState>();
  
  
         OtpPinField(
            key: _otpPinFieldController,

            ///in case you want to enable autoFill
            autoFillEnable: false,

            ///for Ios it is not needed as the SMS autofill is provided by default, but not for Android, that's where this key is useful.
            textInputAction: TextInputAction.done,

            ///in case you want to change the action of keyboard
            /// 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
            },
            onCodeChanged: (code) {
              print('onCodeChanged  is $code');
            },

            /// to decorate your Otp_Pin_Field
            otpPinFieldStyle: OtpPinFieldStyle(
            
              /// bool to show hints in pin field or not
                showHintText: true,

              /// to set the color of hints in pin field or not
              // hintTextColor: Colors.red,

              /// To set the text  of hints in pin field
              // hintText: '1',
                
              /// 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,

              /// Background Color for active/focused Otp_Pin_Field
              // activeFieldBackgroundColor: Colors.cyanAccent,

              /// Background Color for filled field pin box
              // filledFieldBackgroundColor: Colors.green,

              /// border Color for filled field pin box
              // filledFieldBorderColor: Colors.green,
              //
              /// gradient border Color for field pin box
              activeFieldBorderGradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
              filledFieldBorderGradient: LinearGradient(colors: [Colors.green, Colors.tealAccent]),
              defaultFieldBorderGradient: LinearGradient(colors: [Colors.orange, Colors.brown]),
            ),
            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),
                ElevatedButton(
                    onPressed: () {
                      _otpPinFieldController.currentState
                          ?.clearOtp(); // clear controller
                    },
                    child: Text('clear OTP')),
                SizedBox(height: 10),
                ElevatedButton(
                    onPressed: () => Navigator.push(context,
                        MaterialPageRoute(builder: (context) => NextPage())),
                    child: Text('Next Class')),
                SizedBox(height: 30),
              ],
            ),

            ///bool which manage to show custom keyboard
            showCustomKeyboard: true,

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

            /// to select cursor width
            cursorWidth: 3,

            /// place otp pin field according to yourself
            mainAxisAlignment: MainAxisAlignment.center,

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

Android SMS constraint

For the code to be receive, it need to follow some rules as describe here: https://developers.google.com/identity/sms-retriever/verify

• Be no longer than 140 bytes
• Contain a one-time code that the client sends back to your server to complete the verification flow
• End with an 11-character hash string that identifies your app

One example of SMS would be:

8125 is you verification code Ov114rXIhwf ( Ov114rXIhwf is your hash value which you will get in log ``` search  your hash value is`` and append that value in your sms)

refer to example/lib/main.dart

Different Shapes

video

More information

Pub package

Flutter documentation.