flutter_pin_code_fields 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 83

Flutter Pin Code Fields #

A flutter package which will help you generate customizable pin code fields. Can be used for login pins or OTP.

Installation #

1. Add Dependency #

Add this to your pubspec.yaml file:

dependencies:
    flutter_pin_code_fields: <VERSION>

2. Install #

Install the package from command line either using FLutter or Pub:

Using Pub:

$ pub get

Using Flutter:

$ flutter packages get

3. Import Package #

Import the package in the Dart file to use it:

import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';

Properties #

NameTypeDescription
lengthintTotal number of pin code fields. This property is required.
controllerTextEditingControllerText editing controller for the fields.
focusNodeFocusNodeFocus node for the fields.
autofocusboolEnable/ disable autofocus on the field. Default is false.
fieldHeightdoubleHeight of the pin code fields.
fieldWidthdoubleWidth of the pin code fields.
enabledboolEnable/ disable editing on the fields. Default is true.
responsiveboolAutomatically adjusts fields to the size of the screen or provided space. Default is true.
obscureTextboolHides the input text of the user. Default is false.
obscureCharacterStringCharacter that replaces the user's input when obscureText is true. Default is '*'.
marginEdgeInsetsProvides margin between fields. Default is EdgeInsets.all(5.0).
paddingEdgeInsetsProvides padding within the fields. Default is EdgeInsets.only(bottom: 5.0).
fieldBorderStyleFieldBorderStyleBorder style of the field. Default is FieldBorderStyle.Bottom. FieldBorderStyle contains: Square, Top, Bottom, Left, Right, TopBottom and LeftRight.
borderWidthdoubleBorder width of the field. Default is 2.0.
borderRadiusBorderRadiusBorder radius of the field. Default is BorderRadius.zero.
borderColorColorColor of the border. Default is Colors.grey.
activeBorderColorColorBorder color of the active/ highlighted field.
fieldBackgroundColorColorBackground color of the fields.
activeBackgroundColorColorBackground color of the active/ highlighted field.
textStyleTextStyleStyle of the text in the fields.
keyboardTypeTextInputTypeType of keyboard to use for the fields. Default is TextInputType.visiblePassword.
autoHideKeyboardboolAutomatically hide keyboard when the user reaches the last field or the first field (by delete). Default is true.
animationAnimationsAnimation for the text in the fields. Default is Animations.Fade. Animations contains: Animations.SlideInUp, Animations.SlideInDown, Animations.SlideInLeft, Animations.SlideInRight, Animations.Grow, Animations.Shrink, Animations.RotateLeft, Animations.RotateRight, Animations.Fade.
animationDurationDurationAnimation duration for the text in the fields. Default is Duration(milliseconds: 150).
animationCurveCurveAnimation curve for the text in the fields. Default is Curves.easeInOut.
switchInAnimationCurveCurveAnimation switch in curve for the text in the fields. Default is Curves.easeIn.
switchOutAnimationCurveCurveAnimation switch out curve for the text in the fields. Default is Curves.easeOut.
onChangeFunction(String)Callback that returns text on input.
onCompleteFunction(String)Callback that returns text on filling all the fields. This property is required.

Examples #

Default Usage #

PinCodeFields(
    length: 4,
    onComplete: (output) {
        // Your logic with pin code
        print(output);
    },
),
Default Example

Obscure Fields #

PinCodeFields(
    length: 6,
    obscureText: true,
    obscureCharacter: '❌',
    onComplete: (output) {
        // Your logic with pin code
        print(output);
    },
),
Obscure Example

Customized Fields #

PinCodeFields(
    length: 4,
    fieldBorderStyle: FieldBorderStyle.Square,
    responsive: false,
    fieldHeight: 130.0,
    fieldWidth: 130.0,
    borderWidth: 5.0,
    activeBorderColor: Colors.teal,
    activeBackgroundColor: Colors.tealAccent,
    borderRadius: BorderRadius.circular(20.0),
    keyboardType: TextInputType.number,
    autoHideKeyboard: false,
    fieldBackgroundColor: Colors.lightGreenAccent,
    borderColor: Colors.lightGreen,
    textStyle: TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
    ),
    onComplete: (output) {
        // Your logic with pin code
        print(output);
    },
),
Custom Example

Animations for text #

PinCodeFields(
    length: 4,
    animationDuration: const Duration(milliseconds: 200),
    animationCurve: Curves.easeInOut,
    switchInAnimationCurve: Curves.easeIn,
    switchOutAnimationCurve: Curves.easeOut,
    animation: Animations.SlideInDown,
    onComplete: (output) {
        // Your logic with code
        print(output);
    },
),
Custom Example Custom Example Custom Example

For complete example, refer example/lib/main.dart.

Contribute #

Star ⭐️ to show support!

Have a new feature to add to this?

  1. Fork it.
  2. Create a branch for your feature (git checkout -b your-feature).
  3. Commit your changes (git commit -m "Feature Description").
  4. Push to the branch (git push origin your-feature).
  5. Create new pull request.

[1.1.0] #

  • Added customization for animation on text.
  • Updated example with animations.

[1.0.1] #

  • Added License.
  • Updated example.

[1.0.0] #

Initial Release.

example/lib/main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pin Code Fields Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController newTextEditingController = TextEditingController();
  FocusNode focusNode = FocusNode();

  @override
  void dispose() {
    newTextEditingController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Pin Code Fields Demo'),
        ),
        body: ListView(
          children: <Widget>[
            SizedBox(
              height: 30.0,
            ),
            Text(
              'Default Pincode Fields',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 40.0,
            ),
            PinCodeFields(
              length: 4,
              controller: newTextEditingController,
              focusNode: focusNode,
              onComplete: (result) {
                // Your logic with code
                print(result);
              },
            ),
            SizedBox(
              height: 80.0,
            ),
            Text(
              'Obscure Pincode Fields',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            PinCodeFields(
              length: 6,
              obscureText: true,
              obscureCharacter: '❌',
              onComplete: (text) {
                // Your logic with pin code
                print(text);
              },
            ),
            SizedBox(
              height: 80.0,
            ),
            Text(
              'Custom Pincode Fields',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            PinCodeFields(
              length: 4,
              fieldBorderStyle: FieldBorderStyle.Square,
              responsive: false,
              fieldHeight: 130.0,
              fieldWidth: 130.0,
              borderWidth: 5.0,
              activeBorderColor: Colors.teal,
              activeBackgroundColor: Colors.tealAccent,
              borderRadius: BorderRadius.circular(20.0),
              keyboardType: TextInputType.number,
              autoHideKeyboard: false,
              fieldBackgroundColor: Colors.lightGreenAccent,
              borderColor: Colors.lightGreen,
              textStyle: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.bold,
              ),
              onComplete: (output) {
                // Your logic with pin code
                print(output);
              },
            ),
            SizedBox(
              height: 80.0,
            ),
            Text(
              'Animated Pincode Fields',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            PinCodeFields(
              length: 4,
              animationDuration: const Duration(milliseconds: 200),
              animationCurve: Curves.easeInOut,
              switchInAnimationCurve: Curves.easeIn,
              switchOutAnimationCurve: Curves.easeOut,
              animation: Animations.SlideInDown,
              onComplete: (result) {
                // Your logic with code
                print(result);
              },
            ),
            SizedBox(
              height: 50.0,
            ),
          ],
        ));
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_pin_code_fields: ^1.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
66
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
83
Learn more about scoring.

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_pin_code_fields that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8