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

multi_masked_formatter 표지
패키지 상세v1.0.0

multi_masked_formatter

다중 마스크 텍스트 입력 포맷터 플러터 플러그인입니다. 전화번호, 생년월일 입력에 유용합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
2.3천
좋아요
13
Pub 점수
150

패키지 설치

flutter pub add multi_masked_formatter

패키지 개요

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

다중 마스크 텍스트 입력 형식을 가능하게 하는 플러터 플러그인으로 전화번호 및 생년월일과 같은 구조화된 데이터 입력에 이상적입니다. 사용자 정의 가능한 패턴과 함께 동적 마스킹을 지원하여 모든 플랫폼에서 일관되고 사용자 친화적인 형식으로 데이터를 입력할 수 있도록 합니다. 사용자가 입력할 때 자동으로 마스크가 적용되어 입력 오류를 줄이고 UX를 향상시킵니다. 크로스플랫폼 사용을 위해 설계되었으며 Android, iOS, Web, macOS, Windows, Linux에서 원활하게 작동합니다.

사용 사례

  • 국가별 형식을 갖춘 전화번호 입력
  • 표준 날짜 마스크를 사용한 생년월일 입력
  • 신용카드 번호 형식화
  • 사용자 정의 숫자 또는 알파벳 숫자 입력 패턴
  • 실시간 피드백을 통한 폼 검증
  • 일관된 형식이 필요한 다중 필드 폼 입력

주요 기능

  • 여러 마스크 패턴을 지원
  • 입력 중 동적 마스크 적용
  • 크로스 플랫폼 호환성
  • 사용자 지정 가능한 자리 표시자 및 구분 문자
  • 실시간 입력 검증
  • TextFormField과의 간편한 통합

적합한 대상

  • 구조화된 입력 요구사항을 가진 폼을 구축하는 개발자
  • 국제 전화 번호 지원이 필요한 앱
  • 정확한 날짜/숫자 입력이 필요한 헬스케어 또는 금융 앱
  • 사용자 경험을 중시하는 애플리케이션으로 입력 명확성을 우선시
  • 다중 플랫폼 Flutter 앱을 개발하는 팀

고려 사항

  • 복잡한 마스크 로직을 위해 신중한 구성이 필요할 수 있습니다
  • 많은 동시 포메터 사용 시 성능 영향
  • 마스크 준수 외에 내장된 오류 처리 기능은 제한적
  • 슬라이더나 피커와 같은 텍스트가 아닌 입력 유형에는 적합하지 않습니다
  • 일관성을 위해 모든 대상 플랫폼에서 테스트가 필요합니다

원본 README

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

multi_masked_formatter

Multple Masked TextInputFormatter Flutter plugin. It is useful for entering phone numbers, date of birth.

Getting Started

Dependency
dependencies:
  multi_masked_formatter: ^1.0.0
Import
import 'package:multi_masked_formatter/multi_masked_formatter.dart';
Example
TextField(
  inputFormatters: [
    MultiMaskedTextInputFormatter(
        masks: ['xxx-xxxx-xxxx', 'xxx-xxx-xxxx'], separator: '-')
  ],
  autofocus: true,
  keyboardType: TextInputType.number,
  decoration:
      InputDecoration(
        labelText: 'PhoneNumber',
        hintText: '010-123-4567 or 010-1234-5678'),
);
  
  
TextField(
  inputFormatters: [
    MultiMaskedTextInputFormatter(
        masks: ['xx.xx.xx', 'xxxx.xx.xx'], separator: '.')
  ],
  autofocus: true,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
      labelText: 'Date of birth', hintText: '99.02.20 or 1999.02.20'),
);

카테고리

소스 저장소

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

아직 데이터가 없습니다.