Pinput class
Flutter package to create easily customizable Pin code input field, that your designers can't even draw in Figma 🤭
Features:
- Animated Decoration Switching
- Form validation
- SMS Autofill on iOS
- SMS Autofill on Android
- Standard Cursor
- Custom Cursor
- Cursor Animation
- Copy From Clipboard
- Ready For Custom Keyboard
- Standard Paste option
- Obscuring Character
- Obscuring Widget
- Haptic Feedback
- Close Keyboard After Completion
- Beautiful Examples
- Inheritance
Constructors
-
Pinput({int length = PinputConstants._defaultLength, PinTheme? defaultPinTheme, PinTheme? focusedPinTheme, PinTheme? submittedPinTheme, PinTheme? followingPinTheme, PinTheme? disabledPinTheme, PinTheme? errorPinTheme, ValueChanged<
String> ? onChanged, ValueChanged<String> ? onCompleted, ValueChanged<String> ? onSubmitted, VoidCallback? onTap, VoidCallback? onLongPress, TextEditingController? controller, FocusNode? focusNode, Widget? preFilledWidget, List<int> ? separatorPositions, Widget? separator = PinputConstants._defaultSeparator, String smsCodeMatcher = PinputConstants.defaultSmsCodeMatcher, String? senderPhoneNumber, AndroidSmsAutofillMethod androidSmsAutofillMethod = AndroidSmsAutofillMethod.none, bool listenForMultipleSmsOnAndroid = false, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.center, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start, AlignmentGeometry pinContentAlignment = Alignment.center, Curve animationCurve = Curves.easeIn, Duration animationDuration = PinputConstants._animationDuration, PinAnimationType pinAnimationType = PinAnimationType.scale, bool enabled = true, bool readOnly = false, bool useNativeKeyboard = true, bool toolbarEnabled = true, bool autofocus = false, bool obscureText = false, bool showCursor = true, bool isCursorAnimationEnabled = true, bool enableIMEPersonalizedLearning = false, bool enableSuggestions = true, HapticFeedbackType hapticFeedbackType = HapticFeedbackType.disabled, bool closeKeyboardWhenCompleted = true, TextInputType keyboardType = TextInputType.number, TextCapitalization textCapitalization = TextCapitalization.none, Offset? slideTransitionBeginOffset, Widget? cursor, Brightness? keyboardAppearance, List<TextInputFormatter> inputFormatters = const [], TextInputAction? textInputAction, Iterable<String> ? autofillHints, String obscuringCharacter = '•', Widget? obscuringWidget, TextSelectionControls? selectionControls, String? restorationId, ValueChanged<String> ? onClipboardFound, AppPrivateCommandCallback? onAppPrivateCommand, MouseCursor? mouseCursor, bool forceErrorState = false, String? errorText, FormFieldValidator<String> ? validator, PinputErrorBuilder? errorBuilder, TextStyle? errorTextStyle, PinputAutovalidateMode pinputAutovalidateMode = PinputAutovalidateMode.onSubmit, EdgeInsets scrollPadding = const EdgeInsets.all(20), EditableTextContextMenuBuilder? contextMenuBuilder = _defaultContextMenuBuilder, TapRegionCallback? onTapOutside, Key? key}) -
const
Properties
- androidSmsAutofillMethod → AndroidSmsAutofillMethod
-
By default Android autofill is Disabled, you cane enable it by using any of options listed below
final
- animationCurve → Curve
-
curve of every Pinput Animation
final
- animationDuration → Duration
-
Duration of every Pinput Animation
final
-
autofillHints
→ Iterable<
String> ? -
See EditableText.autofillHints
final
- autofocus → bool
-
See EditableText.autofocus
final
- closeKeyboardWhenCompleted → bool
-
If true keyboard will be closed
final
- contextMenuBuilder → EditableTextContextMenuBuilder?
-
Builds the text selection toolbar when requested by the user.
final
- controller → TextEditingController?
-
Used to get, modify PinPut value and more.
Don't forget to dispose controller
final
- crossAxisAlignment → CrossAxisAlignment
-
Defines how Pinput and (errorText or errorBuilder) are being placed inside Column
final
- cursor → Widget?
-
If showCursor true the focused field will show passed Widget
final
- defaultPinTheme → PinTheme?
-
Theme of the pin in default state
final
- disabledPinTheme → PinTheme?
-
Theme of the pin in disabled state
final
- enabled → bool
-
Defines Pinput state
final
- enableIMEPersonalizedLearning → bool
-
Whether to enable that the IME update personalized data such as typing history and user dictionary data.
final
- enableSuggestions → bool
-
See EditableText.enableSuggestions
final
- errorBuilder → PinputErrorBuilder?
-
If Pinput has error and errorBuilder is passed it will be rendered under the Pinput
final
- errorPinTheme → PinTheme?
-
Theme of the pin in error state
final
- errorText → String?
-
Text displayed under the Pinput if Pinput is invalid
final
- errorTextStyle → TextStyle?
-
Style of error text
final
- focusedPinTheme → PinTheme?
-
Theme of the pin in focused state
final
- focusNode → FocusNode?
-
Defines the keyboard focus for this
To give the keyboard focus to this widget, provide a focusNode and then
use the current FocusScope to request the focus:
Don't forget to dispose focusNode
final
- followingPinTheme → PinTheme?
-
Theme of the pin in following state
final
- forceErrorState → bool
-
If true errorPinTheme will be applied and errorText will be displayed under the Pinput
final
- hapticFeedbackType → HapticFeedbackType
-
Use haptic feedback everytime user types on keyboard
See more details in HapticFeedback
final
- hashCode → int
-
The hash code for this object.
no setterinherited
-
inputFormatters
→ List<
TextInputFormatter> -
See EditableText.inputFormatters
final
- isCursorAnimationEnabled → bool
-
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- keyboardAppearance → Brightness?
-
The appearance of the keyboard.
This setting is only honored on iOS devices.
If unset, defaults to ThemeData.brightness.
final
- keyboardType → TextInputType
-
See EditableText.keyboardType
final
- length → int
-
Displayed fields count. PIN code length.
final
- listenForMultipleSmsOnAndroid → bool
-
If true androidSmsAutofillMethod is not AndroidSmsAutofillMethod.none
Pinput will listen multiple sms codes, helpful if user request another sms code
final
- mainAxisAlignment → MainAxisAlignment
-
Defines how Pinput fields are being placed inside Row
final
- mouseCursor → MouseCursor?
-
See EditableText.mouseCursor
final
- obscureText → bool
-
Whether hide typed pin or not
final
- obscuringCharacter → String
-
Provide any symbol to obscure each Pinput pin
Recommended ●
final
- obscuringWidget → Widget?
-
IF obscureText is true typed text will be replaced with passed Widget
final
- onAppPrivateCommand → AppPrivateCommandCallback?
-
See EditableText.onAppPrivateCommand
final
-
onChanged
→ ValueChanged<
String> ? -
Called every time input value changes.
final
-
onClipboardFound
→ ValueChanged<
String> ? -
Fires when clipboard has text of Pinput's length
final
-
onCompleted
→ ValueChanged<
String> ? -
Fires when user completes pin input
final
- onLongPress → VoidCallback?
-
Triggered when a pointer has remained in contact with the Pinput at the
same location for a long period of time.
final
-
onSubmitted
→ ValueChanged<
String> ? -
See EditableText.onSubmitted
final
- onTap → VoidCallback?
-
Called when user clicks on PinPut
final
- onTapOutside → TapRegionCallback?
-
A callback to be invoked when a tap is detected outside of this TapRegion
The PointerDownEvent passed to the function is the event that caused the
notification. If this region is part of a group
then it's possible that the event may be outside of this immediate region,
although it will be within the region of one of the group members.
This is useful if you want to unfocus the Pinput when user taps outside of it
final
- pinAnimationType → PinAnimationType
-
Animation Type of each Pinput field
options:
none, scale, fade, slide, rotation
final
- pinContentAlignment → AlignmentGeometry
-
Defines how each Pinput field are being placed within the container
final
- pinputAutovalidateMode → PinputAutovalidateMode
-
Return null if pin is valid or any String otherwise
final
- preFilledWidget → Widget?
-
Widget that is displayed before field submitted.
final
- readOnly → bool
-
See EditableText.readOnly
final
- restorationId → String?
-
See TextField.restorationId
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scrollPadding → EdgeInsets
-
When this widget receives focus and is not completely visible (for example scrolled partially
off the screen or overlapped by the keyboard)
then it will attempt to make itself visible by scrolling a surrounding Scrollable, if one is present.
This value controls how far from the edges of a Scrollable the TextField will be positioned after the scroll.
final
- selectionControls → TextSelectionControls?
-
See EditableText.selectionControls
final
- senderPhoneNumber → String?
-
Optional parameter for Android SMS User Consent API.
final
- separator → Widget?
-
Builds a Pinput separator
final
-
separatorPositions
→ List<
int> ? -
Sets the positions where the separator should be shown
final
- showCursor → bool
-
Whether show cursor or not
Default cursor '|' or cursor
final
- slideTransitionBeginOffset → Offset?
-
Begin Offset of ever Pinput field when pinAnimationType is slide
final
- smsCodeMatcher → String
-
Used to extract code from SMS for Android Autofill if androidSmsAutofillMethod is enabled
By default it is PinputConstants.defaultSmsCodeMatcher
final
- submittedPinTheme → PinTheme?
-
Theme of the pin in submitted state
final
- textCapitalization → TextCapitalization
-
See EditableText.textCapitalization
final
- textInputAction → TextInputAction?
-
The type of action button to use for the keyboard.
final
- toolbarEnabled → bool
-
If true, paste button will appear on longPress event
final
- useNativeKeyboard → bool
-
Whether to use Native keyboard or custom one
when flag is set to false Pinput wont be focusable anymore
so you should set value of Pinput's TextEditingController programmatically
final
-
validator
→ FormFieldValidator<
String> ? -
Return null if pin is valid or any String otherwise
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< Pinput> -
Creates the mutable state for this widget at a given location in the tree.
override
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
override
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited