Passcode Lock Screen In Flutter

Flutter just intrigued me with the pleasant UI stuff you could do effectively, and obviously, it permits you to create for both platforms simultaneously. Until the most recent year, I utilized touchID and FaceID as an authentication instrument. In any case, as indicated by the most recent Andriod prerequisites, you need to give an elective authentication strategy on the off chance that biometric auth is broken or impaired.

In this article, we will explore the Passcode Lock Screen In Flutter. We will see how to implement a demo program passcode lock screen using the passcode_screen package in your flutter applications.

passcode_screen | Flutter Package
A platform-agnostic Flutter package for showing passcode input screen, similar to Native iOS. Screen customizable with…pub.dev

Table Of Contents::

Passcode Lock Screen

Implementation

Code Implement

Code File

Conclusion

---

---

Passcode Lock Screen:

A stage agnostic Flutter package for showing password input screen, like Native iOS. Screen adaptable with colors, sizes, textual styles, and so on. It will show how to unlock the screen when using the passcode screen in your flutter application.

Demo Module :

This demo video shows how to create a passcode lock screen in a flutter. It shows how the passcode lock screen will work using the passcode_screen package in your flutter applications. It shows a passcode input screen to unlock the screen. It will be shown on your device.

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

passcode_screen: 

Step 2: Import

import 'package:passcode_screen/passcode_screen.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called demo_page.dart inside the lib folder.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('You are ${isAuthenticated ? '' : 'not'}'
          ' authenticated',style: TextStyle(fontSize: 16),),
      SizedBox(height: 10,),
      _lockScreenButton(context),
    ],
  ),
),

On the main screen, we will add the text is “You are not authenticated,” which means the user can unlock the passcode screen then the text was changed authenticated. Otherwise, not authenticated is shown on your device. We will add a _lockScreenButton(context),. We will discuss it below.

_lockScreenButton(BuildContext context) => MaterialButton(
  padding: EdgeInsets.only(left: 50,right: 50),
  color: Theme.of(context).primaryColor,
  child: Text('Lock Screen',style: TextStyle(color: Colors.white,
      fontWeight: FontWeight.bold,fontSize: 17),),
  onPressed: () {
    _showLockScreen(
      context,
      opaque: false,
      cancelButton: Text(
        'Cancel',
        style: const TextStyle(fontSize: 16, color: Colors.white,),
        semanticsLabel: 'Cancel',
      ),
    );
  },
);

In _lockScreenButton(), we will use material button. We will add padding, color, text, and onPressed method inside the button, and we will add a _showLockScreen() widget on this method. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Now, we will deeply define _showLockScreen() widget.

_showLockScreen(BuildContext context,
    {bool opaque,
      CircleUIConfig circleUIConfig,
      KeyboardUIConfig keyboardUIConfig,
      Widget cancelButton,
      List<String> digits}) {
  Navigator.push(
      context,
      PageRouteBuilder(
        opaque: opaque,
        pageBuilder: (context, animation, secondaryAnimation) => PasscodeScreen(
          title: Text(
            'Enter Passcode',
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white, fontSize: 28),
          ),
          circleUIConfig: circleUIConfig,
          keyboardUIConfig: keyboardUIConfig,
          passwordEnteredCallback: _passcodeEntered,
          cancelButton: cancelButton,
          deleteButton: Text(
            'Delete',
            style: const TextStyle(fontSize: 16, color: Colors.white),
            semanticsLabel: 'Delete',
          ),
          shouldTriggerVerification: _verificationNotifier.stream,
          backgroundColor: Colors.black.withOpacity(0.8),
          cancelCallback: _passcodeCancelled,
          digits: digits,
          passwordDigits: 6,
          bottomWidget: _passcodeRestoreButton(),
        ),
      ));
}

In this widget, we will add PasscodeScreen(). Inside the screen, we will add a title, inbuilt config of circle, and keyboard. We will add a passwordEnteredCallback method. In this method, add a _passcodeEntered widget, and we will define below. Add a cancelButton, deleteButton, shouldTriggerVerification, cancelCallback, password digits, and bottomWidget.

final StreamController<bool> _verificationNotifier = StreamController<bool>.broadcast();
_passcodeEntered(String enteredPasscode) {
  bool isValid = storedPasscode == enteredPasscode;
  _verificationNotifier.add(isValid);
  if (isValid) {
    setState(() {
      this.isAuthenticated = isValid;
    });
  }
}

Passcode input completed callback and notify passcode screen if passcode correct or not. Users can add any storedPasscodelike 654321, etc. If the password was valid, then authenticated the screen. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Don’t forget to close a stream. Users can dispose of it.

@override
void dispose() {
  _verificationNotifier.close();
  super.dispose();
}

Now, we will deeply define _passcodeRestoreButton() widget.

Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    margin: const EdgeInsets.only(bottom: 10.0, top: 20.0),
    child: FlatButton(
      child: Text(
        "Reset passcode",
        textAlign: TextAlign.center,
        style: const TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.w300),
      ),
      splashColor: Colors.white.withOpacity(0.4),
      highlightColor: Colors.white.withOpacity(0.2),
      onPressed: _resetApplicationPassword,
    ),
  ),
);

In this widget, we will add a container. Inside, we will add a FlatButton(). In this button, we will add text, splash color, highlight color, and onPressed method add a _resetApplicationPassword widget.

_resetApplicationPassword() {
  Navigator.maybePop(context).then((result) {
    if (!result) {
      return;
    }
    _restoreDialog(() {
      Navigator.maybePop(context);
    });
  });
}

In this widget, if the result is equal to the result, then navigate pop. Otherwise, _restoreDialog() widget and then pop.

_restoreDialog(VoidCallback onAccepted) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        backgroundColor: Colors.teal[50],
        title: Text(
          "Reset passcode",
          style: const TextStyle(color: Colors.black87),
        ),
        content: Text(
          "Passcode reset is a non-secure operation!\nAre you sure want to reset?",
          style: const TextStyle(color: Colors.black87),
        ),
        actions: <Widget>[
          // usually buttons at the bottom of the dialog
          FlatButton(
            child: Text(
              "Cancel",
              style: const TextStyle(fontSize: 18),
            ),
            onPressed: () {
              Navigator.maybePop(context);
            },
          ),
          FlatButton(
            child: Text(
              "I proceed",
              style: const TextStyle(fontSize: 18),
            ),
            onPressed: onAccepted,
          ),
        ],
      );
    },
  );
}

In this widget, we will create a show dialog. In this dialog, we will return an AlertDialog(). Inside we will add a title, content, and FlatButton(). When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

https://gist.github.com/ShaiqAhmedkhan/8af9c54813718ccfb6cde4a534197d08#file-demo_page-dart

Conclusion:

In the article, I have explained the Passcode Lock Screen basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Passcode Lock Screen On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Passcode Lock Screen in your flutter projects. We will show you what the Passcode Lock Screen is?. Make a demo program for working Passcode Lock Screen and show a passcode input screen to unlock the screen and beautiful reset dialog using the passcode_screen package in your flutter applications. 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.

find the source code of the Flutter Passcode Lock Screen Demo:

flutter-devs/flutter_passcode_lock_screen_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

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.

---