[Flutter]My First Attempt at Building a Password Check Screen: A Beginner’s Journey (Day 8)

Introduction

Hi everyone! I’m Craze👋

I’m just starting out with programming, and today I decided to take on a small challenge: creating a password check screen.

I thought just having this feature in the app would make it feel more impressive, so I decided to give it a try!　😎

It might not be perfect, but I’m excited to share my process with you!

If you have anything to ask, comment on it, and I will check it!

Anyway, let’s get started😄

Before Coding

I’ve researched how to make a password check screen and found a useful material.

That is the RegExp class used to search, match, and manipulate text based on specific patterns

Let’s have a look at a sample code

import 'dart:core';

void main() {
  String text = "Hello123!";
  
  // Create a regular expression pattern
  RegExp regExp = RegExp(r'[0-9]'); // Matches any digit
  
  // Check if the pattern exists in the text
  bool hasNumber = regExp.hasMatch(text);
  print("Contains a number: $hasNumber"); // Output: true
}

In addition to this, there are the other Components of a Regular Expression

As you can see in the code, the RegExp must help me achieve my today’s goal

Start Coding

import 'package:flutter/material.dart';

class PasswordCreationScreen extends StatefulWidget {
  @override
  _PasswordCreationScreenState createState() => _PasswordCreationScreenState();
}

class _PasswordCreationScreenState extends State<PasswordCreationScreen> {
  // Step 1: Controller to get the password input 
  final TextEditingController _passwordController = TextEditingController();
  String _message = ''; // To show validation messages

  // Step 2: Implement password validation logic
  void _validatePassword(String password) {
    setState(() {
      if (password.length < 8) {
        _message = 'Password must be at least 8 characters long.';
      } else if (!password.contains(RegExp(r'[!@#\$%^&*(),.?":{}|<>]'))) {
        _message = 'Password must have at least one special character.';
      } else {
        _message = 'Password is valid!';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Create Password'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
// Step 1
            TextField(
              controller: _passwordController,
              obscureText: true, // Hides the password
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Type your password',
              ),
              onChanged: _validatePassword, // Validates as the user types
            ),
            // Step 3: Displaying Feedback Messages
            Text(
              _message,
              style: TextStyle(
                color: _message == 'Password is valid!'
                    ? Colors.green
                    : Colors.red,
              ),
            ),
// Step 1
            ElevatedButton(
              onPressed: () {
                if (_message == 'Password is valid!') {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Password saved!')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _passwordController.dispose(); // Clean up the controller
    super.dispose();
  }
}

void main() {
  runApp(MaterialApp(
    home: PasswordCreationScreen(),
  ));
}

Final Form

This is the final form of my today’s attempt　d(￣ ￣)

If you guys have any suggestions or comments, please feel free to send me!

Thank you!!!!!!!