pin_code_text_field 1.5.0
pin_code_text_field #
It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.
Usage #
Use this package as a library #
- Depend on it Add this to your package's pubspec.yaml file:
dependencies:
pin_code_text_field: <VERSION>
- 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.
- Import it Now in your Dart code, you can use:
import 'package:pin_code_text_field/pin_code_text_field.dart';
API #
name | type | default | description |
---|---|---|---|
isCupertino | bool | false | Application wrapped in CupertinoApp instead MaterialApp |
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. |
highlightAnimation | bool | false | animated highlight of the focused pin box. |
highlightAnimationBeginColor | Color | Colors.black | the starting color of the animated highlight. |
highlightAnimationEndColor | Color | Color.white | the ending color of the animated highlight. |
highlightAnimationDuration | Duration | 500ms | the duration of the highlight animation. |
highlightColor | Color | Colors.black | Set color of the focused pin box. |
pinBoxDecoration | BoxDecoration | ProvidedPinBoxDecoration._defaultPinBoxDecoration | Customization for the individual pin boxes. Check ProvidedPinBoxDecoration for possible options. |
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 . |
pinBoxHeight | double | 70.0 | Height of pin boxes. |
pinBoxWidth | double | 70.0 | Width of pin boxes. |
onDone | void Function(String) | Callback when the max length of pin code is reached. | |
hasTextBorderColor | Color | Colors.black | Set color of pin box containing text. |
pinTextAnimatedSwitcherTransition | Function(Widget child, Animation | Animation of text appearing/disappearing, you can write your own or use a few presets: 1. PinCodeTextField.awesomeTransition 2. PinCodeTextField.defaultScalingTransition 3. PinCodeTextField.defaultRotateTransition | |
pinTextAnimatedSwitcherDuration | Duration | const Duration() | Duration of pinTextAnimatedSwitcherTransition. Check ProvidedPinBoxTextAnimation for possible options. |
errorBorderColor | Color | Colors.red | Highlight all textboxes to this color if hasError is set to true |
onTextChange | Function(String) | callback that returns a text on input | |
hasError | bool | false | set all border color to errorBorderColor |
autofocus | bool | false | Autofocus on view entered |
wrapAlignment | WrapAlignment | WrapAlignment.start | Alignment of the wrapped pin boxes |
textDirection | TextDirection | TextDirection.ltr | The direction of the pin code |
keyboardType | TextInputType | TextInputType.number | The type of the input keyboard |
pinBoxColor | Color | null | Color of the pin boxes (Will be overridden by custom PinBoxDecoration) |
pinBoxBorderWidth | double | 2 | Border Width of pin boxes |
pinBoxRadius | double | 0 | The type of the input keyboard |
Example #
class MyHomePageState extends State<MyHomePage> {
TextEditingController controller = TextEditingController();
String thisText = "";
int pinLength = 4;
bool hasError = false;
String errorMessage;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Pin Code Text Field Example"),
),
body: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 60.0),
child: Text(thisText, style: Theme.of(context).textTheme.title),
),
PinCodeTextField(
autofocus: false,
controller: controller,
hideCharacter: true,
highlight: true,
highlightColor: Colors.blue,
defaultBorderColor: Colors.black,
hasTextBorderColor: Colors.green,
maxLength: pinLength,
hasError: hasError,
maskCharacter: "😎",
onTextChanged: (text) {
setState(() {
hasError = false;
});
},
onDone: (text){
print("DONE $text");
},
pinCodeTextFieldLayoutType: PinCodeTextFieldLayoutType.AUTO_ADJUST_WIDTH,
wrapAlignment: WrapAlignment.start,
pinBoxDecoration: ProvidedPinBoxDecoration.underlinedPinBoxDecoration,
pinTextStyle: TextStyle(fontSize: 30.0),
pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition,
pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300),
),
Visibility(
child: Text(
"Wrong PIN!",
style: TextStyle(color: Colors.red),
),
visible: hasError,
),
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("+"),
onPressed: () {
setState(() {
this.pinLength++;
});
},
),
MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("-"),
onPressed: () {
setState(() {
this.pinLength--;
});
},
),
MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("SUBMIT"),
onPressed: () {
setState(() {
this.thisText = controller.text;
});
},
),
MaterialButton(
color: Colors.red,
textColor: Colors.white,
child: Text("SUBMIT Error"),
onPressed: () {
setState(() {
this.hasError = true;
});
},
),
],
),
)
],
),
),
),
);
}
}
Wishlist #
Localization (L-R, R-L)Highlight animationPin Box animation- BoxDecoratorBuilder for customizing individual pin boxes
Tips and Tricks: #
- Copy and pasting
Wrap the
PinCodeTextField
inGestureDetector
, the launch an AlertDialog to access theClipboard
and paste the strings to theTextEditController
of thePinCodeTextField
Contributors #
Star 🌟 to show support!


More information #
[1.5.0]
- Fixed WrapAlignment bug
- Web support
- Added ProvidedPinBoxDecoration.roundedPinBoxDecoration
- Updated Examples
[1.4.0] - 9 September 2019
- Added highlight animation
- Added ability to change keyboard type
- Disallowed special characters when using numeric keyboard.
[1.3.7] - 16 July 2019
- Fixed #21 - Getting error dispose
[1.3.6] - 7 May 2019
- Fixed UI error whenever BorderSide color is set to ThemeData for focusedErrorBorder
errorBorder
,disabledBorder
,enabledBorder
[1.3.5] - 3 May 2019
- Fixed UI error whenever BorderSide color is set to ThemeData
[1.3.4] - 24 April 2019
- Fixed pin not showing up when
pinTextAnimatedSwitcherTransition
is set. - Fixed error when
TextEditingController
is not set
[1.3.3] - 24 April 2019
- Fixed
TextEditingController can only contain numeric
Error - Fixed
BoxConstraints has a negative minimum height
Error
[1.3.2] - 16 April 2019
TextEditingController
to set initial text to thePinCodeTextField
PinCodeTextField
will reflect changes made inTextEditingController
[1.3.0] - 26 March 2019
- Added supports run in
CupertinoApp
. For usage set propertyisCupertino: true
- Fixed a bug where focusNode is not disposed whenever parent widget is disposed
[1.2.1] - 6 March 2019
- Added
PinCodeTextFieldLayoutType
to adjust type of layouts such as auto adjust width or wrap
[1.2.0] - 5 March 2019
- Use
Wrap
instead ofRow
to display the Pin boxes
[1.1.3] - 29 January 2019
- Added
autofocus
property
[1.1.2] - 17 December 2018
- Refactored provided
PinBoxDecoration
toProvidedPinBoxDecoration
- Refactored provided
PinBoxTextAnimation
toProvidedPinBoxTextAnimation
[1.1.1] - 15 December 2018
- minor bug fix
[1.1.0] - 15 December 2018
Added customizable animation on texts
- added errorBorderColor
- added hasTextBorderColor
- added onTextChanged
- added pinTextAnimatedSwitcherTransition
- added pinTextAnimatedSwitcherDuration
[1.0.0] - 11 December 2018
- Added a few text properties
- maskCharacter
- pinCodeTextStyle
[0.1.1] - 16 October 2018
- First release of plugin
[0.0.3] - 16 October 2018
- Update with customizable BoxDecorator
example #
Example of App using pin code
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
pin_code_text_field: ^1.5.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_code_text_field/pin_code_text_field.dart';
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
96
|
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]
|
98
|
We analyzed this package on Dec 5, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.12.21
- Flutter: 1.9.1+hotfix.6
Platforms
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
Health suggestions
Fix lib/pin_code_text_field.dart
. (-0.50 points)
Analysis of lib/pin_code_text_field.dart
reported 1 hint:
line 283 col 8: The declaration '_isNumeric' isn't referenced.
Dependencies
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 | 1.14.12 | |
meta | 1.1.7 | 1.1.8 | |
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |