otp_form_field

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.