otp_field_premium 0.0.8 copy "otp_field_premium: ^0.0.8" to clipboard
otp_field_premium: ^0.0.8 copied to clipboard

This Package is ideal for developers who want to create secure and elegant OTP input experiences.

This is a simple yet highly customizable package for all kind of users.

Features #

  • 🛠️ Highly customizable: Style the OTP fields as you need.
  • 🔢 Variable OTP length: Configure fields to accept OTPs of any length.
  • 🔐 Secure input: Optionally obscure OTP input for sensitive use cases.
  • ⌨️ Keyboard support: Automatically focuses and handles input navigation.
  • 🗎🗎 Copy Paste: Easy otp Copy Paste option.
  • Otp-Field Shape: User can use Square, Underline, Circle shape for the otp-field.

Installation #

Add the following line to your pubspec.yaml:

dependencies:
  otp_field_premium: ^0.0.8  //Run flutter pub get to install the package.

Usage #

Here's a quick example to get started:

import 'package:otp_field_premium/otp_field_premium.dart';

  OTPFieldPremium(
    length: 6,
    onSubmit: (pin) {
      print("Entered OTP: $pin");
    },
  ),

Shapes #

  1. shape = OtpFiledShape.square
  2. shape = OtpFiledShape.underscore
  3. shape = OtpFiledShape.circular

Parameters #

  // set how many field you require **maximum 8**
  final int length;
  // returns the otp-field value if its **valid** 
  final Function(String val) onSubmit;
  // set borderRadius of otp-field
  final double borderRadius;
  // set the width of border while the otp-field is selected
  final double focusBorderWidth;
  // set the color of border while the otp-field is selected
  final Color focusBorderColor;
  // set the color of otp-field background while the otp-field is selected
  final Color focusFillColor;
  // set the idle(initial/unfocuse) boder color of the otp-field. 
  final double unFocusBorderWidth;
  // set the color of border while the otp-field is selected
  final Color unFocusBorderColor;
   // set the color of otp-field background while the otp-field is selected
  final Color unFocusFillColor;
  // set the width of border while the otp-field is empty
  final double errorBorderWidth;
  // set the color of border while the otp-field is selected
  final Color errorBorderColor;
   // set the color of otp-field background while the otp-field is selected
  final Color errorFillColor;
  // set the density of the shadow if u need shadow
  final double shadowElevation;
  // set the color of shadow
  final Color shodowColor;
  // if u want to hide otp text then set this value hideText=true
  final bool hideText;
  // there are 3 types of shape currently 1.OtpFiledShape.underscore 2.OtpFiledShape.square 3. OtpFiledShape.circular
  final OtpFiledShape otpFiledShape;

Example #

Check out the full example in the example folder.

License #

This project is licensed under the MIT License.

Contributions #

Contributions are welcome! Feel free to file issues or submit pull requests to improve the package (https://github.com/jbjason/otp_field_premium)

Support #

For questions or suggestions, contact me via jubayeral040@gmail.com.

Check out the documentation on pub.dev for more details.

Happy coding! 🚀 #

4
likes
150
points
433
downloads

Publisher

unverified uploader

Weekly Downloads

This Package is ideal for developers who want to create secure and elegant OTP input experiences.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

cupertino_icons, flutter

More

Packages that depend on otp_field_premium