naeileun_pin_input

6자리 PIN(간편 비밀번호) 입력을 위한 모달 바텀시트 위젯입니다.
PIN이 6자리 모두 입력되면 즉시 onInputComplete(code)로 코드를 전달하고, 외부에서 PinInputController로 성공/실패/닫기 타이밍을 제어합니다.

Preview

Features

• 6자리 PIN 입력 바텀시트: SimpleVerificationBottomSheet
• 컨트롤러 기반 제어: PinInputController
  • text / clear() / addListener() 등 TextEditingController처럼 사용
• 입력 완료 즉시 콜백: onInputComplete(code) (시트 자동 닫힘 없음)
• 실패 UX
  • controller.error(...) 호출 시: 도트(dot)만 빨간색 + shake
  • 에러 텍스트 표시(기본 텍스트 + 호출 시 message 오버라이드)
• UI 스타일 커스터마이징: 타이틀/설명/숫자/버튼/스킵/에러텍스트/도트 스타일 주입
• 추가 의존성 없음: flutter_screenutil 미사용

Installation

pubspec.yaml:

dependencies:
  naeileun_pin_input: ^0.0.1

Quick start

import 'package:flutter/material.dart';
import 'package:naeileun_pin_input/pin_input.dart';

Future<bool> validatePin(String code) async {
  // TODO: 서버/로컬 검증 로직
  return code == '123456';
}

void openPinSheet(BuildContext context) {
  final controller = PinInputController();

  SimpleVerificationBottomSheet.show(
    context: context,
    controller: controller,
    title: '간편 비밀번호를 입력해 주세요',
    description: '6자리 숫자를 입력해주세요.',
    errorText: '비밀번호가 올바르지 않습니다.',
    onInputComplete: (code) async {
      final ok = await validatePin(code);
      if (ok) {
        controller.success();
        controller.close(); // 원하는 타이밍에 닫기
      } else {
        controller.error(
          message: 'PIN이 틀렸어요',
          clearOnError: true,
        );
      }
    },
  );
}

Controller API

• 값
  • controller.text: 입력 완료된 6자리 코드(완료 시점에 세팅)
• 제어
  • controller.success(): 성공 효과
  • controller.error({ message, clearOnError, revertAfter }): 실패 효과
  • controller.close(): 시트 닫기
  • controller.clear(): 컨트롤러 값 초기화

Error UX 규칙

• controller.error(...) 호출 시:
  • 도트만 빨간색으로 표시됩니다.
  • shake 애니메이션이 실행됩니다.
  • 에러 텍스트 우선순위:
    • controller.error(message: ...)의 message
    • 없으면 SimpleVerificationBottomSheet.errorText
• revertAfter는 도트 빨간 표시만 원복합니다.
• 에러 텍스트는 자동으로 사라지지 않습니다.
  • 다음 입력(숫자 입력) 또는 삭제를 누르거나, controller.success() 호출 시 해제됩니다.

Styling

Text styles

• titleStyle
• descriptionStyle
• numberTextStyle
• buttonTextStyle (재배열/삭제 버튼 공통)
• skipTextStyle
• errorTextStyle

Dot styles

dotStyle: PinDotStyle(...)로 도트의 색상/크기/간격/shape를 직접 지정할 수 있습니다.

• filledColor, emptyColor
• errorFilledColor, errorEmptyColor
• size, spacing, shape

Example

cd example
flutter pub get
flutter run

Libraries

pin_input

theme/custom_theme