Skip to content

flutterbysunny/smart_otp_field

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Smart OTP Field

A beautiful, customizable Flutter OTP input package with controller support, theme customization, auto focus handling, completion callbacks, and resend timer.

Flutter Platform License


✨ 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

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.

About

A smart Flutter OTP input package with autofill, paste support, resend timer, obscure text, and customizable themes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors