pin_code_fields library

A highly customizable PIN/OTP input field for Flutter.

This package provides both a headless core for building custom PIN UIs and a ready-to-use Material Design implementation.

Quick Start with Material Design

import 'package:pin_code_fields/pin_code_fields.dart';

MaterialPinField(
  length: 6,
  onCompleted: (pin) => print('PIN: $pin'),
  theme: MaterialPinTheme(
    shape: MaterialPinShape.outlined,
    cellSize: Size(56, 64),
  ),
)

Custom UI with Headless Core

PinInput(
  length: 4,
  builder: (context, cells) {
    return Row(
      children: cells.map((cell) => MyCustomCell(
        character: cell.character,
        isFocused: cell.isFocused,
        isFilled: cell.isFilled,
      )).toList(),
    );
  },
)

Classes

A widget that displays a blinking cursor.
ErrorShake
A widget that shakes its child when triggered.
ErrorShakeState
MaterialCellContent
Widget that renders the content inside a PIN cell.
MaterialPinCell
A Material Design PIN cell widget.
MaterialPinField
A ready-to-use Material Design PIN field.
MaterialPinRow
Row layout for Material PIN cells.
MaterialPinTheme
Theme configuration for Material Design PIN fields.
MaterialPinThemeData
Resolved theme data with all colors filled in.
PinCellData
Immutable data describing a single PIN cell's state.
PinCellStateStyle
Style properties for a PIN cell based on its current state.
PinInput
Headless PIN input widget.
PinInputController
Controller for PinInput widget.
PinInputFormField
A FormField wrapper for PinInput that enables form validation.
PinInputScope
InheritedWidget providing PIN state to descendant cells.

Enums

HapticFeedbackType
Types of haptic feedback that can be triggered.
MaterialPinAnimation
Animation types for PIN cell entry.
MaterialPinShape
Shape variants for Material PIN cells.

Mixins

PinControllerMixin<T extends StatefulWidget>
Mixin that handles PinInputController lifecycle management.

Functions

buildCircleDecoration({required Color fillColor, required Color borderColor, required double borderWidth, List<BoxShadow>? boxShadows}) → BoxDecoration
Builds a BoxDecoration for a circular PIN cell.
buildEntryAnimation({required Widget child, required Animation<double> animation, required MaterialPinAnimation type}) → Widget
Builds an entry animation transition for PIN cell content.
buildFilledDecoration({required Color fillColor, required BorderRadius borderRadius, List<BoxShadow>? boxShadows}) → BoxDecoration
Builds a BoxDecoration for a filled PIN cell.
buildOutlinedDecoration({required Color fillColor, required Color borderColor, required double borderWidth, required BorderRadius borderRadius, List<BoxShadow>? boxShadows}) → BoxDecoration
Builds a BoxDecoration for an outlined PIN cell.
buildUnderlinedDecoration({required Color fillColor, required Color borderColor, required double borderWidth, List<BoxShadow>? boxShadows}) → BoxDecoration
Builds a BoxDecoration for an underlined PIN cell.
getEntryAnimationTransitionBuilder(MaterialPinAnimation type, Curve curve, {AnimatedSwitcherTransitionBuilder? customBuilder}) → AnimatedSwitcherTransitionBuilder
Returns an AnimatedSwitcher transition builder for PIN cell entry animations.
triggerHaptic(HapticFeedbackType type) → void
Triggers haptic feedback of the specified type.

Typedefs

PinCellBuilder = Widget Function(BuildContext context, List<PinCellData> cells)
Builder function for custom PIN cell rendering.