pin_code_text_field 1.0.0

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

pin_code_text_field

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

Usage

API

name	type	default	description
maxLength	int	4	The total length of pin number & the number of pin boxes
hideCharacter	bool	false	Show or hide the pin code
highlight	bool	false	highlight the focused pin box
highlightColor	Color		Set color of the focused pin box
boxDecoration	BoxDecoration		Customization for the individual pin boxes.
pinTextStyle	TextStyle		TextStyle for styling pin characters
maskCharacter	String	"\u25CF"	Special character to mask the pin code. Will only work if hideCharacter is set to true
onDone	void Function()		Callback when the max length of pin code is reached.

Example

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TEXT"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            PinCodeTextField(
              controller: controller,
              hideCharacter: true,
              highlight: true,
              highlightColor: Colors.blue,
              maxLength: 5,
              maskCharacter: "☆",
              pinTextStyle: TextStyle(fontSize: 30.0),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  this.thisText = controller.text;
                });
              },
            ),
            Text(thisText)
          ],
        ),
      ),
    );
  }
}

Wishlist

1. Localization (L-R, R-L)
2. Highlight properties

Star 🌟 to show support!

More information

documentation.