pin_input_text_field 0.4.0

  • Example
  • Installing
  • Versions
  • 93

pub package

pin_input_text_field #

中文版点我 PinInputTextField is a TextField widget to help display different style pin.

Example #

Decoration #




Installing #

Install the latest version from pub.

Usage #

Attributes #

Customizable attributes for PinInputTextField

Attribute Name Example Value Description
pinLength 6 The max length of pin, the default is 6
onSubmit (String pin){} The callback will execute when user click done, sometimes is not working in Android.
decoration BoxLooseDecoration Decorate the pin, there are 3 inside styles, the default is BoxLooseDecoration
inputFormatters WhitelistingTextInputFormatter.digitsOnly Just like TextField's inputFormatter, the default is WhitelistingTextInputFormatter.digitsOnly
keyboardType Just like TextField's keyboardType, the default is
pinEditingController PinEditingController Controls the pin being edited. If null, this widget will create its own PinEditingController
autoFocus false Same as TextField's autoFocus, the default is false
focusNode FocusNode Same as TextField's focusNode
textInputAction TextInputAction.done Same as TextField's textInputAction, not working in digit mode.
enabled true Same as TextField's enabled, the default is true

ObscureStyle #

/// Determine whether replace [obscureText] with number.
final bool isTextObscure;
/// The display text when [isTextObscure] is true
final String obscureText;

Known Issue #

The PinEditingController listener will execute more than once in some situations, you can filter some duplicate values in your code.

[0.4.0] - 2019/05/23

  • New: add 'enable' to control pin input.

[0.3.1] - 2019/05/12

  • Update: complete example and pubspec.yaml.

[0.3.0] - 2019/04/09

  • New: no need to correct user's input.
  • New: align actual text in center to make popup window more natural.
  • New: obscure mode is always on now.
  • New: add textInputAction to control TextInputAction.

Breaking Change #

  • PinEditingController constructor must provide pinLength.
  • PinEditingController constructor provide new field autoDispose to simplify dispose.
  • PinTextField constructor remove width and height field, if you want customize size of the PinInputTextField, you can wrap a Container widget.

[0.2.1] - 2019/01/20

  • change default color of underlineDecoration from Colors.Black to Colors.cyan.
  • add more detail example.

[0.2.0] - 2019/01/20

  • add keyboardType & inputFormatters control.
  • add autoFocus & focusNode control.
  • add controller to assign pin.

[0.1.1] - 2019/01/09

  • change license from MIT to Apache.

[0.1.0] - 2019/01/09

  • add comment to help understand source code.
  • add obscure style to be more customize.
  • add onPinChanged to observe the text changed.
  • add solidColor to set background color in BoxLooseDecoration & BoxTightDecoration.
  • add enteredColor for UnderlineDecoration&BoxLooseDecoration.
  • remove const default variable in PinInputTextField.
  • fix wrong place in painting

[0.0.1] - 2018/12/24.

  • first commit.


example/main.dart #

/// more examples see
import 'package:pin_input_text_field/pin_input_text_field.dart';

                pinLength: 4,
                decoration: _pinDecoration,
                pinEditingController: _pinEditingController,
                autoFocus: true,
                textInputAction: TextInputAction.go,
                onSubmit: (pin) {
                  debugPrint('submit pin:$pin');

Use this package as a library

1. Depend on it

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

  pin_input_text_field: ^0.4.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:pin_input_text_field/pin_input_text_field.dart';
Version Uploaded Documentation Archive
0.4.0 May 23, 2019 Go to the documentation of pin_input_text_field 0.4.0 Download pin_input_text_field 0.4.0 archive
0.3.1 May 12, 2019 Go to the documentation of pin_input_text_field 0.3.1 Download pin_input_text_field 0.3.1 archive
0.3.0 Apr 9, 2019 Go to the documentation of pin_input_text_field 0.3.0 Download pin_input_text_field 0.3.0 archive
0.2.1 Jan 23, 2019 Go to the documentation of pin_input_text_field 0.2.1 Download pin_input_text_field 0.2.1 archive
0.2.0 Jan 20, 2019 Go to the documentation of pin_input_text_field 0.2.0 Download pin_input_text_field 0.2.0 archive
0.1.1 Jan 9, 2019 Go to the documentation of pin_input_text_field 0.1.1 Download pin_input_text_field 0.1.1 archive
0.1.0 Jan 9, 2019 Go to the documentation of pin_input_text_field 0.1.0 Download pin_input_text_field 0.1.0 archive
0.0.1 Dec 31, 2018 Go to the documentation of pin_input_text_field 0.0.1 Download pin_input_text_field 0.0.1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jun 12, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.1
  • pana: 0.12.17
  • Flutter: 1.5.4-hotfix.2


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies