Password Strength Checker In Flutter

September 9, 2024September 9, 2024 Shaiq Khan Developers

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

Code Implement

Code File

Conclusion

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';
  });
}