flutter-pinputlisted
Install: claude install-skill noory-code/noory-ai
# Flutter Pinput
A PIN/OTP code input widget for MFA authentication and SMS verification flows.
---
## Installation
```bash
flutter pub add pinput
```
---
## Quick Reference
### Basic Usage
```dart
import 'package:pinput/pinput.dart';
final pinController = TextEditingController();
final focusNode = FocusNode();
Pinput(
length: 6,
controller: pinController,
focusNode: focusNode,
onCompleted: (pin) {
print('Completed: $pin');
verifyOtp(pin);
},
onChanged: (value) {
print('Changed: $value');
},
)
```
### Custom Style
```dart
final defaultPinTheme = PinTheme(
width: 56,
height: 56,
textStyle: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey[300]!),
),
);
final focusedPinTheme = defaultPinTheme.copyWith(
decoration: defaultPinTheme.decoration!.copyWith(
border: Border.all(color: Colors.blue, width: 2),
),
);
final submittedPinTheme = defaultPinTheme.copyWith(
decoration: defaultPinTheme.decoration!.copyWith(
color: Colors.grey[100],
),
);
final errorPinTheme = defaultPinTheme.copyWith(
decoration: defaultPinTheme.decoration!.copyWith(
border: Border.all(color: Colors.red),
),
);
Pinput(
length: 6,
controller: pinController,
defaultPinTheme: defaultPinTheme,
focusedPinTheme: focusedPinTheme,
submittedPinTheme: submittedPinTheme,
errorPinTheme: errorPinTheme,
pinput