https://github.com/adar2378/pin_code_fields
A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓
https://github.com/adar2378/pin_code_fields
android animation dart flutter ios otp pin shapes
Last synced: 3 months ago
JSON representation
A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓
- Host: GitHub
- URL: https://github.com/adar2378/pin_code_fields
- Owner: adar2378
- Created: 2019-07-27T08:50:33.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2026-02-16T19:12:07.000Z (3 months ago)
- Last Synced: 2026-02-17T00:43:00.261Z (3 months ago)
- Topics: android, animation, dart, flutter, ios, otp, pin, shapes
- Language: Dart
- Homepage: https://pub.dev/packages/pin_code_fields
- Size: 68.9 MB
- Stars: 781
- Watchers: 9
- Forks: 386
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pin Code Fields
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!
## Package Location
The publishable package is located at:
```
packages/pin_code_fields/
```
📦 **[View Package README](packages/pin_code_fields/README.md)** for full documentation.
## Quick Start
```yaml
dependencies:
pin_code_fields: ^9.0.0
```
```dart
import '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),
)
```
## Repository Structure
```
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
```
## Development
This project uses [melos](https://melos.invertase.dev/) for monorepo management.
```bash
# Install melos
dart pub global activate melos
# Bootstrap workspace
melos bootstrap
# Run tests
melos test
# Run analyzer
melos analyze
```
## Features
- 🎨 **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
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT License - see [LICENSE](packages/pin_code_fields/LICENSE) for details.