smart_otp_field_plus 1.0.0 copy "smart_otp_field_plus: ^1.0.0" to clipboard
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.

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.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.

3
likes
150
points
12
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

A smart and customizable Flutter OTP input field with autofill, paste support, resend timer, obscure text, backspace handling, and flexible theming.

Repository (GitHub)
View/report issues

Topics

#otp #pin #input #flutter

License

MIT (license)

Dependencies

flutter, sms_autofill

More

Packages that depend on smart_otp_field_plus