flutter_pin_text_field 2.0.0

A highly customizable PIN input widget for Flutter with extensive styling options, multiple border types, and reliable input handling.

Flutter PIN Text Field

A highly customizable PIN input widget for Flutter applications. Perfect for OTP verification, passcode entry, and secure PIN input scenarios.

✨ Features

• 🔢 Configurable PIN length - Support for any number of digits
• 🎨 Comprehensive styling - Extensive customization options
• 🖼️ Multiple border types - Underline, outline, or no border
• 🌈 Background colors - Normal and focused state backgrounds
• ⚡ Auto-focus management - Smooth navigation between fields
• 🔙 Smart deletion - Intelligent backspace handling
• 📱 Input validation - Built-in numeric input filtering
• 🎯 Accessibility - Full keyboard navigation support

📱 Screenshots

Basic Style	Outline Border	With Background	Underline Style	No Border

🚀 Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_pin_text_field: ^2.0.0

Then run:

flutter pub get

📖 Usage

Basic Usage

import 'package:flutter_pin_text_field/flutter_pin_text_field.dart';

PinTextField(
  pinLength: 6,
  onCompleted: (pin) {
    print('PIN entered: $pin');
  },
)

Advanced Usage with Custom Styling

PinTextField(
  pinLength: 4,
  style: const PinStyle(
    width: 60,
    height: 60,
    spacing: 15,
    fontSize: 20,
    borderType: PinBorderType.outline,
    borderRadius: 12,
    borderColor: Colors.grey,
    focusedBorderColor: Colors.blue,
    backgroundColor: Color(0xFFF5F5F5),
    focusedBackgroundColor: Color(0xFFE3F2FD),
    textColor: Colors.black87,
    cursorColor: Colors.blue,
  ),
  autoFocus: true,
  onChanged: (pin) {
    print('Current PIN: $pin');
  },
  onCompleted: (pin) {
    print('PIN completed: $pin');
  },
)

🎨 Styling Options

The PinStyle class provides extensive customization options:

Property	Type	Default	Description
width	double	50.0	Width of each input field
height	double	50.0	Height of each input field
spacing	double	12.0	Space between input fields
fontSize	double	18.0	Font size of the text
textColor	Color	Colors.black	Color of the input text
cursorColor	Color	Colors.blue	Color of the cursor
borderType	PinBorderType	underline	Type of border (underline, outline, none)
borderColor	Color	Colors.grey	Color of the border
focusedBorderColor	Color	Colors.blue	Color of the focused border
borderWidth	double	1.0	Width of the border
focusedBorderWidth	double	2.0	Width of the focused border
borderRadius	double	8.0	Radius of the border (for outline type)
backgroundColor	Color?	null	Background color of input fields
focusedBackgroundColor	Color?	null	Background color when focused

🔧 API Reference

PinTextField

Property	Type	Required	Description
pinLength	int	✅	Number of PIN digits
style	PinStyle	❌	Styling configuration
onCompleted	Function(String)?	❌	Callback when PIN is complete
onChanged	Function(String)?	❌	Callback on each input change
autoFocus	bool	❌	Auto-focus first field (default: false)
enabled	bool	❌	Enable/disable input (default: true)
keyboardType	TextInputType	❌	Keyboard type (default: number)

PinBorderType

enum PinBorderType {
  underline,  // Underline border
  outline,    // Full border
  none,       // No border
}

📝 Examples

Different Border Types

// Underline style
PinTextField(
  pinLength: 6,
  style: const PinStyle(
    borderType: PinBorderType.underline,
    focusedBorderColor: Colors.blue,
  ),
)

// Outline style
PinTextField(
  pinLength: 4,
  style: const PinStyle(
    borderType: PinBorderType.outline,
    borderRadius: 8,
    borderColor: Colors.grey,
  ),
)

// No border style
PinTextField(
  pinLength: 4,
  style: const PinStyle(
    borderType: PinBorderType.none,
    backgroundColor: Colors.grey[100],
  ),
)

Custom Colors and Sizes

PinTextField(
  pinLength: 5,
  style: const PinStyle(
    width: 70,
    height: 70,
    fontSize: 24,
    spacing: 20,
    textColor: Colors.deepPurple,
    cursorColor: Colors.deepPurple,
    borderType: PinBorderType.outline,
    focusedBorderColor: Colors.deepPurple,
    backgroundColor: Colors.white,
    focusedBackgroundColor: Color(0xFFF3E5F5),
  ),
)

🎯 Use Cases

• OTP Verification: Perfect for SMS/Email verification codes
• PIN Entry: Secure PIN or passcode input
• Security Codes: Two-factor authentication codes
• Game Codes: Room codes or game PIN entry
• Access Codes: Building or device access codes

🔄 Migration from v1.x

Version 2.0 introduces breaking changes for better API design:

v1.x (Old)

PinTextField(
  count: 6,
  height: 50,
  width: 50,
  borderColor: Colors.grey,
  focusBorderColor: Colors.blue,
  onFinished: (pin) => print(pin),
)

v2.x (New)

PinTextField(
  pinLength: 6,
  style: const PinStyle(
    height: 50,
    width: 50,
    borderColor: Colors.grey,
    focusedBorderColor: Colors.blue,
  ),
  onCompleted: (pin) => print(pin),
)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

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

🙏 Acknowledgments

• Thanks to all contributors who have helped improve this package
• Inspired by the need for a simple yet powerful PIN input solution in Flutter

---

Made with ❤️ for the Flutter community