Buscar categorias, pacotes e repositórios

Capa de pin_code_fields
Detalhes do pacotev10.1.1

pin_code_fields

Um campo de entrada PIN/OTP altamente personalizável para Flutter com suporte ao Material Design e núcleo headless para interfaces personalizadas.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
415 mil
Curtidas
2,4 mil
Pontos Pub
160

Instalar pacote

flutter pub add pin_code_fields

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um campo de entrada de PIN e OTP altamente personalizável para Flutter, projetado com princípios do Material Design. Suporta modos visuais e headless, permitindo que desenvolvedores criem interfaces intuitivas de autenticação ou UIs totalmente personalizadas. O pacote oferece animações suaves, validação em tempo real e design responsivo em todas as plataformas. Ideal para telas de login, fluxos de verificação e formulários de entrada seguros.

Casos de uso

  • Autenticação de usuário por OTP
  • Autenticação de dois fatores
  • Entrada de PIN segura
  • Validação de formulário em aplicativos móveis
  • Telas de verificação personalizáveis
  • Campos de entrada multiplataforma

Principais recursos

  • Compatível com o Material Design
  • Modo sem cabeça para interfaces personalizadas
  • Validação de entrada em tempo real
  • Animações e transições suaves
  • Suporte a layout responsivo
  • Estilo e comportamento personalizáveis

Indicado para

  • Desenvolvedores criando formulários de entrada seguros
  • Equipes que precisam de compatibilidade entre plataformas
  • Aplicativos que exigem verificação de OTP ou PIN
  • Designers que desejam componentes de interface flexíveis
  • Projetos com necessidades de integração apertada

Considerações

  • Requer manipulação manual de foco e navegação no modo headless
  • Pode ser necessário lógica adicional para regras de validação complexas
  • A personalização de estilo exige conhecimento sobre a árvore de widgets do Flutter
  • Não otimizado para sequências de entrada muito longas
  • Mensagens de erro internas limitadas além do feedback básico

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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.

Categorias

Dependências

Lista de dependências 2 itens

Repositório-fonte

Projetos que usam este pacote

Rankings