Flutter Pin Code Fields

A Flutter package to generate customizable pin code fields.

⭐️ to show support!

Features

• Highly customizable
• Responsive
• Supports animations
• Supports autofocus
• Supports autofill
• Supports obscuring text with custom character

Usage

Add flutter_pin_code_fields as a dependency in your pubspec.yaml file.

# pubspec.yaml

dependencies:
  flutter_pin_code_fields: <latest_version>

import import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PinCodeFields(
      onComplete(text) => print(text);
    );
  }
}

Examples

Basic

Complete example at example/lib/basic.dart.

PinCodeFields(
  onComplete(text) => print(text),
)

Obscuring text

Complete example at example/lib/obscuring_text.dart.

PinCodeFields(
  length: 6,
  obscureText: true,
  obscureCharacter: "🔴",
  onComplete(text) => print(text),
)

Customized

Complete example at example/lib/customized.dart.

PinCodeFields(
  length: 4,
  fieldBorderStyle: FieldBorderStyle.square,
  responsive: false,
  fieldHeight: 130.0,
  fieldWidth: 130.0,
  borderWidth: 5.0,
  activeBorderColor: Colors.blue,
  activeBackgroundColor: Colors.white,
  borderRadius: BorderRadius.circular(20.0),
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  autoHideKeyboard: false,
  fieldBackgroundColor: Colors.black12,
  borderColor: Colors.black12,
  textStyle: TextStyle(
    fontSize: 30.0,
    fontWeight: FontWeight.bold,
  ),
  onComplete(text) => print(text),
)

Animated

Complete example at example/lib/animated.dart.

PinCodeFields(
  obscureText: true,
  obscureCharacter: "❌",
  animation: Animations.rotateRight,
  animationDuration: Duration(milliseconds: 250),
  animationCurve: Curves.bounceInOut,
  switchInAnimationCurve: Curves.bounceIn,
  switchOutAnimationCurve: Curves.bounceOut,
)

Properties