pinput 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

PinPut #

🔥🚀 Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Breaking changes in version 0.2.0 changed widget building logic so now it supports: #

  • Backspace on keyboard
  • Every pixel customization
  • Nice animations
  • Form validation
  • Ios auto fill - testing needed

Contents #

Support #

First thing first give it a star ⭐

Contribute #

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Overview #

Use submittedFieldDecoration, selectedFieldDecoration, followingFieldDecoration properties to add field decoration, border, fill color, shape, radius etc. provide different values to them in order to achieve nice implicit animations

drawing

First example configuration

BoxDecoration get _pinPutDecoration {
    return BoxDecoration(
      border: Border.all(color: Colors.deepPurpleAccent),
      borderRadius: BorderRadius.circular(15),
    );
}

PinPit _pinPut = PinPut(
    fieldsCount: 5,
    onSubmit: (String pin) => print(pin),
    focusNode: _pinPutFocusNode,
    controller: _pinPutController,
    submittedFieldDecoration: _pinPutDecoration.copyWith(
        borderRadius: BorderRadius.circular(20)),
    selectedFieldDecoration: _pinPutDecoration,
    followingFieldDecoration: _pinPutDecoration.copyWith(
      borderRadius: BorderRadius.circular(5),
      border: Border.all(
        color: Colors.deepPurpleAccent.withOpacity(.5),
      ),
    ),
  );
drawing

Second example configuration


BoxDecoration get _pinPutDecoration {
  return BoxDecoration(
      border: Border(
    bottom: BorderSide(color: Colors.deepPurpleAccent),
  ));
}
  
PinPit _pinPut = PinPut(
  fieldsCount: 5,
  onSubmit: (String pin) => print(pin),
  focusNode: _pinPutFocusNode,
  controller: _pinPutController,
  pinAnimationType: PinAnimationType.scale,
  inputDecoration: InputDecoration(
    border: InputBorder.none,
    helperText: 'Pin code sent to your phone',
  ),
  submittedFieldDecoration: _pinPutDecoration.copyWith(
    border: Border(
      bottom: BorderSide(
          width: 2,
          color: Colors.deepPurpleAccent.withOpacity(1)),
    ),
  ),
  selectedFieldDecoration: _pinPutDecoration,
  followingFieldDecoration: _pinPutDecoration.copyWith(
    border: Border(
      bottom: BorderSide(
          color: Colors.deepPurpleAccent.withOpacity(.5)),
    ),
  ),
);
drawing

Third example configuration


BoxDecoration get _pinPutDecoration {
  return BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.greenAccent,
  );
}
  
PinPit _pinPut = PinPut(
  fieldsCount: 5,
  onSubmit: (String pin) => print(pin),
  focusNode: _pinPutFocusNode,
  controller: _pinPutController,
  textStyle: TextStyle(color: Colors.white, fontSize: 20),
  pinAnimationType: PinAnimationType.scale,
  submittedFieldDecoration: _pinPutDecoration.copyWith(),
  selectedFieldDecoration: _pinPutDecoration.copyWith(
      border: Border.all(
    color: Colors.blueAccent,
  )),
  followingFieldDecoration: _pinPutDecoration.copyWith(
      color: Colors.greenAccent.withOpacity(.6)),
);

Installation #

1. Depend on it #

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

dependencies:
  pinput: ^0.2.0

2. Install it #

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

3. Import it #

Now in your Dart code, you can use:

import 'package:pinput/pin_put/pin_put.dart';

Properties #

@required this.fieldsCount,
this.onSubmit,
this.onSaved,
this.onChanged,
this.onTap,
this.onClipboardFound,
this.controller,
this.focusNode,
this.textStyle,
this.submittedFieldDecoration,
this.selectedFieldDecoration,
this.followingFieldDecoration,
this.disabledDecoration,
this.eachFieldWidth,
this.eachFieldHeight,
this.fieldsAlignment = MainAxisAlignment.spaceBetween,
this.eachFieldMargin,
this.eachFieldPadding,
this.eachFieldConstraints =
    const BoxConstraints(minHeight: 40, minWidth: 40),
this.inputDecoration = const InputDecoration(
  contentPadding: EdgeInsets.all(0),
  border: InputBorder.none,
  counterText: '',
),
this.animationCurve = Curves.linear,
this.animationDuration = const Duration(milliseconds: 160),
this.pinAnimationType = PinAnimationType.slide,
this.slideTransitionBeginOffset,
this.enabled = true,
this.autofocus = false,
this.autoValidate = false,
this.keyboardAppearance,
this.inputFormatters,
this.validator,
this.keyboardType = TextInputType.number,
this.obscureText,
this.textCapitalization = TextCapitalization.none,
this.textInputAction,
this.toolbarOptions,

Example #

Import the package:

import 'package:flutter/material.dart';
import 'package:pinput/pin_put/pin_put.dart';

void main() => runApp(PinPutTest());

class PinPutTest extends StatefulWidget {
  @override
  PinPutTestState createState() => PinPutTestState();
}

class PinPutTestState extends State<PinPutTest> {
  final TextEditingController _pinPutController = TextEditingController();
  final FocusNode _pinPutFocusNode = FocusNode();

  BoxDecoration get _pinPutDecoration {
    return BoxDecoration(
      border: Border.all(color: Colors.deepPurpleAccent),
      borderRadius: BorderRadius.circular(15),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.green,
        hintColor: Colors.green,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Builder(
          builder: (context) {
            return Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      color: Colors.white,
                      margin: EdgeInsets.all(20),
                      padding: EdgeInsets.all(20),
                      child: PinPut(
                        fieldsCount: 5,
                        onSubmit: (String pin) => _showSnackBar(pin, context),
                        focusNode: _pinPutFocusNode,
                        controller: _pinPutController,
                        submittedFieldDecoration: _pinPutDecoration.copyWith(
                            borderRadius: BorderRadius.circular(20)),
                        selectedFieldDecoration: _pinPutDecoration,
                        followingFieldDecoration: _pinPutDecoration.copyWith(
                          borderRadius: BorderRadius.circular(5),
                          border: Border.all(
                            color: Colors.deepPurpleAccent.withOpacity(.5),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 30),
                    Divider(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        FlatButton(
                          child: Text('Focus'),
                          onPressed: () => _pinPutFocusNode.requestFocus(),
                        ),
                        FlatButton(
                          child: Text('Unfocus'),
                          onPressed: () => _pinPutFocusNode.unfocus(),
                        ),
                        FlatButton(
                          child: Text('Clear All'),
                          onPressed: () => _pinPutController.text = '',
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _showSnackBar(String pin, BuildContext context) {
    final snackBar = SnackBar(
      duration: Duration(seconds: 3),
      content: Container(
          height: 80.0,
          child: Center(
            child: Text(
              'Pin Submitted. Value: $pin',
              style: TextStyle(fontSize: 25.0),
            ),
          )),
      backgroundColor: Colors.deepPurpleAccent,
    );
    Scaffold.of(context).hideCurrentSnackBar();
    Scaffold.of(context).showSnackBar(snackBar);
  }
}

Changelog #

0.2.0 -05/07/2020 #

🔥🚀 Added some useful Documentation

0.2.0-dev.1 -04/07/2020 #

🔥🚀 Breaking changes, changed widget building logic so now it supports:

  • Backspace on keyboard
  • Every pixel customization
  • Nice animations
  • Form validation
  • Ios auto fill - testing needed

0.1.10 -02/08/2019 #

👍 With the help of community: @xportation

  • Added Set autofocus on the first field when the attribute is defined|

0.1.9 -07/02/2019 #

  • Added
PropertyDefault/Meaning
onClearClear button callback

0.1.8 -06/14/2019 #

👍 With the help of community: @datvo0110, @almeynman

  • Fixed minor bugs
  • Added
PropertyDefault/Meaning
containerHeight100.0

0.1.7 -05/12/2019 #

👍 With the help of community: @datvo0110, @mwgriffiths88, @inromualdo

  • Fixed minor bugs, check clipboard when app is resumed...
  • Added Properties ability to hide keyboard & custumize more
PropertyDefault/Meaning
textCapitalizationTextCapitalization.none

0.1.6 -01/17/2019 #

  • Added Properties ability to hide keyboard & custumize more
PropertyDefault/Meaning
clearButtonIconIcon(Icons.backspace, size: 30)
pasteButtonIconIcon(Icons.content_paste, size: 30)
unFocusWhenDefault is False, True to hide keyboard
textStyleTextStyle(fontSize: 30)
spaceBetweenspace between fields Default: 10.0
inputDecorationAbility to style field's border, padding etc...

0.1.5 - 12/17/2018 #

  • Added Copy From Clipboard fnctionality if copied text length is equal to fields count
PropertyDefault
pasteButtonIconIcons.content_paste

*Note that

clearButtonEnabled will change with actionButtonEnabled in next release, right now if it is true both clear and paste functinality works

0.1.4 - 10/31/2018 #

  • Added
PropertyDefault
autoFocustrue

0.1.3+1 - 11026/2018 #

  • Minor fixes

0.1.3 - 10/26/2018 #

  • Transformed plugin to MVVM pattern
  • Fixed onSubmit call when all fieds aren't filled
  • Updated Demo
  • Added
PropertyDefault
clearButtonIconIcons.backspace
clearButtonEnabledtrue
clearButtonColor0xFF66BB6A

0.1.2 - 10/24/2018 #

  • Added
PropertyDefault
borderRadius5.0
keybaordTypenumber
keyboardActionnext

0.1.1 - 10/24/2018 #

  • Added
PropertyDefault
onSubmitFunction
fieldsCount4
isTextObscurefalse
fontSize40.0

0.0.1 - 10/24/2018 #

  • Initial release, working base functionality

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:pinput/pin_put/pin_put.dart';

void main() => runApp(PinPutTest());

class PinPutTest extends StatefulWidget {
  @override
  PinPutTestState createState() => PinPutTestState();
}

class PinPutTestState extends State<PinPutTest> {
  final TextEditingController _pinPutController = TextEditingController();
  final FocusNode _pinPutFocusNode = FocusNode();

  BoxDecoration get _pinPutDecoration {
    return BoxDecoration(
      border: Border.all(color: Colors.deepPurpleAccent),
      borderRadius: BorderRadius.circular(15),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.green,
        hintColor: Colors.green,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Builder(
          builder: (context) {
            return Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      color: Colors.white,
                      margin: EdgeInsets.all(20),
                      padding: EdgeInsets.all(20),
                      child: PinPut(
                        fieldsCount: 5,
                        onSubmit: (String pin) => _showSnackBar(pin, context),
                        focusNode: _pinPutFocusNode,
                        controller: _pinPutController,
                        submittedFieldDecoration: _pinPutDecoration.copyWith(
                            borderRadius: BorderRadius.circular(20)),
                        selectedFieldDecoration: _pinPutDecoration,
                        followingFieldDecoration: _pinPutDecoration.copyWith(
                          borderRadius: BorderRadius.circular(5),
                          border: Border.all(
                            color: Colors.deepPurpleAccent.withOpacity(.5),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 30),
                    Divider(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        FlatButton(
                          child: Text('Focus'),
                          onPressed: () => _pinPutFocusNode.requestFocus(),
                        ),
                        FlatButton(
                          child: Text('Unfocus'),
                          onPressed: () => _pinPutFocusNode.unfocus(),
                        ),
                        FlatButton(
                          child: Text('Clear All'),
                          onPressed: () => _pinPutController.text = '',
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _showSnackBar(String pin, BuildContext context) {
    final snackBar = SnackBar(
      duration: Duration(seconds: 3),
      content: Container(
          height: 80.0,
          child: Center(
            child: Text(
              'Pin Submitted. Value: $pin',
              style: TextStyle(fontSize: 25.0),
            ),
          )),
      backgroundColor: Colors.deepPurpleAccent,
    );
    Scaffold.of(context).hideCurrentSnackBar();
    Scaffold.of(context).showSnackBar(snackBar);
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  pinput: ^0.2.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:pinput/pin_put/pin_put.dart';
import 'package:pinput/pin_put/pin_put_state.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
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]
95
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

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