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