Ensemble OTP #

A beautiful and highly customizable Flutter widget for OTP and PIN code input fields. Features include beautiful animations, custom styling, SMS autofill, custom keyboards, and extensive customization options. Perfect for authentication flows, verification screens, and any application requiring secure PIN or OTP input.

✨ Features #

• Beautiful Animations: Smooth and engaging animations for better user experience
• Highly Customizable: Extensive styling options for colors, borders, sizes, and more
• SMS Autofill: Automatic OTP detection from SMS messages (Android & iOS)
• Custom Keyboards: Built-in custom keyboard or use your own custom keyboard
• Multiple Input Types: Text, password, or custom character masking
• Accessibility: Full accessibility support for better user experience
• Cross-Platform: Works on Android, iOS, and Web
• Lightweight: Minimal dependencies and optimized performance

🚀 Quick Start #

Installation #

Add this to your pubspec.yaml:

dependencies:
  ensemble_otp: ^1.0.2

Then run:

flutter pub get

Basic Usage #

import 'package:ensemble_otp/ensemble_otp.dart';

class OTPVerificationScreen extends StatefulWidget {
  @override
  _OTPVerificationScreenState createState() => _OTPVerificationScreenState();
}

class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
  final _otpPinFieldController = GlobalKey<OtpPinFieldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Verify OTP')),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            OtpPinField(
              key: _otpPinFieldController,
              fieldCount: 6,
              onSubmit: (text) {
                print('Entered OTP: $text');
                // Handle OTP verification
              },
              onChange: (text) {
                print('Current OTP: $text');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _otpPinFieldController.currentState?.clear();
              },
              child: Text('Clear OTP'),
            ),
          ],
        ),
      ),
    );
  }
}

🔧 Properties #

🎨 Advanced Customization #

Custom Styling #

OtpPinField(
  fieldCount: 6,
  otpPinFieldStyle: OtpPinFieldStyle(
    defaultFieldBorderColor: Colors.grey,
    activeFieldBorderColor: Colors.blue,
    filledFieldBackgroundColor: Colors.blue.withValues(alpha: 0.1),
    fieldBorderRadius: 8.0,
    fieldBorderWidth: 2.0,
  ),
  textStyle: TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  onSubmit: (text) => print('OTP: $text'),
)

Custom Keyboard #

OtpPinField(
  fieldCount: 4,
  showCustomKeyboard: true,
  customKeyboard: CustomNumericKeyboard(
    onKeyPressed: (value) {
      // Handle key press
    },
    onBackspace: () {
      // Handle backspace
    },
    onSubmit: () {
      // Handle submit
    },
  ),
  onSubmit: (text) => print('OTP: $text'),
)

SMS Autofill #

OtpPinField(
  fieldCount: 6,
  autoFillEnable: true,
  smsRegex: '\\d{6}', // 6-digit OTP
  phoneNumbersHint: true, // Show phone number hint
  onSubmit: (text) => print('OTP: $text'),
)

📱 Platform Support #

• ✅ Android: Full support with SMS autofill
• ✅ iOS: Full support with native SMS autofill
• ✅ Web: Full support with web-specific optimizations

🔍 Examples #

Check out the example/ directory for complete working examples:

• Basic OTP input
• Custom styling
• Custom keyboard implementation
• SMS autofill integration
• Advanced customization

🤝 Contributing #

We welcome contributions! Please feel free to:

• Report bugs and issues
• Suggest new features
• Submit pull requests
• Improve documentation

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments #

• Created by Shivam Mishra @shivbo96
• Part of the Ensemble UI ecosystem

Built with ❤️ for the Flutter community