搜尋套件、儲存庫與 APP 分類

pin_input_text_field 封面
套件詳情v4.5.3

pin_input_text_field

一個 textField 小部件,用於以純 Dart 編寫的不同樣式 PIN 顯示,無需額外依賴。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
22.7萬
喜歡數
160
Pub 分數
160

安裝套件

flutter pub add pin_input_text_field

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個使用純 Dart 編寫的可自定義 PIN 或 OTP 輸入欄位的 Flutter 小部件,無需外部依賴。它為使用者輸入數字代碼提供簡潔直覺的介面,支援多種樣式選項以及在欄位間自動聚焦等順暢的使用者互動。非常適合需要一次性密碼或安全代碼輸入的驗證流程。

適用情境

  • 一次性密碼 (OTP) 輸入
  • 用於登入的安全PIN輸入
  • 多位數驗證表單
  • 付款代碼輸入
  • 帳戶恢復工作流程
  • 生物辨識驗證提示

主要特色

  • 純 Dart 實現
  • 無外部依賴
  • 可自訂樣式
  • 欄位間的自動對焦
  • 支援鍵盤輸入
  • 跨平台響應式設計

適合對象

  • 驗證畫面
  • 雙因素驗證
  • 安全表單輸入
  • 跨平台應用
  • 簡單的數字輸入介面
  • 開發者避免使用第三方程式庫

使用建議

  • 僅限數字輸入
  • 無內建驗證
  • 需要手動處理提交邏輯
  • 不適合長文字輸入
  • 不支援特殊字元
  • 最小化內建輔助功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

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.

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.

All built-in decorations reserve 8 logical pixels between the pin area and the validation error text by default. Configure the spacing on the decoration:

BoxLooseDecoration(
  errorTextSpacing: 16, // Defaults to 8 when omitted.
  strokeColorBuilder: const FixedColorBuilder(Colors.black),
)
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.

Preparing a release

Start with a dry run from an up-to-date checkout:

./scripts/prepare_release.sh --dry-run
./scripts/prepare_release.sh patch

The helper supports patch, minor, major, and an explicit version such as 4.5.3. It refreshes remote tags, refuses a latest tag that cannot be matched to the current history, and handles a pubspec.yaml version that is newer than the tagged history. A real patch release requires a clean master matching origin/master; it writes the root pubspec.yaml and CHANGELOG.md, commits and pushes them, pushes the next bare version tag, and creates the GitHub Release with generated notes. It never changes example/pubspec.yaml.

release.yml creates a GitHub Release for either bare or v SemVer tags, and publish.yml publishes bare SemVer tags to pub.dev through the pub.dev environment. Configure pub.dev's GitHub Actions publishing for this repository before the first automated publish.

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.

所屬分類

原始碼儲存庫

使用此套件的專案