otp_form_field 0.0.1

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.1

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

Next Goals

• Add onTap for functions. Now, you can specify the onTap and specify a function.

• Change font and color style for text. Change color by specifying textcolor and subtitlecolor properties.

• Add more containers to the package.