패키지, 저장소 및 앱 카테고리 검색

pin_input_text_field 표지
패키지 상세v4.5.3

pin_input_text_field

순수한 Dart로 작성된 다양한 스타일의 PIN을 표시하는 데 도움이 되는 textField 위젯이며, 추가 종속성 없음.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
22.7만
좋아요
160
Pub 점수
160

패키지 설치

flutter pub add pin_input_text_field

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

외부 종속성 없이 순수한 Dart로 작성된 사용자 정의 가능한 PIN 또는 OTP 입력 필드를 생성하기 위한 플러터 위젯입니다. 숫자 코드 입력을 위한 깔끔하고 직관적인 인터페이스를 제공하며, 다양한 스타일 옵션과 필드 간 자동 포커스와 같은 부드러운 사용자 상호작용을 지원합니다. 일회용 비밀번호나 보안 코드 입력이 필요한 인증 흐름에 적합합니다.

사용 사례

  • 일회용 비밀번호 (OTP) 입력
  • 로그인을 위한 안전한 PIN 입력
  • 다자리 검증 양식
  • 결제 코드 입력
  • 계정 복구 워크플로우
  • 생체 인증 프롬프트

주요 기능

  • 순수한 Dart 구현
  • 외부 종속성 없음
  • 사용자 정의 스타일
  • 필드 간 자동 포커스
  • 키보드 입력을 지원합니다
  • 다양한 플랫폼 간 반응형 디자인

적합한 대상

  • 인증 화면
  • 이중 인증
  • 보안 폼 입력
  • 크로스 플랫폼 앱
  • 간단한 숫자 입력 인터페이스
  • 제3자 라이브러리를 피하는 개발자

고려 사항

  • 숫자 입력만 가능
  • 내장된 검증 없음
  • 제출 로직을 수동으로 처리해야 합니다
  • 긴 텍스트 입력에 적합하지 않습니다
  • 특수 문자 지원 없음
  • 최소한의 내장 접근성 기능

원본 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.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트