Customizable OTP field.
- Run this command:
$ flutter pub add flutterotpfieldor manually add this to your pubspec.yaml
dependencies:
flutterotpfield: ^0.0.3- Import package
import 'package:flutterotpfield/flutterotpfield.dart';- Use FlutterOtpField widget
FlutterOtpField(
inputFieldLength: 6,
spaceBetweenFields: 10,
onValueChange: (String value) {
print("otp changed $value");
},
onCompleted: (String value) {
print("otp $value");
},)| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent