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, JustIndexedWidgetBuilder? separatorBuilder, 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})
Creates a PinPut widget
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
Whether to enable cursor animation
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
separatorBuilder → JustIndexedWidgetBuilder?
Builds a Pinput separator If null SizedBox(width: 8) will be used
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}) → 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