Search categories, packages and repositories

ducafecatFlutter ecosystem guide
pin_code_fields cover
Package detailsv10.1.1

pin_code_fields

A highly customizable PIN/OTP input field for Flutter with Material Design support and headless core for custom UIs.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
415K
Likes
2.4K
Pub points
160

Install package

flutter pub add pin_code_fields

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A highly customizable PIN and OTP input field for Flutter, designed with Material Design principles. It supports both visual and headless modes, allowing developers to build intuitive authentication interfaces or fully custom UIs. The package offers smooth animations, real-time validation, and responsive design across all platforms. Ideal for login screens, verification flows, and secure input forms.

Use cases

  • User authentication via OTP
  • Two-factor authentication
  • Secure PIN entry
  • Form validation in mobile apps
  • Customizable verification screens
  • Cross-platform input fields

Key features

  • Material Design compliant
  • Headless mode for custom UIs
  • Real-time input validation
  • Smooth animations and transitions
  • Responsive layout support
  • Customizable styling and behavior

Suitable for

  • Developers building secure input forms
  • Teams needing cross-platform compatibility
  • Apps requiring OTP or PIN verification
  • Designers wanting flexible UI components
  • Projects with tight integration needs

Considerations

  • Requires manual handling of focus and navigation in headless mode
  • May need additional logic for complex validation rules
  • Styling customization requires understanding of Flutter's widget tree
  • Not optimized for very long input sequences
  • Limited built-in error messaging beyond basic feedback

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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 for full documentation.

Quick Start

dependencies:
  pin_code_fields: ^9.0.0

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 for monorepo management.

# 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 for details.

Categories

PIN, OTP & Password Field

Dependencies

Dependency list 2 items

Source repository

Projects using this package

Rankings

Top Flutter packages#89