Flutter Otp Field

Customizable OTP field.

Checkout example project

Installation

1. Run this command:

$ flutter pub add flutterotpfield

or manually add this to your pubspec.yaml

dependencies:
  flutterotpfield: ^0.0.3

2. Import package

import 'package:flutterotpfield/flutterotpfield.dart';

3. Use FlutterOtpField widget

 FlutterOtpField(
inputFieldLength: 6,
spaceBetweenFields: 10,
onValueChange: (String value) {
print("otp changed $value");
},
onCompleted: (String value) {
print("otp  $value");
},)

Documentation

Name	Default Value	Description	Required/Optional
inputFieldLength	No default value	Length of the otp boxes	Required
inputFieldHeight	50	Height of the single otp field	Optional
inputFieldWidth	50	Width of the single otp field	Optional
otpWidgetHeight	50	Height of the otp widget	Optional
spaceBetweenFields	5	Space between two otp fields	Optional
autoFocus	true	Focus of the first otp field	Optional
onValueChange	-	Callback function. When single field value is changed, you'll receive value in the onValueChange.	Required
onCompleted	-	Callback function. When all otp fields are filled, you'll receive otp value in the onCompleted.	Required
inputDecoration	-	Input decoration for the otp field	Optional
cursorColor	Black	Color of the cursor	Optional
scrollPhysics	NeverScrollableScrollPhysics	ScrollPhysics for otp widget	Optional