Otp Form Field

This package simplifies the implementation of OTP fields with custom designs while providing advanced validation features.

Installation

  1. Add the latest version of package to your pubspec.yaml (and rundart pub get):
dependencies:
  otp_form_field: ^0.0.3
  1. Import the package and use it in your Flutter App.
import 'package:otp_form_field/otp_form_field.dart';

Example

There are a number of properties that helps you to modify otp form field:

-length -assignOtp -onChange
-onComplete
-isEditable
-otpDecoration -> OtpDecoration( . . it having its own other properties which helps to custom modification in OtpDecoration data ) -style
-width
-height
-alignContentByPadding
-enableAutoValidation
-spaceBetweenFields
-onTimeOut
-resendOtpAllFeatures -> ResendOtpAllFeatures( . . it having its own other properties which helps to custom modification in ResendOtpAllFeatures data )
-margin
-errorMessageMargin
-timerCountMargin

class OtpScreen extends StatelessWidget {  
  const OtpScreen({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: OtpFormField(
          width: 40,
          height: 40,
          spaceBetweenFields: 10,
          resendOtpAllFeatures: ResendOtpAllFeatures(
            timeOutDuration: 10,
          ),
          otpDecoration: OtpDecoration(
            fieldFocusErrorBorderColor: Colors.blue.shade300,
            fieldFocusBorderColor: Colors.green.shade200,
            fieldErrorBorderColor: Colors.transparent,
            fieldsColor: [Colors.red.shade50, Colors.green.shade50, Colors.brown.shade50, Colors.blue.shade50],
          ),
          length: 5,
          onChange: (value) {
            debugPrint("onChangeOTP>>$value");
          },
          onComplete: (onChangeOTP) {
            debugPrint("on complete>>$onChangeOTP");
          },
          onTimeOut: (isTimeOut) {
            debugPrint("on isTimeOut>>$isTimeOut");
          },
        ),
      ),  
    );  
  }  
}
Success Status 
class OtpScreen extends StatelessWidget {  
  const OtpScreen({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: OtpFormField(
          width: 40,
          height: 40,
          spaceBetweenFields: 10,
          resendOtpAllFeatures: ResendOtpAllFeatures(
            timeOutDuration: 10,
          ),
          otpDecoration: OtpDecoration(
            fieldFocusErrorBorderColor: Colors.blue.shade300,
            fieldFocusBorderColor: Colors.green.shade200,
            fieldErrorBorderColor: Colors.transparent,
            fieldsColor: [Colors.red.shade500, Colors.green.shade500, Colors.brown.shade500, Colors.blue.shade500],
            isFieldColorSelected: true,
          ),
          length: 5,
          onChange: (value) {
            debugPrint("onChangeOTP>>$value");
          },
          onComplete: (onChangeOTP) {
            debugPrint("on complete>>$onChangeOTP");
          },
          onTimeOut: (isTimeOut) {
            debugPrint("on isTimeOut>>$isTimeOut");
          },
        ),
      ),  
    );  
  }  
}
Success Status 
class OtpScreen extends StatelessWidget {  
  const OtpScreen({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: OtpFormField(
          width: 40,
          height: 40,
          spaceBetweenFields: 10,
          resendOtpAllFeatures: ResendOtpAllFeatures(
            timeOutDuration: 10,
          ),
          otpDecoration: OtpDecoration(
            errorValidationMsg: "Invalid Otp!",
            fieldFocusErrorBorderColor: Colors.blue.shade300,
            fieldFocusBorderColor: Colors.blue.shade200,
            fieldErrorBorderColor: Colors.transparent,
            fieldsColor: [
              Colors.blue.shade50,
            ],
            // isFieldColorSelected: true,
          ),
          length: 5,
          onChange: (value) {
            debugPrint("onChangeOTP>>$value");
          },
          onComplete: (onChangeOTP) {
            debugPrint("on complete>>$onChangeOTP");
          },
          onTimeOut: (isTimeOut) {
            debugPrint("on isTimeOut>>$isTimeOut");
          },
        ),
      ),  
    );  
  }  
}
Success Status 
class OtpScreen extends StatelessWidget {  
  const OtpScreen({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child:  OTPFormField(
          width: 40,
          height: 40,
          spaceBetweenFields: 10,
          resendOtpAllFeatures: ResendOtpAllFeatures(
            timeOutDuration: 60,
          ),
          otpDecoration: OtpDecoration(
            errorValidationMsg: "Invalid Otp!",
            fieldFocusErrorBorderColor: Colors.blue.shade300,
            fieldFocusBorderColor: Colors.blue.shade200,
            fieldErrorBorderColor: Colors.transparent,
            fieldsColor: [
              Colors.blue.shade500,
            ],
            isFieldColorSelected: true,
          ),
          length: 5,
          onChange: (value) {
            debugPrint("onChangeOTP>>$value");
          },
          onComplete: (onChangeOTP) {
            debugPrint("on complete>>$onChangeOTP");
          },
          onTimeOut: (isTimeOut) {
            debugPrint("on isTimeOut>>$isTimeOut");
          },
        ),
      ),  
    );  
  }  
}
Success Status 
class OtpScreen extends StatelessWidget {  
  const OtpScreen({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child:OTPFormField(
          width: 40,
          height: 40,
          spaceBetweenFields: 10,
          resendOtpAllFeatures: ResendOtpAllFeatures(
            timeOutDuration: 60,
          ),
          otpDecoration: OtpDecoration(
            errorValidationMsg: "Invalid Otp!",
            fieldFocusErrorBorderColor: Colors.blue.shade300,
            fieldFocusBorderColor: Colors.blue.shade200,
            fieldErrorBorderColor: Colors.transparent,
            isFieldColorSelected: true,
          ),
          length: 5,
          onChange: (value) {
            debugPrint("onChangeOTP>>$value");
          },
          onComplete: (onChangeOTP) {
            debugPrint("on complete>>$onChangeOTP");
          },
          onTimeOut: (isTimeOut) {
            debugPrint("on isTimeOut>>$isTimeOut");
          },
        ),
      ),  
    );  
  }  
}
Success Status

Next Goals

  • x Add otp autofill functionality

  • x Make more simple deisign

  • Add more otp functionality.

Libraries

otp_form_field