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

easy_mask 표지
패키지 상세v2.0.1

easy_mask

TextField, TextFormField 및 문자열용으로 간편하고 강력한 마스크입니다. 다중 마스크 지원, 통화용 역방향 마스크 및 플레이스홀더가 있습니다. 사용자의 커서를 제어합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
2.8만
좋아요
159
Pub 점수
150

패키지 설치

flutter pub add easy_mask

패키지 개요

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

Easy Mask는 강력한 마스킹 기능을 갖춘 Flutter 패키지로, 텍스트 필드 및 문자열의 입력 형식을 간단하게 만듭니다. 여러 가지 마스크, 통화 형식을 위한 역방향 마스킹, 사용자 정의 가능한 플레이스홀더를 지원합니다. 사용자가 입력할 때 커서 위치를 지능적으로 관리하여 원활한 타이핑 경험을 보장합니다. 전화번호, 날짜, 금융 값과 같은 구조화된 입력이 필요한 양식에 적합하며, 사용자가 입력하는 동안 자동으로 포맷을 적용함으로써 사용성을 향상시킵니다.

사용 사례

  • 구조화된 데이터를 가진 폼 입력
  • 통화 및 숫자 형식 지정
  • 날짜 및 전화번호 마스크
  • 실시간 입력 검증
  • 동적 마스크 전환
  • 플레이스홀더 관리

주요 기능

  • 다중 마스크 지원
  • 통화용 반전 마스크
  • 자동 커서 제어
  • 사용자 정의 가능한 자리 표시자
  • 실시간 형식
  • 크로스 플랫폼 호환성

적합한 대상

  • 양식 중심 앱을 개발하는 개발자
  • 포맷된 입력 필드가 필요한 앱
  • 금융 또는 데이터 입력 애플리케이션
  • 일관된 입력 패턴을 필요로 하는 프로젝트
  • 텍스트 입력에서 사용자 경험을 우선시하는 팀

고려 사항

  • 복잡한 마스크 로직을 주의 깊게 다뤄야 할 수 있습니다
  • 기본 예제 외에 문서가 제한적
  • 많은 활성 마스크로 인한 성능 영향 가능성
  • 비텍스트 입력 시나리오에는 적합하지 않음
  • 모든 대상 플랫폼에서 테스트가 필요합니다

원본 README

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

Easy Mask

Easy way to apply a mask to Flutter's TextFields and on Strings

To use it, you only need to pass EasyMask on TextField's parameter inputFormatters.

The Easy Mask cares about user's cursor position, to make fluid it's usability.

Supports Multi Mask based on masks length.

Supports Placeholders.

Sample

Usage

Simplest Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '99? (99) 999 99-99') ],
  ),
  TextField(
    inputFormatters: [ TextInputMask(mask: '999.999.999-99', reverse:true ) ],
  )
...

Formatting a String

import package:easy_mask/text_input_mask.dart
...
  String text = '432516565';
  MagicMask mask = MagicMask.buildMask('\\+99 (99) 99999-9999');
  String formattedString = mask.getMaskedString(text);
...
Multi Mask Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: ['999.999.999-99', '99.999.999/9999-99'] ],
  ),
  TextField(
    inputFormatters: [ TextInputMask(mask: ['(99) 9999 9999', '(99) 99999 9999'], reverse:true ) ],
  )
...
PlaceHolder Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '999.999.999-99', placeholder: '_', maxPlaceHolders: 11 ],
  ),
...
Pretty Currency Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '\$! !9+,999.99', placeholder: '0', maxPlaceHolders: 3, reverse: true],
  ),
...
Possible parameters
  • mask can be a String or an List with the wanted masks pattern.
  • reverse is a boolean that indicates if the user will type from right to left. Used normally on currency TextFields.
  • maxLength is an Integer that limits the maximum size of returned masked text.
  • placeholder is a String character to be used as placeholder on untyped characters. Must define maxPlaceHolders
  • maxPlaceHolders an integer to map how many possible places it would be placed. Typed characters consumes a position from this counter.
Mask Patterns Characters

9 - is used to allow a number from 0-9

A - is used to allow a letter from a-z or A-Z

N - is used to allow a number or letter from 0-9, a-z or A-Z

X - is used to allow any character

Those tokens 9,A,N and X can be followed by one following modifier

? - indicates that is optional

+ - indicates that must have at least 1 or more repetitions

* - indicates that can have 0 or more repetitions

\ - is used as scape

*Any character that is interpreted as letter to be placed, can be followed by modifier **

! - Used to force print it, when it has at least 1 character typed on TextField.

Any other letters will be displayed on masking.

Examples of String masks

(card number) 999 999 999 999

(us cellphone) \+1 (999) 999 99 99

(currency) $! !9+,999.99

(version) 99?9?.99?9?.99?9?

(RG brazilian document) 99.999.999-N

카테고리

소스 저장소

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

아직 데이터가 없습니다.