Hello Flutter Devs, Today I am going to help you secure your Flutter apps with the 10 best Flutter PIN, OTP, and password field packages.
Creating smooth and secure authentication experiences can be a tricky part of app development, but Flutter makes it easier with some incredible packages. So, let’s talk about the best 10 Flutter PIN, OTP, and Password Field packages. Grab a cup of coffee, and let me guide you through these awesome tools—one at a time—in simple and friendly language. Trust me, it’ll be worth it!
Table of Contents
1. pinput
Pinput is the crowned king when it comes to PIN input fields. With its customizable and beautiful UI, it fits like a glove in any app.
What I Love About It:
It’s sleek, modern, and highly customizable. Plus, animations—who doesn’t love some subtle animations?
Pros:
Fully customizable.
Smooth animations.
Error indication and validation built in.
Cons:
Slightly steep learning curve for beginners.
Example:
Pinput(
length: 6,
defaultPinTheme: PinTheme(
width: 56,
height: 56,
textStyle: TextStyle(
fontSize: 20,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey),
),
),
focusedPinTheme: PinTheme(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.blue),
),
),
submittedPinTheme: PinTheme(
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.blueAccent),
),
),
onChanged: (pin) {
print("PIN changed: \$pin");
},
onCompleted: (pin) {
print("Entered PIN: \$pin");
},
errorTextStyle: TextStyle(
color: Colors.red,
fontSize: 14,
),
validator: (pin) {
if (pin == null || pin.length < 6) {
return "Please enter a valid 6-digit PIN";
}
return null;
},
);
Pro Tip: Use the onComplete callback to handle PIN submission like a pro.
2. smart_auth
What I Love About It: It’s like the Sherlock Holmes of authentication—intelligent and efficient.
Pros:
Supports biometric authentication.
Secure PIN storage.
Cross-platform compatibility.
Cons:
Requires native configuration.
Example:
SmartAuth.authenticate(
reason: "Authenticate to access the app",
biometricOnly: true,
onError: (error) {
print("Authentication failed: \$error");
},
).then((result) {
if (result == AuthResult.success) {
print("Authentication successful!");
// Navigate to the next screen or unlock features
} else {
print("Authentication canceled or failed.");
}
}).catchError((e) {
print("An error occurred during authentication: \$e");
});
Pro Tip: Combine it with a PIN input field for double-layer security.
3. flutter_otp_text_field
OTP inputs made simple and elegant—that’s flutter_otp_text_field for you.
What I Love About It: It’s lightweight and does exactly what it’s supposed to do. No frills, just functionality.
Pros:
Easy to set up.
Clean and minimalist.
Decent customization options.
Cons:
Limited advanced features.
Example:
OtpTextField(
numberOfFields: 4,
borderColor: Colors.blue,
cursorColor: Colors.black,
textStyle: TextStyle(fontSize: 18, color: Colors.blueAccent),
showFieldAsBox: true,
fieldWidth: 50.0,
errorBorderColor: Colors.red,
onSubmit: (otp) {
if (otp.length < 4) {
print("Error: OTP must be 4 digits");
} else {
print("OTP Entered: $otp");
}
},
onChanged: (value) {
print("Current OTP: $value");
},
);
Pro Tip: Match the number of fields to your OTP length for a better user experience.
4. pin_input_text_field
pin_input_text_field brings simplicity and power together in one package.
What I Love About It: It lets you get creative with styling, and I’m all for it!
Pros:
Flexible styling options.
Supports cursor movement.
Easy validation.
Cons:
Styling can get a bit tricky.
Example:
PinInputTextField(
length: 4,
keyboardType: TextInputType.number,
cursorColor: Colors.blue,
decoration: BoxLooseDecoration(
strokeColorBuilder: PinListenColorBuilder(Colors.blue, Colors.grey),
radius: Radius.circular(8),
),
onSubmit: (pin) {
if (pin.length < 4) {
print("Error: PIN must be 4 digits");
} else {
print("PIN Submitted: $pin");
}
},
onChanged: (value) {
print("Current PIN: $value");
},
errorTextStyle: TextStyle(
color: Colors.red,
fontSize: 14,
),
);
Pro Tip: Use different colors for active and inactive fields to guide users visually.
5. custom_pin_screen
If you’re someone who loves control, custom_pin_screen gives you the reins.
What I Love About It: It lets you design your own PIN screen from scratch. Who doesn’t love playing app designer?
Pros:
Complete control over design.
Supports animations.
Very developer-friendly.
Cons:
Requires more effort compared to prebuilt options.
Example:
CustomPinScreen(
pinLength: 4, // Set the length of the PIN
onChanged: (pin) {
setState(() {
_pin = pin;
});
},
onCompleted: (pin) {
// Handle PIN completion (e.g., validate PIN or navigate)
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('PIN entered: $_pin')),
);
},
),
Pro Tip: Add fun animations to make your app stand out.
6. fancy_password_field
Fancy is not just a name—this password field truly delivers on style. fancy_password_field is a masterpiece.
What I Love About It: It makes password inputs stylish and secure. Who said security can’t be fancy?
Pros:
Supports password strength indicator.
Built-in visibility toggle.
Gorgeous design.
Cons:
Limited to password fields.
Example:
FancyPasswordField(
strengthIndicator: true,
visibilityToggle: true,
inputDecoration: InputDecoration(
hintText: "Enter your password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.blue),
),
errorText: "Password must be at least 8 characters",
),
strengthColors: [
Colors.red,
Colors.orange,
Colors.yellow,
Colors.green,
],
onChanged: (password) {
print("Password: $password");
if (password.length < 8) {
print("Error: Password too short");
}
},
onStrengthChanged: (strength) {
print("Password strength: $strength");
},
);
Pro Tip: Use the strength indicator to encourage users to create strong passwords.
7. otp_pin_field
otp_pin_field is your best friend when it comes to handling OTP input fields seamlessly.
What I Love About It: It’s incredibly straightforward and gets the job done beautifully.
Pros:
Simple setup.
Decent customization.
Smooth animations.
Cons:
Limited advanced features.
Example:
OtpPinField(
length: 5,
fieldWidth: 50.0,
showFieldAsBox: true,
borderColor: Colors.blue,
cursorColor: Colors.black,
errorBorderColor: Colors.red,
onCompleted: (otp) {
if (otp.length < 5) {
print("Error: OTP must be 5 digits");
} else {
print("OTP Submitted: $otp");
}
},
onChanged: (value) {
print("Current OTP: $value");
},
resendOtpWidget: ResendOtpWidget(
resendDuration: Duration(seconds: 30),
onResendTap: () {
print("Resend OTP tapped!");
},
),
validator: (value) {
if (value == null || value.length != 5) {
return "Please enter a valid 5-digit OTP";
}
return null;
},
);
Pro Tip: Pair it with a resend OTP timer for a polished experience.
8. flutter_verification_code_field
For developers who want easy-to-use verification code fields, this flutter_verification_code_field package is a lifesaver.
What I Love About It: It’s a time-saver and looks great right out of the box.
Pros:
Lightweight.
Supports error indication.
Highly customizable.
Cons:
Could use more out-of-the-box features.
Example:
FlutterVerificationCodeField(
length: 6,
onCompleted: (code) {
if (code == null || code.length < 6) {
print("Error: Incomplete code");
} else {
print("Code: \$code");
}
},
inputDecoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.blue),
),
errorText: "Please enter a 6-digit code",
),
onEditingComplete: () => print("Editing completed"),
);
Pro Tip: Use error feedback to improve usability and reduce user frustration.
9. verification_code_field
Verification code fields can be boring, but not with this package!
What I Love About It: It’s super versatile and adapts to almost any design.
Pros:
Easy to implement.
Good validation options.
Flexible design.
Cons:
Styling requires extra effort.
Example:
VerificationCodeField(
length: 4,
onCompleted: (code) {
if (code.length < 4) {
print("Error: Code is incomplete.");
} else {
print("Verification Code: \$code");
}
},
inputDecoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue),
),
errorText: "Please enter the complete code",
),
textStyle: TextStyle(fontSize: 18, color: Colors.black),
onEditingComplete: () => print("User has finished entering the code"),
);
Pro Tip: Customize the focus indicator for a premium user experience.
10. flutter_pin_code_widget
Last but definitely not least, flutter_pin_code_widget is like the Swiss Army knife of PIN code fields.
What I Love About It: It’s powerful and packed with features.
Pros:
Flexible configurations.
Robust validation options.
Modern and stylish.
Cons:
Slightly bulky for smaller projects.
Example:
FlutterPinCodeWidget(
length: 4,
onCompleted: (pin) {
if (pin.length != 4) {
print("Error: PIN must be 4 digits");
} else {
print("PIN Code: $pin");
}
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue),
),
errorText: "Invalid PIN. Try again.",
),
);
Pro Tip: Experiment with the validation features for enhanced security.
Wrapping It Up
And there you have it, folks—the 10 best Flutter packages for PIN, OTP, and password fields. Whether you’re building a banking app, an e-commerce app, or just want to level up your user authentication game, these packages have got your back.
So, what are you waiting for? Dive in, have fun, and remember: a good input field not only secures your app but also puts a smile on your users’ faces. Cheers to better user experiences!
Find out more articles: Click here
FAQ
1. What is the best package for creating PIN input fields in Flutter?
The Pinput package stands out as one of the best for creating PIN input fields in Flutter. It offers a sleek design, high customizability, animations, and built-in validation, making it ideal for modern apps.
2. Which package should I use for OTP input in a Flutter app?
You can use OtpPinField or flutter_otp_text_field for OTP input. Both packages are user-friendly, with features like field validation, error handling, and smooth animations.
3. How do I add a resend OTP timer to my app?
The OtpPinField package includes a ResendOtpWidget that lets you implement a resend timer with customizable duration and callbacks. You can also build a custom timer using Dart’s Timer class.
4. Which package supports biometric authentication along with PINs?
The smart_auth package supports both biometric authentication and PIN storage. It provides secure and cross-platform compatibility for an added layer of security in your app.
5. Can I customize the appearance of the input fields?
Yes, most packages, like Pinput, flutter_otp_text_field, and pin_input_text_field, allow extensive customization of input field appearance. You can modify colors, borders, styles, and even animations.
