naeileun_pin_input 0.0.3

6자리 PIN(간편 비밀번호) 입력용 모달 바텀시트 위젯. 입력 완료 후 외부 검증 → controller로 success/error/close 제어.

naeileun_pin_input

A modal bottom sheet widget for entering a 6-digit PIN (easy password).
Once all 6 PIN digits are entered, the onInputComplete(code) callback is triggered immediately. Control success/failure/close timing externally through the PinInputController.

Preview

Features

• 6-digit PIN entry bottom sheet: SimpleVerificationBottomSheet
• Controller-based control: PinInputController
  • Use like a TextEditingController: text / clear() / addListener(), etc.
• Immediate completion callback: onInputComplete(code) (bottom sheet does NOT close automatically)
• Error UX
  • Calling controller.error(...): only the dots turn red + shake animation
  • Error text shown (default text can be overridden via message param)
• UI style customization: Inject custom styles for title/description/numbers/buttons/skip/error text/dots
• No extra dependencies: Does not use flutter_screenutil

Installation

In your pubspec.yaml:

dependencies:
  naeileun_pin_input: ^0.0.3

Quick start

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

Future<bool> validatePin(String code) async {
  // TODO: Add your server/local validation logic here
  return code == '123456';
}

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

  SimpleVerificationBottomSheet.show(
    context: context,
    controller: controller,
    title: 'Please enter your easy password',
    description: 'Please enter the 6-digit PIN.',
    errorText: 'The password is incorrect.',
    onInputComplete: (code) async {
      final ok = await validatePin(code);
      if (ok) {
        controller.success();
        controller.close(); // Close at desired timing
      } else {
        controller.error(
          message: 'The PIN is incorrect.',
          clearOnError: true,
        );
      }
    },
  );
}

Controller API

• Value
  • controller.text: 6-digit code entered (set at completion)
• Control
  • controller.success(): Success effect
  • controller.error({ message, clearOnError, revertAfter }): Error effect
  • controller.close(): Close the sheet
  • controller.clear(): Reset controller value

Error UX Rules

• When calling controller.error(...):
  • Only the dots are shown in red
  • Shake animation is triggered
  • Error text priority:
    • Provided message in controller.error(message: ...)
    • Otherwise, SimpleVerificationBottomSheet.errorText
• revertAfter only reverts the dot red color (error text stays)
• Error text is not hidden automatically
  • Cleared on next input, on delete, or calling controller.success()

Styling

Text styles

• titleStyle
• descriptionStyle
• numberTextStyle
• buttonTextStyle (shared between shuffle/delete buttons)
• skipTextStyle
• errorTextStyle

Dot styles

Customize dot color/size/spacing/shape via dotStyle: PinDotStyle(...).

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

Example

cd example
flutter pub get
flutter run