https://github.com/flutterbysunny/smart_otp_field
A smart Flutter OTP input package with autofill, paste support, resend timer, obscure text, and customizable themes.
https://github.com/flutterbysunny/smart_otp_field
Last synced: 15 days ago
JSON representation
A smart Flutter OTP input package with autofill, paste support, resend timer, obscure text, and customizable themes.
- Host: GitHub
- URL: https://github.com/flutterbysunny/smart_otp_field
- Owner: flutterbysunny
- License: mit
- Created: 2026-05-20T08:53:05.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-05-20T09:31:36.000Z (23 days ago)
- Last Synced: 2026-05-20T13:30:01.905Z (23 days ago)
- Language: Dart
- Size: 65.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- 📞 `onChanged` callback
- ✅ `onCompleted` callback
- 🔄 Resend timer widget
- 🧹 Clear OTP programmatically
- 📱 Android & iOS support
- 🚀 Easy integration
---
## 📦 Installation
Add dependency in `pubspec.yaml`
```yaml
dependencies:
smart_otp_field_plus: ^1.0.1
```
Run:
```bash
flutter pub get
```
---
## 🧩 Full Example
```dart
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?` | `null` | OTP change callback |
| `onCompleted` | `ValueChanged?` | `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.