TechLog
Back to Projects
Flutter PackagesActive

Flutter OTP Widget

A highly customizable OTP text field widget for Flutter with multiple styles and themes

flutterdart

Links

githubgithubpub.devpub.dev

Pub Version License

Overview

Flutter OTP Widget is a Flutter package that makes it easy to implement OTP (One-Time Password) and PIN input UIs. It provides various input field styles for scenarios requiring per-character input, such as verification codes and PIN numbers, without repetitive custom implementations.

Key Features

  • 3 Field Styles: Box (bordered), Underline (minimalist), and Circle (round) styles
  • Flexible Theming: Light/dark presets with fully customizable theme support
  • Input Type Control: Number-only, text-only, and alphanumeric modes
  • Secure Input: Password/PIN masking with customizable obscuring character
  • Smart Navigation: Auto-advance to next field, backspace to previous, arrow key navigation
  • State Management: Error state styling, disabled state, and auto-focus support
  • Center Spacing Layout: centerSpacing enables 3-3 split layouts

Screenshots


Box Style
Underline Style
Circle Style

Secure PIN Entry
Error State

Supported Platforms

Android, iOS, Web, macOS, Windows, Linux — all 6 platforms are supported.

Technical Highlights

  • Zero External Dependencies: Built with pure Flutter/Dart without any third-party packages, keeping it lightweight and conflict-free.
  • Decoration Builder Pattern: FieldDecorationBuilder generates InputDecoration per field style (Box, Underline, Circle), making style extensions straightforward.
  • Theme Copy Pattern: OTPTheme.copyWith() enables partial customization based on existing presets.
  • External Controller/FocusNode Management: Controllers and focus nodes are injected externally, integrating naturally with any state management solution (Riverpod, Bloc, Provider, etc.).
  • Keyboard Navigation Logic: Fine-grained keyboard event handling for Tab, Shift+Tab, and arrow keys ensures accessibility.

Why It Stands Out

Most OTP/PIN input packages in Flutter are limited to specific styles or carry excessive dependencies. flutter_otp_widget provides three core styles with full theme customization and zero external dependencies, while keeping the API intuitive. Its design of externally injecting controllers makes it state-management agnostic, and full 6-platform support means it works out of the box for cross-platform projects.

Comments