fl_pin_code

fl_pin_code

fl_pin_code helps to display Pin codes for Flutter applications.

Feature 👇👇

• obscure support
• auto moving focus
• field shapes (box, underline)
• null-safety

Installing 🔧

Install the latest version from pub.

Installing

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  fl_pin_code: ^0.0.9

2. Install it

You can install packages from the command line: with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:fl_pin_code/fl_pin_code.dart';

Usage

            PinCode(
                    numberOfFields: 5,
                    fieldWidth: 40.0,
                    style: TextStyle(color: Colors.black, fontSize: 15),
                    fieldStyle: PinCodeStyle.box),

            PinCode(
                  keyboardType: TextInputType.number,
                  isObscure: true,
                  numberOfFields: 5,
                  fieldWidth: 40.0,
                  style: TextStyle(color: Colors.black, fontSize: 15),
                  fieldStyle: PinCodeStyle.box,
                  onCompleted: (text) {
                    setState(() {
                      hash.pinHash = text;
                    });
                  },
            ),

            // this is taken from sample project.
            PinCode(
                numberOfFields: 5,
                fieldWidth: 40.0,
                style: TextStyle(color: Colors.black, fontSize: 15),
                fieldStyle: PinCodeStyle.box,
                onCompleted: (text) {
                  if (text.trim() == "11111") {
                    setState(() {
                      _passwordObscureText = false;
                    });
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        content: Text('Please insert 11111 to unlock')));
                  }
                  Navigator.of(context).pop();
                },
                // onChanged: (_) {},
            )