otp_form_field 0.0.3

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

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

2. 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"); }, ), ), ); } }

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"); }, ), ), ); } }

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"); }, ), ), ); } }

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"); }, ), ), ); } }

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"); }, ), ), ); } }

Next Goals

• Add otp autofill functionality

• Make more simple deisign

• Add more otp functionality.