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.1
Run:
flutter pub get
๐งฉ Full Example
import 'package:flutter/material.dart';
import 'package:smart_otp_field_plus/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: [
SmartOtpFieldPlus(
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.