otp_form_field

Creator: coderz1093

Last updated:

0 purchases

otp_form_field Image
otp_form_field Images
Add to Cart

Description:

otp form field

Otp Form Field #
This package simplifies the implementation of OTP fields with custom designs
while providing advanced validation features.
Installation #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
otp_form_field: ^0.0.3
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:otp_form_field/otp_form_field.dart';
copied to clipboard
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");
},
),
),
);
}
}
copied to clipboard











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












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












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











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








Next Goals #


Add otp autofill functionality


Make more simple deisign


Add more otp functionality.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Files In This Product:

Customer Reviews

There are no reviews.