Flutter Screen Lock

This Flutter plugin provides an feature for screen lock. Enter your passcode to unlock the screen. You can also use biometric authentication as an option.

‚ö†Attention

A detailed API description will be provided later. Only tentatively necessary information is provided.

Features

  • By the length of the character count
  • You can change Cancel and Delete widget
  • Optimizes the UI for device size and orientation
  • You can disable cancellation
  • You can use biometrics (local_auth plugin)
  • Biometrics can be displayed on first launch
  • Unlocked callback
  • You can specify a mismatch event.
  • Limit the maximum number of retries

Usage

You can easily lock the screen with the following code.
To unlock, enter correctString.

Simple

If you give the same input as correctString, it will automatically close the screen.

import 'package:flutter_screen_lock/functions.dart';

screenLock(
  context: context,
  correctString: '1234',
);

Change digits

Provides a screen lock that cannot be canceled.

import 'package:flutter_screen_lock/functions.dart';

screenLock(
  context: context,
  correctString: '1234',
  canCancel: false,
);

Confirmation screen

You can display the confirmation screen and get the first input with didConfirmed if the first and second inputs match.

import 'package:flutter_screen_lock/functions.dart';

screenLock(
  context: context,
  correctString: '',
  confirmation: true,
  didConfirmed: (matchedText) {
    print(matchedText);
  },
);

Use local_auth

Add the local_auth package to pubspec.yml.

https://pub.dev/packages/local_auth

It includes an example that calls biometrics as soon as screenLock is displayed in didOpened.

import 'package:flutter_screen_lock/functions.dart';
import 'package:local_auth/local_auth.dart';
import 'package:flutter/material.dart';

/// Method extraction to call by initial display and custom buttons.
Future<void> localAuth(BuildContext context) async {
  final localAuth = LocalAuthentication();
  final didAuthenticate = await localAuth.authenticateWithBiometrics(
      localizedReason: 'Please authenticate');
  if (didAuthenticate) {
    Navigator.pop(context);
  }
}

screenLock(
  context: context,
  correctString: '1234',
  customizedButtonChild: Icon(
    Icons.fingerprint,
  ),
  customizedButtonTap: () async {
    await localAuth(context);
  },
  didOpened: () async {
    await localAuth(context);
  },
);

Full customize

import 'package:flutter/material.dart';
import 'package:flutter_screen_lock/configurations/input_button_config.dart';
import 'package:flutter_screen_lock/configurations/screen_lock_config.dart';
import 'package:flutter_screen_lock/configurations/secret_config.dart';
import 'package:flutter_screen_lock/configurations/secrets_config.dart';
import 'package:flutter_screen_lock/functions.dart';
import 'package:flutter_screen_lock/screen_lock.dart';

screenLock(
  context: context,
  title: Text('change title'),
  confirmTitle: Text('change confirm title'),
  correctString: '1234',
  confirmation: true,
  screenLockConfig: ScreenLockConfig(
    backgroundColor: Colors.deepOrange,
  ),
  secretsConfig: SecretsConfig(
    spacing: 15, // or spacingRatio
    padding: const EdgeInsets.all(40),
    secretConfig: SecretConfig(
      borderColor: Colors.amber,
      borderSize: 2.0,
      disabledColor: Colors.black,
      enabledColor: Colors.amber,
      height: 15,
      width: 15,
      build: (context, {config, enabled}) {
        return SizedBox(
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: enabled
                  ? config.enabledColor
                  : config.disabledColor,
              border: Border.all(
                width: config.borderSize,
                color: config.borderColor,
              ),
            ),
            padding: EdgeInsets.all(10),
            width: config.width,
            height: config.height,
          ),
          width: config.width,
          height: config.height,
        );
      },
    ),
  ),
  inputButtonConfig: InputButtonConfig(
    textStyle:
        InputButtonConfig.getDefaultTextStyle(context).copyWith(
      color: Colors.orange,
      fontWeight: FontWeight.bold,
    ),
    buttonStyle: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(),
      backgroundColor: Colors.deepOrange,
    ),
  ),
  cancelButton: const Icon(Icons.close),
  deleteButton: const Icon(Icons.delete),
);

API References

screenLock / ScreenLock API

PropertyTypeDescription
contextBuildContext(Required) screenLock only
correctStringString(Required) Input correct String
If confirmation is true, it will be ignored, so set it to any string or empty.
screenLockConfigScreenLockConfigRefer to the API of ScreenLockConfig (Default: ScreenLockConfig())
secretsConfigSecretsConfigRefer to the API of SecretsConfig (Default: SecretsConfig())
inputButtonConfigInputButtonConfigRefer to the API of InputButtonConfig (Default: InputButtonConfig())
canCancelbooltrue is show cancel button. (Default: true)
confirmationboolMake sure the first and second inputs are the same.
digitsintSet the maximum number of characters to enter when confirmation is true.
maxRetriesint0 is unlimited.
For example, if it is set to 1, didMaxRetries will be called on the first failure.
(Default 0)
didUnlockedvoid Function()Called if the value matches the correctString.
didErrorvoid Function(int retries)Called if the value does not match the correctString.
didMaxRetriesvoid Function(int retries)Events that have reached the maximum number of attempts.
didOpenedvoid Function()For example, when you want to perform biometric authentication. screenLock only
didConfirmedvoid Function(String matchedText)Called when the first and second inputs match during confirmation.
It is possible to receive the matched text as an argument.
customizedButtonTapFuture<void> Function()Tapped for left side lower button.
customizedButtonChildWidgetChild for bottom left side button.
footerWidgetAdd a Widget to the footer.
cancelButtonWidgetChange the child widget for the cancel button.
deleteButtonWidgetChange the child widget for the delete button.
titleWidgetChange the title widget. Default HeadingTitle(text: 'Please enter passcode.')
confirmTitleWidgetChange the confirm title widget. Default HeadingTitle(text: 'Please enter confirm passcode.'))

ScreenLockConfig API

PropertyTypeDescription
backgroundColorColorSpecifies the background color of the screen. By default, themeData will be set.
themeDataThemeData(Default ScreenLockConfig.defaultThemeData)

SecretsConfig API

PropertyTypeDescription
spacingdoubleAbsolute space between secret widgets.
If specified together with spacingRatio, this will take precedence.
spacingRatiodoubleSpace ratio between secret widgets. (Default 0.05)
paddingEdgeInsetsGeometrypadding of Secrets Widget. (Default EdgeInsets.only(top: 20, bottom: 50))
secretConfigSecretConfigRefer to the API of SecretConfig (Default: SecretConfig())

SecretConfig API

PropertyTypeDescription
widthdoubleWidget width. (Default 16)
heightdoubleWidget height. (Default 16)
borderSizedoubleborder size. (Default EdgeInsets.only(top: 20, bottom: 50))
borderColorColorborder color. (Default Color(0xFFFFFFFF))
enabledColorColorFill color when input is active. (Default Color(0xFFFFFFFF))
disabledColorColorFill color for unentered. (Default Color(0xFFFFFFFF))

InputButtonConfig API

PropertyTypeDescription
heightdoubleButton height. (Default MediaQuery.of(context).size.height * 0.6 * 0.16)
widthdoubleButton width. (Default MediaQuery.of(context).size.width * 0.22)
autoSizeboolAutomatically adjust the size of the square to fit the orientation of the device. (Default true)
inputStringsList<String>A string to be matched against correctString. (Default '0','1','2','3','4','5','6','7','8','9')
displayStringsList<String>The string to be displayed on the screen. (Default '0','1','2','3','4','5','6','7','8','9')
styleButtonStyleIt is recommended that you use OutlinedButton.styleFrom() to change it.
textStyleTextStyleChanges the text style of the button.

Apps I use

TimeKey

iOS

Android

Libraries

cancel_button
customizable_button
delete_button
functions
heading_title
hidden_button
input_button
input_button_config
input_state
key_pad
screen_lock
screen_lock_config
secret_config
secrets
secrets_config
styled_input_button