Flutter just intrigued me with the pleasant UI stuff you could do effectively, and obviously, it permits you to create for both platforms simultaneously. The focal reason for existing is to construct the application out of widgets. It portrays how your application view should look with their present setup and state. When you modify the code, the widget rebuilt its depiction by computing the contrast between the past and current widget to decide the negligible changes for rendering in the UI of the application.
In this blog, we will explore the Password Strength Checker In Flutter. We will implement a demo program and create a Password Strength Checker without using any third-party plugins in your flutter applications.
Table Of Contents ::
Introduction:
The below demo video shows how to create a password strength checker in a flutter. It shows how the password strength checker will work without using any third-party plugins in your flutter applications. When the user enters the password on the text field, then they will show your password was strong, weak, great, and not acceptable, etc. Also, the linear progress bar was shown with different colors. It will be shown on your device.
Demo Module :
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create a late String _password variable, the double _strength variable is equal to zero, and the String _displayText variable is equal to the text ‘Please enter a password.’
late String _password;
double _strength = 0;
String _displayText = 'Please enter a password'
Now, we will add RegExp for number and letter
RegExp numReg = RegExp(r".*[0-9].*");
RegExp letterReg = RegExp(r".*[A-Za-z].*");
In the body, we will add the TextField() method. In this method, we will add onChanged navigate to _checkPassword(value). We will deeply describe it below. Also, we will add obscureText was true, hintText was ‘Password’.
TextField(
onChanged: (value) => _checkPassword(value),
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(), hintText: 'Password',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.teal),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.teal),
),),
),
In the body, we will add the LinearProgressIndicator widget. In this widget, we will add a value that was _strength variable. It will change colors according to _strength variable conditions.
LinearProgressIndicator(
value: _strength,
backgroundColor: Colors.grey[300],
color: _strength <= 1 / 4
? Colors.red
: _strength == 2 / 4
? Colors.yellow
: _strength == 3 / 4
? Colors.blue
: Colors.green,
minHeight: 15,
),
Now, we will add text was _displayText variable and add ElevatedButton() widget. In this widget, we will add the onPressed method. The button will be enabled in this method if the password strength is medium or beyond and add text ‘Continue’.
Text(
_displayText,
style: const TextStyle(fontSize: 18),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: _strength < 1 / 2 ? null : () {},
child: const Text('Continue'))
Now, we will deeply describe _checkPassword(value):
We will add _password variable was equal to value. trim().
_password = value.trim();
If the password was empty and add it inside the setState() method. In this method, _strength was equal to zero and _displayText was ‘Please enter your password.’
if (_password.isEmpty) {
setState(() {
_strength = 0;
_displayText = 'Please enter you password';
});
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
If the password was 6 characters less than in length, then it was weak, and add it inside the setState() method. In this method, _strength was equal to 1/4 and _displayText was ‘Your password is too short’.’
else if (_password.length < 6) {
setState(() {
_strength = 1 / 4;
_displayText = 'Your password is too short';
});
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
If the password was 6 characters to less than 8 characters in length, then it was acceptable but not strong, and add it inside the setState() method. In this method, _strength was equal to 2/4 and _displayText was ‘Your password is acceptable but not strong.’
else if (_password.length < 8) {
setState(() {
_strength = 2 / 4;
_displayText = 'Your password is acceptable but not strong';
});
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
If the password was greater than equal to 8 characters in length, and but doesn’t contain both letters and digit characters, then it was strong, and add it inside the setState() method. In this method, _strength was equal to 3/4 and _displayText was ‘Your password is strong.’
if (!letterReg.hasMatch(_password) || !numReg.hasMatch(_password)) {
setState(() {
// Password length >= 8
// But doesn't contain both letter and digit characters
_strength = 3 / 4;
_displayText = 'Your password is strong';
});
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
If the password was greater than equal to 8 characters in length, and Password contains both letters and digit characters, then it was great, and add it inside the setState() method. In this method, _strength was equal to 1 and _displayText was ‘Your password is great.’
else {
// Password length >= 8
// Password contains both letter and digit characters
setState(() {
_strength = 1;
_displayText = 'Your password is great';
});
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_password_strength/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: Splash(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
late String _password;
double _strength = 0;
RegExp numReg = RegExp(r".*[0-9].*");
RegExp letterReg = RegExp(r".*[A-Za-z].*");
String _displayText = 'Please enter a password';
void _checkPassword(String value) {
_password = value.trim();
if (_password.isEmpty) {
setState(() {
_strength = 0;
_displayText = 'Please enter you password';
});
} else if (_password.length < 6) {
setState(() {
_strength = 1 / 4;
_displayText = 'Your password is too short';
});
} else if (_password.length < 8) {
setState(() {
_strength = 2 / 4;
_displayText = 'Your password is acceptable but not strong';
});
} else {
if (!letterReg.hasMatch(_password) || !numReg.hasMatch(_password)) {
setState(() {
// Password length >= 8
// But doesn't contain both letter and digit characters
_strength = 3 / 4;
_displayText = 'Your password is strong';
});
} else {
// Password length >= 8
// Password contains both letter and digit characters
setState(() {
_strength = 1;
_displayText = 'Your password is great';
});
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter Password Strength Checker Demo'),
),
body: Padding(
padding: const EdgeInsets.all(30),
child: Column(
children: [
TextField(
onChanged: (value) => _checkPassword(value),
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(), hintText: 'Password',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.teal),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: BorderSide(color: Colors.teal),
),),
),
const SizedBox(
height: 30,
),
// The strength indicator bar
LinearProgressIndicator(
value: _strength,
backgroundColor: Colors.grey[300],
color: _strength <= 1 / 4
? Colors.red
: _strength == 2 / 4
? Colors.yellow
: _strength == 3 / 4
? Colors.blue
: Colors.green,
minHeight: 15,
),
const SizedBox(
height: 20,
),
// The message about the strength of the entered password
Text(
_displayText,
style: const TextStyle(fontSize: 18),
),
const SizedBox(
height: 50,
),
// This button will be enabled if the password strength is medium or beyond
ElevatedButton(
onPressed: _strength < 1 / 2 ? null : () {},
child: const Text('Continue'))
],
),
));
}
}
Conclusion:
In the article, I have explained the basic structure of the Password Strength Checker in a flutter; you can modify this code according to your choice. This was a small introduction to Password Strength Checker On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Password Strength Checker in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Password Strength Checker without using any third-party plugins. In this blog, we have examined the Password Strength Checker of the flutter app. I hope this blog will help you in the comprehension of the Password Strength Checker in a better way. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
