pin_code_text_field

Pub

It's a Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

Usage

API

nametypedefaultdescription
maxLengthint4The total length of pin number & the number of pin boxes.
hideCharacterboolfalseShow or hide the pin code.
highlightboolfalsehighlight the focused pin box.
highlightColorColorColors.blackSet color of the focused pin box.
pinBoxDecorationBoxDecorationProvidedPinBoxDecoration._defaultPinBoxDecorationCustomization for the individual pin boxes. Check ProvidedPinBoxDecoration for possible options.
pinTextStyleTextStyleTextStyle for styling pin characters.
maskCharacterString"\u25CF"Special character to mask the pin code. Will only work if hideCharacter is set to true.
pinBoxHeightdouble70.0Height of pin boxes.
pinBoxWidthdouble70.0Width of pin boxes.
onDonevoid Function(String)Callback when the max length of pin code is reached.
hasTextBorderColorColorColors.blackSet color of pin box containing text.
pinTextAnimatedSwitcherTransitionFunction(Widget child, Animation animation)Animation of text appearing/disappearing, you can write your own or use a few presets: 1. PinCodeTextField.awesomeTransition 2. PinCodeTextField.defaultScalingTransition 3. PinCodeTextField.defaultRotateTransition
pinTextAnimatedSwitcherDurationDurationconst Duration()Duration of pinTextAnimatedSwitcherTransition. Check ProvidedPinBoxTextAnimation for possible options.
errorBorderColorColorColors.redHighlight all textboxes to this color if hasError is set to true
onTextChangeFunction(String)callback that returns a text on input
hasErrorboolfalseset all border color to errorBorderColor

Example


class MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();
  String thisText = "";

  bool hasError = false;
  String errorMessage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pin Code Text Field Example"),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 60.0),
              child: Text(thisText, style: Theme.of(context).textTheme.title),
            ),
            PinCodeTextField(
              controller: controller,
              hideCharacter: true,
              highlight: true,
              highlightColor: Colors.blue,
              defaultBorderColor: Colors.black,
              hasTextBorderColor: Colors.green,
              maxLength: 5,
              hasError: hasError,
              onTextChanged: (text) {
                setState(() {
                  hasError = false;
                });
              },
              pinTextStyle: TextStyle(fontSize: 30.0),
              pinTextAnimatedSwitcherTransition: PinCodeTextField.defaultScalingTransition,
              pinTextAnimatedSwitcherDuration: Duration(milliseconds: 500),
            ),
            Visibility(
              child: Text(
                "Wrong PIN!",
                style: TextStyle(color: Colors.red),
              ),
              visible: hasError,
            ),
            Padding(
              padding: const EdgeInsets.only(top: 32.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  MaterialButton(
                    color: Colors.blue,
                    textColor: Colors.white,
                    child: Text("SUBMIT"),
                    onPressed: () {
                      setState(() {
                        this.thisText = controller.text;
                      });
                    },
                  ),
                  MaterialButton(
                    color: Colors.red,
                    textColor: Colors.white,
                    child: Text("SUBMIT Error"),
                    onPressed: () {
                      setState(() {
                        this.hasError = true;
                      });
                    },
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Wishlist

  1. Localization (L-R, R-L)
  2. Highlight animation
  3. Pin Box animation

Star 🌟 to show support!

pin usage pin usage

More information

documentation.

Libraries

pin_code_text_field

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]