pin_input_text_field 4.5.2
SDKflutter
Platformandroidioswindowslinuxmacosweb
A textField widget to help display different style pin written in pure dart, no extra dependency.
pin_input_text_field
中文 PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports.
Notes 🚨
please use 4.4.1 for flutter version is below 3.7.0
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;
Known Issue 🥶
The PinEditingController listener will execute more than once when programmatically set text, you can filter some duplicate values in your code.
License
Copyright 2019 Tino Guo.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.