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

Name	Type	Default	Description
length	`int`	`4`	Total number of pin code fields.
margin	`EdgeInsets`	`EdgeInsets.all(5.0)`	Margin between the fields.
padding	`EdgeInsets`	`EdgeInsets.only(bottom: 5.0)`	Padding within the field.
fieldHeight	`double`		Height of the field.
fieldWidth	`double`		Width of the field.
borderWidth	`double`	`2.0`	Width of the border of the field.
borderRadius	`BorderRadius`		Border raduis of the field.
borderColor	`Color`	`Colors.grey`	Border color of the field.
activeBorderColor	`Color`	`Colors.blue`	Border color of the active field.
fieldBorderStyle	`FieldBorderStyle`	`FieldBorderStyle.bottom`	Border styles of the field.
fieldBackgroundColor	`Color`	`Colors.transparent`	Background color of the fields.
activeBackgroundColor	`Color`	`Colors.transparent`	Background color of the active field.
enabled	`bool`	`true`	Enable/ disable editing the fields.
responsive	`bool`	`true`	Adjust the size of the fields automatically to the available space.
autofocus	`bool`	`false`	Enable/ disabled autofocus.
textStyle	`TextStyle`		Text style for the fields.
obscureText	`bool`	`false`	Enable/ disable obscuring the text in the fields.
obscureCharacter	`String`	`*`	Character to obscure the text in the fields.
keyboardType	`TextInputType`	`TextInputType.visiblePassword`	Keyboard type.
inputFormatters	`List<TextInputFormatter>`		Input formatters for the fields.
autoHideKeyboard	`bool`	`true`	Hides the keyboard automatically on complete.
animation	`Animations`	`Animations.fade`	Animation for the fields.
animationDuration	`Duration`	`Duration(milliseconds: 150)`	Duration of the animation.
animationCurve	`Curve`	`Curves.easeInOut`	Animation curve.
switchInAnimationCurve	`Curve`	`Curves.easeIn`	Switch in animation curve.
switchOutAnimationCurve	`Curve`	`Curves.easeOut`	Switch out animation curve.
controller	`TextEditingController`		Text editing controller for the fields.
focusNode	`FocusNode`		Focus node for the fields.
onChange	`ValueChanged<String>`		Callback that returns text on input.
onComplete [`required`]	`ValueChanged<String>`		Callback that returns text on filling all the fields.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!