A highly customizable Flutter package for PIN code and OTP input fields with beautiful design and animations.
Version 9.0 introduces a new headless architecture - use the ready-made Material Design implementation or build completely custom UIs!
The publishable package is located at:
packages/pin_code_fields/
📦 View Package README for full documentation.
dependencies:
pin_code_fields: ^9.0.0import 'package:pin_code_fields/pin_code_fields.dart';
// Material Design (ready to use)
MaterialPinField(
length: 6,
onCompleted: (pin) => print('PIN: $pin'),
)
// Custom UI (headless)
PinInput(
length: 4,
builder: (context, cells) => YourCustomUI(cells),
)pin_code_fields/
├── packages/
│ └── pin_code_fields/ # 📦 Main package
│ ├── lib/
│ │ └── src/
│ │ ├── core/ # Headless input engine
│ │ └── material/ # Material Design implementation
│ ├── example/
│ ├── test/
│ ├── README.md
│ ├── CHANGELOG.md
│ └── LICENSE
├── docs/
│ └── FEATURE_COMPARISON.md
├── melos.yaml
└── CLAUDE.md
This project uses melos for monorepo management.
# Install melos
dart pub global activate melos
# Bootstrap workspace
melos bootstrap
# Run tests
melos test
# Run analyzer
melos analyze- 🎨 Headless Architecture - Full control over UI rendering
- 📱 Material Design Ready - Beautiful out-of-the-box implementation
- 🎮 Unified Controller - Single controller for text, focus, and errors
- ✨ Rich Animations - Scale, fade, slide entry animations
- 🔐 Obscure Support - Character or custom widget obscuring
- 📋 Paste Support - Long-press to paste from clipboard
- 📝 Form Integration - Works with Flutter's Form widget
- 📲 Autofill Support - SMS OTP autofill for iOS/Android
- 💫 Error Animation - Shake animation with programmatic control
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE for details.
