Flutter OTP Widget

개요

Flutter OTP Widget은 OTP(일회용 비밀번호) 및 PIN 입력 UI를 쉽게 구현할 수 있는 Flutter 위젯 패키지다. 인증 코드 입력, PIN 번호 입력 등 개별 문자 단위 입력이 필요한 상황에서 반복적인 커스텀 구현 없이 다양한 스타일의 입력 필드를 제공한다.

주요 기능

• 3가지 필드 스타일: Box(사각형), Underline(밑줄), Circle(원형) 스타일 제공
• 유연한 테마 시스템: 라이트/다크 프리셋 및 완전한 커스텀 테마 지원
• 입력 타입 제어: 숫자 전용, 문자 전용, 영숫자 혼합 모드
• 보안 입력: 비밀번호/PIN 모드에서 마스킹 처리, 마스킹 문자 커스터마이징 가능
• 스마트 네비게이션: 자동 다음 필드 이동, 백스페이스 이전 필드 복귀, 화살표 키 탐색
• 상태 관리: 에러 상태 스타일링, 비활성화 상태, 자동 포커스 지원
• 중앙 간격 레이아웃: centerSpacing으로 3-3 분리 레이아웃 구현 가능

스크린샷

지원 플랫폼

Android, iOS, Web, macOS, Windows, Linux — 6개 플랫폼 모두 지원한다.

기술적 특징

• 제로 외부 의존성: Flutter SDK 외 별도 패키지 의존 없이 순수 Flutter/Dart로 구현되어 가볍고 충돌 위험이 없다.
• 데코레이션 빌더 패턴: FieldDecorationBuilder를 통해 필드 스타일(Box, Underline, Circle)별 InputDecoration을 분리 생성하여 스타일 확장이 용이하다.
• 테마 복사 패턴: OTPTheme.copyWith()을 지원하여 기존 프리셋을 기반으로 부분 커스터마이징이 가능하다.
• 컨트롤러/포커스 노드 외부 관리: 컨트롤러와 포커스 노드를 외부에서 주입받아 어떤 상태 관리 솔루션(Riverpod, Bloc, Provider 등)과도 자연스럽게 통합된다.
• 키보드 네비게이션 로직: Tab, Shift+Tab, 화살표 키 등 세밀한 키보드 이벤트 처리로 접근성을 확보했다.

왜 주목할까?

Flutter에서 OTP/PIN 입력 위젯을 구현할 때 대부분의 패키지가 특정 스타일에 한정되거나 과도한 의존성을 포함하는 경우가 많다. flutter_otp_widget은 외부 의존성 없이 3가지 핵심 스타일과 완전한 테마 커스터마이징을 제공하면서도 API가 직관적이다. 컨트롤러를 외부에서 주입하는 설계 덕분에 상태 관리 방식에 구애받지 않고 프로젝트에 통합할 수 있으며, 6개 플랫폼 전체를 지원하여 크로스 플랫폼 프로젝트에서도 바로 활용할 수 있다.