smart_otp_field_plus 1.0.0
smart_otp_field_plus: ^1.0.0 copied to clipboard
A smart and customizable Flutter OTP input field with autofill, paste support, resend timer, obscure text, backspace handling, and flexible theming.
Smart OTP Field #
A beautiful, customizable Flutter OTP input package with controller support, theme customization, auto focus handling, completion callbacks, and resend timer.
โจ Features #
- ๐ข Beautiful OTP input boxes
- ๐ฏ Auto focus next / previous
- ๐ OTP controller support
- ๐จ Custom theme support
- ๐
onChangedcallback - โ
onCompletedcallback - ๐ Resend timer widget
- ๐งน Clear OTP programmatically
- ๐ฑ Android & iOS support
- ๐ Easy integration
๐ฆ Installation #
Add dependency in pubspec.yaml
dependencies:
smart_otp_field_plus: ^1.0.0
Run:
flutter pub get
๐งฉ Full Example #
import 'package:flutter/material.dart';
import 'package:smart_otp_field/smart_otp_field_plus.dart';
class OtpScreen extends StatelessWidget {
OtpScreen({super.key});
final OtpController controller = OtpController(length: 6);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("OTP Verification")),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
SmartOtpField(
controller: controller,
length: 6,
onCompleted: (otp) {
print("OTP Entered: $otp");
},
),
const SizedBox(height: 20),
ResendTimer(
seconds: 30,
onResend: () {
print("Resend OTP");
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
print(controller.value);
},
child: const Text("Submit"),
),
],
),
),
);
}
}
โ Available Properties #
SmartOtpField #
| Property | Type | Default | Description |
|---|---|---|---|
length |
int |
6 |
OTP box count |
controller |
OtpController? |
null |
OTP controller |
theme |
OtpTheme |
default |
Custom UI theme |
onChanged |
ValueChanged<String>? |
null |
OTP change callback |
onCompleted |
ValueChanged<String>? |
null |
Called when OTP complete |
OtpController #
| Property | Description |
|---|---|
value |
Returns OTP string |
clear() |
Clears all boxes |
isComplete |
Checks OTP completion |
dispose() |
Dispose controllers |
OtpTheme #
| Property | Description |
|---|---|
boxWidth |
OTP box width |
boxHeight |
OTP box height |
textStyle |
OTP text style |
decoration |
Default box decoration |
focusedDecoration |
Focused box decoration |
๐ฑ Platform Support #
| Platform | Support |
|---|---|
| Android | โ |
| iOS | โ |
๐ License #
MIT License
๐ค Contributing #
Pull requests are welcome.
If you find bugs or want improvements, feel free to open an issue.
โญ Support #
If you like this package, give it a star on GitHub.