A textField widget to help display different style pin

Overview

pub package GitHub GitHub top language

pin_input_text_field

中文版点我
PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports.

Feature 🌟

  • allow you customized the shape, any!
  • built-in 4 commonly used pin styles of shape
  • obscure support
  • solid support
  • enterColor support
  • cursor support
  • support all the textField properties theoretically
  • Flutter all platform support

Example 🦀

Thanks to the Flutter Web, you can enjoy the preview by website without any installation.

Decoration

UnderlineDecoration

BoxLooseDecoration

BoxTightDecoration

CircleDecoration

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 TextInputType.phone Just like TextField's keyboardType, the default is TextInputType.phone
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
onChanged (String pin){} Same as TextField's onChanged
textCapitalization TextCapitalization.words Same as TextField's textCapitalization
cursor Cursor.disabled() The cursor of the pin, default is not enabled

FormField

Instead of using PinInputTextField, using PinInputTextFormField to control validate.

ObscureStyle

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

Notice ⚠️

Version 3.2.0

Cursor property would override HintText due to the conflict display in same paint position.

If you have any idea, please make a Pull Request.

Known Issue 🥶

The PinEditingController listener will execute more than once when programmatically set text, you can filter some duplicate values in your code.

Comments
  • Set pin code from code

    Set pin code from code

    I'm working on a plugin to autofill sms code, I want to use your widget as textField but for now it doesn't support setting a pin from code. Would it be possible to add this ?

    I can do a PR if you don't have time but I want to be sure you'll accept it first :)

    Thanks !

    enhancement 
    opened by jaumard 10
  • Fixed `Cursor` overriding `HintText`

    Fixed `Cursor` overriding `HintText`

    Since the introduction of a Cursor in version 3.2.0, if enabled said Cursor would override any HintText due to them being displayed in the same location on screen (both centered in the box). This PR addresses that issue and proposes a solution that can display both a Cursor and HintText at the same time.

    premises

    • Cursor and HintText should coexist and be displayed at the same time
    • for visual integrity, entering a character and changing visual focus to the next pin field should lead to only minimal changes
    • HintText should not have a different position with/without Cursor
    • HintText should be displayed in the center of the box
    • Cursor should not be displayed in the center of the box if a HintText is also present
    • Cursor should be displayed in front of HintText or behind
    • Cursor typically is (on input fields with left-justified text) after already typed characters
    • HintText typically is displayed only when no characters have been entered yet
    • Cursor should be displayed in front of the HintText at least with TextDirection.ltr

    proposed fix

    • for minimal disruption in the existing codebase, this fix proposes to add an optional positional parameter Offset offset with a default value of Offset.zero
    • the offset would be added to the location given by rect prior to drawing
    • on TextDirection.ltr the Cursor is drawn to the left of HintText, on TextDirection.rtl it is drawn to the right

    side effects

    • a TextDirection parameter was added
    enhancement 
    opened by IVLIVS-III 8
  • scrollPadding not available

    scrollPadding not available

    Hi, scrollPadding is not available with PinInputTextField() As the OTP field is hiding behind a keyboard when using SingleChildScrollView. Can you please add support for it?

    bug wontfix 
    opened by rahuldange09 8
  • Date of Birth component

    Date of Birth component

    I'd like to create a date of birth component similar to the app Badoo - DD/MM/YYYY

    This repo seems nearly perfect for it, except I'm not sure it supports 2 things I need: -Custom Spaces - Spaces between DD, MM and YYYY. -Text Hints - Each digit should have a hint until it's replaced with a digit. (e.g. DD/MM/YYYY -> typed 2 -> 2D/MM/YYYY)

    For the spaces, I considered having 3 different components in a row, but at the very least backspace between components will like be an issue.

    I suppose I could do it more easily with text masking, but it's just not as slick.

    Are there any suggestions on how I can pull it off using this repo Otherwise, if it's not currently possible, would you please take it as a request to add functionalities that'd allow implementing it?

    enhancement 
    opened by royibernthal 7
  • FormField variation for the PinInputTextField

    FormField variation for the PinInputTextField

    IMO, it would be good to have the FormField variation, which can add support for validator, and onSaved, also validate(), and save() method from GlobalKey.currentState

    opened by alyyasser 6
  • [feature] add autofillHints and deprecate autovalidate with autovalidateMode

    [feature] add autofillHints and deprecate autovalidate with autovalidateMode

    ~Use AutoFillHints.oneTimeCode by default to enable better platform support for OTP code inputs.~

    ~This can be controlled via enableCodeAutofill, which defaults to true.~

    ~See: https://api.flutter.dev/flutter/services/AutofillHints/oneTimeCode-constant.html~

    Update

    For more flexibility this PR just exposes autofillHints on the underlying TextField so that users can add whatever they want without any default behaviour.

    I've also added a proper deprecation notice for autovalidate and exposed it's replacement (autovalidateMode) which defaults to the same behaviour.

    enhancement 
    opened by daveols 3
  • Unable to change textborder for PinFieldAutoFill when global theme for textfield defined

    Unable to change textborder for PinFieldAutoFill when global theme for textfield defined

    Hi,

    I have already raised this issue via one more package which makes use of pin_input_text_field Original Issue on the package I am using

    I was told by the author of sms_autofill package that this issue has to be first fixed in pin_input_text_field.


    I am using the PinFieldAutoFill widget for OTP functionality. But, because of the global theme, I defined it is effecting this Widget too.

    Decoration Defined for InputDecoration

    InputDecorationTheme inputDecorationTheme() {
      OutlineInputBorder outlineInputBorder = OutlineInputBorder(
        borderRadius: BorderRadius.circular(28),
        borderSide: BorderSide(color: bsTextColor),
        gapPadding: 10,
     );
     return InputDecorationTheme(
        contentPadding: const EdgeInsets.symmetric(
           horizontal: 42,
           vertical: 20,
        ),
        enabledBorder: outlineInputBorder,
        focusedBorder: outlineInputBorder,
        border: outlineInputBorder,
     );
    }
    

    Inside the MaterialApp I've defined it as following

    theme: ThemeData(
        inputDecorationTheme: inputDecorationTheme(),
    )
    

    But this is effecting the PinFieldAutoFill widget with BoxLooseDecoration and causes something like below

    image

    See those grey lines above and below after each text box.. How can override the parent theme for this widget?

    bug 
    opened by kshkrao3 3
  • implement onChanged

    implement onChanged

    既可传controller也可使用onChanged,不强制要求使用controller来监听或控制行为。

    /// The callback will execute field changed.
    final ValueChanged<String> onChanged;
    ......
    /// {@macro flutter.widgets.editableText.onChanged}
    ///
    /// See also:
    ///
    ///  * [inputFormatters], which are called before [onChanged]
    ///    runs and can validate and change ("format") the input value.
    ///  * [onEditingComplete], [onSubmitted], [onSelectionChanged]:
    ///    which are more specialized input change notifications.
    final ValueChanged<String> onChanged;
    
    enhancement 
    opened by AlexV525 3
  • 3.1.1 upgrade to 3.3.0 crash

    3.1.1 upgrade to 3.3.0 crash

    i got this log, how can i fix it, thanks. ../../../Library/Android/flutter/.pub-cache/hosted/pub.flutter-io.cn/pin_input_text_field-3.3.0/lib/src/widget/pin_widget.dart:402:5: Error: Type 'AutovalidateMode' not found. AutovalidateMode autovalidateMode = AutovalidateMode.disabled, ^^^^^^^^^^^^^^^^ ../../../Library/Android/flutter/.pub-cache/hosted/pub.flutter-io.cn/pin_input_text_field-3.3.0/lib/src/widget/pin_widget.dart:402:5: Error: 'AutovalidateMode' isn't a type. AutovalidateMode autovalidateMode = AutovalidateMode.disabled, ^^^^^^^^^^^^^^^^ ../../../Library/Android/flutter/.pub-cache/hosted/pub.flutter-io.cn/pin_input_text_field-3.3.0/lib/src/widget/pin_widget.dart:402:41: Error: Getter not found: 'AutovalidateMode'. AutovalidateMode autovalidateMode = AutovalidateMode.disabled, ^^^^^^^^^^^^^^^^ ../../../Library/Android/flutter/.pub-cache/hosted/pub.flutter-io.cn/pin_input_text_field-3.3.0/lib/src/widget/pin_widget.dart:436:13: Error: No named parameter with the name 'autovalidateMode'. autovalidateMode: autovalidateMode, ^^^^^^^^^^^^^^^^

    bug wait for customer response 
    opened by DennisJu007 2
  • Fails while compling project

    Fails while compling project

    fails at pin_input_widget fails at line no. 489 textStyle: decoration.textStyle ?? themeData.textTheme.headline5, unable to find headline5 with existing flutter version Screenshot 2020-12-01 at 16 08 10

    question 
    opened by sourav-classklap 2
  • Compile error for List.empty()

    Compile error for List.empty()

    At Commit b0ae7ae247671e31ba4381d631f146d85448739e lib/src/decoration/pin_decoration.dart line 29 creates compile error.

    List.empty() create error at compiling for flutter 1.17.4 dart 2.8.4.

    bug 
    opened by gokcer 2
  • jump cursor to start pin after tap on pin number two or three in PWA

    jump cursor to start pin after tap on pin number two or three in PWA

    I am using your package and while working with it I noticed a bug in it, in the output of PWA when there are six boxes, if we fill the first box with a number and then press on the second box, the cursor will return to the first and It starts to be typed after the first number. This problem also occurs when the first and second boxes have values and we click on the third box, and it will not be a problem for other boxes. I tested the output on the mobile browser, which had this problem, but apparently this problem does not exist in the Windows browser. If needed, it is possible to send a sample video.

    wait for customer response 
    opened by AhmadFalahian 1
Owner
Tino
Android Engineer, Flutter follower, Rust Beginner, OpenWrt
Tino
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

FlutterCandies 1.1k Dec 30, 2022
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 741 Dec 30, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
Display all stand alone widgets in a nice UI

flutter_organized_widgets Display all stand alone widgets in a nice UI How to install Add to dependencies: flutter_organized_widgets: git: https

Norbert Kozsir 10 Nov 18, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 191 Dec 29, 2022
LoginUIDesign is login beautiful module. login module segregate in different steps on bases of data required.

LoginUiDesign You can Install and test latest LoginUiDesign app from below ?? LoginUIDesign is login beautiful module. login module segregate in diffe

Deepak Sharma 2 Nov 22, 2021
A Flutter plugin for iOS and Android for generating sign-in buttons for different social media account.

A Flutter plugin for iOS and Android for generating sign-in buttons for different social media account.

Julian Steenbakker 6 Nov 6, 2022
A flutter package to help you beautify your app popups.

flutter_beautiful_popup 中文 A flutter package to help you beautify your app popup, can be used in all platform.Live Demo. Preview: Getting Started Add

朱嘉伟 568 Dec 30, 2022
A package to help build customisable timelines in Flutter.

TimelineTile A package to help build customisable timelines in Flutter. Example You can access the example project for a Timeline Showcase. The Beauti

null 549 Jan 6, 2023
It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Bernardo Ferrari 372 Dec 22, 2022
modern e-commerce store built in flutter with help of GetX.

Shoe Commerce Modern looking shoe store app built in flutter and help of GetX :) Design source: https://www.figma.com/community/file/11473970061435204

ƳƠƲƧƠƑ 6 Nov 24, 2022
DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

null 582 Jan 4, 2023
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 434 Jan 7, 2023
Custom widget for Flutter

Flushbar Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackba

Andre Haueisen 899 Dec 30, 2022
flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Raouf Rahiche 271 Dec 30, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023
Flutter FoldingCell widget

Simple FoldingCell widget Simple folding cell widget, pass frontWidget and innerWidget to fold and unfold. Installation Add dependency in pubspec.yaml

Farrukh 513 Dec 30, 2022
Scratch card widget which temporarily hides content from user.

scratcher Scratch card widget which temporarily hides content from user. Features Android and iOS support Cover content with full color or custom imag

Kamil Rykowski 405 Dec 27, 2022