mask_input_formatter

패키지 개요

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

지정된 마스크에 따라 사용자 입력을 자동으로 포맷하는 TextInputFormatter를 TextField 및 TextFormField에 제공하는 플러터 패키지입니다. 사용자가 입력할 때 동적으로 자리 표시자와 형식 문자를 삽입하여 전화번호, 날짜, ID 등의 데이터를 구조화된 방식으로 입력하도록 도와줍니다. 사용자 정의 마스크를 지원하며, 다양한 플랫폼에서 백스페이스 및 커서 이동을 올바르게 처리합니다. 특정 형식이 필요한 양식에서 입력 정확도와 사용자 경험을 향상시키는 데 이상적입니다.

사용 사례

국가 코드가 있는 전화번호 입력
구분 기호가 있는 날짜 입력
신용카드 번호 형식화
사용자 정의 숫자 또는 알파벳 수치 패턴
입력 구조를 통한 폼 검증
동적 필드 형식 지정

주요 기능

사용자 정의 마스크를 지원합니다
백스페이스 및 커서 위치 조작
크로스 플랫폼 호환성
실시간 입력 형식 지정
TextField 및 TextFormField와의 간편한 통합
유연한 자리 표시자 및 구분 기호 구성

적합한 대상

구조화된 데이터가 필요한 폼 입력
입력 검증이 있는 모바일 및 웹 애플리케이션
사용자 친화적인 데이터 입력 인터페이스
간단한 마스킹 솔루션을 찾는 개발자
일관된 입력 패턴이 필요한 앱

고려 사항

충돌을 피하기 위해 마스크 정의에 주의가 필요할 수 있습니다
복잡한 동적 마스크에 대한 제한된 지원
고주파 입력에 대한 성능 영향
텍스트가 아닌 입력 유형에는 적합하지 않습니다
붙여넣기 작업과 같은 예외 케이스를 수동으로 처리해야 합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

The package provides TextInputFormatter for TextField and TextFormField which format the input by a given mask.

Demo

Usage

Add dependency.

Run this command:

With Flutter:

$ flutter pub add mask_input_formatter

or add following package in your pubspec.yaml file inside the dependencies: section.

dependencies:
  mask_input_formatter: ^0.0.3

Importing the library:

import 'package:mask_input_formatter/mask_input_formatter.dart';

Create a mask formatter:

MaskInputFormatter myFormatter =  MaskInputFormatter(mask: '(AA) #####');

Set with TextField/TextFormField:

TextFormField(
    inputFormatters: [myFormatter],
    decoration: InputDecoration(
        hintText: "(AB) 12345",
    )
) // TextFormField

Result

// Input  --> JK75757
// Output --> (JK) 75757 set formatted text on TextField

Other Mask

You can use the mask whatever you defined in formatter:

MaskInputFormatter dateFormatter =  MaskInputFormatter(mask: '##/##/####');
// --> 26/05/2021
MaskInputFormatter phoneFormatter =  MaskInputFormatter(mask: '+# (###) ###-####');
// --> +1 (234) 567-8901
MaskInputFormatter numberFormatter =  MaskInputFormatter(mask: 'AAA-###', textAllCaps: true);
// --> XYZ-789

Check example folder for code sample

Note

In last example. --> (AAA-###)

'A' character will allow only letters from A-Z.
'#' character will allow only numbers.
And other characters and symbols will be added as mask.

Contributing

Suggestions and Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Developer Team:

Amjad Jamali & team members ( Kamran Khan, Hina Hussain, Faiza Farooqui ) :tada:

License

Apache 2.0

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