FormattedInput#

전화번호·신용카드·날짜처럼 고정된 형식을 가진 데이터를 입력받는 세그먼트형 마스크 입력 컴포넌트입니다. 정적 구분자와 편집 가능한 필드가 [parts]로 정의됩니다. .phone / .creditCard / .date 팩토리로 흔한 마스크를 바로 사용할 수 있습니다.

Live Preview#

class FormattedInputDefaultExample extends StatelessComponent {
  const FormattedInputDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return FormattedInput.phone(
      onChanged: (value) => print('Phone: $value'),
    );
  }
}

class FormattedInputDefaultExample extends StatelessWidget {
  const FormattedInputDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return FormattedInput.phone(
      onChanged: (value) => debugPrint('Phone: $value'),
    );
  }
}

class FormattedInputCreditCardExample extends StatelessComponent {
  const FormattedInputCreditCardExample({super.key});

  @override
  Component build(BuildContext context) {
    return FormattedInput.creditCard(
      onChanged: (value) => print('Card: $value'),
    );
  }
}

class FormattedInputCreditCardExample extends StatelessWidget {
  const FormattedInputCreditCardExample({super.key});

  @override
  Widget build(BuildContext context) {
    return FormattedInput.creditCard(
      onChanged: (value) => debugPrint('Card: $value'),
    );
  }
}

class FormattedInputDateExample extends StatelessComponent {
  const FormattedInputDateExample({super.key});

  @override
  Component build(BuildContext context) {
    return FormattedInput.date(
      onChanged: (value) => print('Date: $value'),
    );
  }
}

class FormattedInputDateExample extends StatelessWidget {
  const FormattedInputDateExample({super.key});

  @override
  Widget build(BuildContext context) {
    return FormattedInput.date(
      onChanged: (value) => debugPrint('Date: $value'),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 전화번호·카드번호·날짜 등 형식이 정해진 입력
• 입력 위치에 구분자((, ), /, -)가 자동으로 표시되어야 하는 경우

대신 다른 컴포넌트를 사용하세요:

• TextField: 자유 형식 텍스트 입력
• InputOtp: 일회용 인증 코드 입력

기본 사용법 (Basic Usage)#

// 전화번호 마스크
FormattedInput.phone(
  onChanged: (value) => print(value),
)

// 커스텀 마스크
FormattedInput(
  parts: const [
    CoreFormattedInputPart.editable(length: 2, pattern: r'\\d'),
    CoreFormattedInputPart.static('/'),
    CoreFormattedInputPart.editable(length: 2, pattern: r'\\d'),
  ],
  onChanged: (value) => print(value),
)

// 전화번호 마스크
FormattedInput.phone(
  onChanged: (value) => print(value),
)

// 커스텀 마스크
FormattedInput(
  parts: const [
    CoreFormattedInputPart.editable(length: 2, pattern: r'\\d'),
    CoreFormattedInputPart.static('/'),
    CoreFormattedInputPart.editable(length: 2, pattern: r'\\d'),
  ],
  onChanged: (value) => print(value),
)

Props / Parameters#

팩토리 생성자#

• FormattedInput.phone — (___) ___-____
• FormattedInput.creditCard — ____ ____ ____ ____
• FormattedInput.date — __/__/____

동작 스펙 (Behavior)#

인터랙션#

• 자동 포커스 이동: 편집 세그먼트가 가득 차면 다음 세그먼트로 포커스 이동
• 패턴 제한: pattern이 지정된 세그먼트는 일치하는 문자만 입력 허용
• enabled가 false이면 비활성

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• TextField: 자유 형식 텍스트 입력
• InputOtp: OTP 코드 입력