flutter_screen_lock 1.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

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.

Features #

  • Any number of digits can be specified
  • You can change Cancel and Delete text
  • The UI expands and contracts according to the size of the device
  • You can disable cancellation
  • You can use biometrics
  • Biometrics can be displayed on first launch
  • Unlocked callback

Usage #

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

Simple #

If the passcode you entered matches, you can callback onUnlocked.

import 'package:flutter_screen_lock/flutter_screen_lock.dart';

showLockScreen(
  context: context,
  correctString: '1234',
  onUnlocked: () => print('Unlocked.'),
);

Change digits #

Default 4 digits can be changed. Change the correctString accordingly.

import 'package:flutter_screen_lock/flutter_screen_lock.dart';

showLockScreen(
  context: context,
  digits: 6,
  correctString: '123456',
);

Use local_auth #

Specify canBiometric and biometricAuthenticate.

Add local_auth processing to biometricAuthenticate. See the following page for details.

https://pub.dev/packages/local_auth

import 'package:flutter_screen_lock/flutter_screen_lock.dart';

showLockScreen(
  context: context,
  correctString: '1234',
  canBiometric: true,
  // biometricButton is default Icon(Icons.fingerprint)
  // When you want to change the icon with `BiometricType.face`, etc.
  biometricButton: Icon(Icons.face),
  biometricAuthenticate: (context) async {
    final localAuth = LocalAuthentication();
    final didAuthenticate =
        await localAuth.authenticateWithBiometrics(
            localizedReason: 'Please authenticate');

    if (didAuthenticate) {
      return true;
    }

    return false;
  },
);

Open biometric first & onUnlocked callback #

add option showBiometricFirst.

showLockScreen(
  context: context,
  correctString: '1234',
  canBiometric: true,
  showBiometricFirst: true,
  biometricAuthenticate: (context) async {
    final localAuth = LocalAuthentication();
    final didAuthenticate =
        await localAuth.authenticateWithBiometrics(
            localizedReason: 'Please authenticate');

    if (didAuthenticate) {
      return true;
    }

    return false;
  },
  onUnlocked: () {
    print('Unlocked.');
  },
);

Can't cancel #

This is the case where you want to force authentication when the app is first launched.

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

Customize text #

You can change Cancel and Delete text. We recommend no more than 6 characters at this time.

showLockScreen(
  context: context,
  correctString: '1234',
  cancelText: 'Close',
  deleteText: 'Remove',
);

Verifycation passcode (v1.1.1) #

use showConfirmPasscode function.

showConfirmPasscode(
  context: context,
  confirmTitle: 'This is the second input.',
  onCompleted: (context, verifyCode) {
    // verifyCode is verified passcode
    print(verifyCode);
    // Please close yourself
    Navigator.of(context).maybePop();
  },
)

Customize your style (v1.1.2) #

use circleInputButtonConfig option.

showLockScreen(
  context: context,
  correctString: '1234',
  backgroundColor: Colors.grey.shade50,
  backgroundColorOpacity: 1,
  circleInputButtonConfig: CircleInputButtonConfig(
    textStyle: TextStyle(
      fontSize: MediaQuery.of(context).size.width * 0.1,
      color: Colors.white,
    ),
    backgroundColor: Colors.blue,
    backgroundOpacity: 0.5,
    shape: RoundedRectangleBorder(
      side: BorderSide(
        width: 1,
        color: Colors.blue,
        style: BorderStyle.solid,
      ),
    ),
  ),
)

Help #

How to prevent the background from being transparent #

Set the backgroundColorOpacity option to 1

Changelog #

[1.2.1] - 2020-07-08 #

  • Added custom biometric button.

[1.2.0] - 2020-07-08 #

  • Added unlocked callback function.
  • Deprecate biometricFunction. Instead, we have a biometricAuthenticate.
  • If you return true with biometricAuthenticate, you can set onUnlocked to Callback. Also, Navigation.pop is now automatic.

[1.1.2] - 2020-05-10 #

  • Added the ability to customize buttons and backgrounds.

[1.1.1] - 2020-05-10 #

  • Fix to call showBiometricFunction when the animation is complete

[1.1.0+1] - 2020-03-03 #

  • Added video for confirm screen

[1.1.0] - 2020-02-28 #

  • New feature in verification passcode

[1.0.0+2] - 2020-02-18 #

  • Change example readme

[1.0.0+1] - 2020-02-17 #

  • Fix readme

[1.0.0] - 2020-02-16 #

  • First release

Features #

  • Any number of digits can be specified
  • You can change Cancel and Delete text
  • The UI expands and contracts according to the size of the device
  • You can disable cancellation
  • You can use biometrics
  • Biometrics can be displayed on first launch
  • Verification passcode
  • Unlocked callback

example/lib/main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Open Lock Screen'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  onCompleted: (context, result) {
                    // if you specify this callback,
                    // you must close the screen yourself
                    Navigator.of(context).maybePop();
                  },
                  onUnlocked: () => print('Unlocked.'),
                ),
              ),
              RaisedButton(
                child: Text('6 Digits'),
                onPressed: () => showLockScreen(
                  context: context,
                  digits: 6,
                  correctString: '123456',
                ),
              ),
              RaisedButton(
                child: Text('Use local_auth'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  canBiometric: true,
                  // biometricButton is default Icon(Icons.fingerprint)
                  // When you want to change the icon with `BiometricType.face`, etc.
                  biometricButton: Icon(Icons.face),
                  biometricAuthenticate: (context) async {
                    final localAuth = LocalAuthentication();
                    final didAuthenticate =
                        await localAuth.authenticateWithBiometrics(
                            localizedReason: 'Please authenticate');

                    if (didAuthenticate) {
                      return true;
                    }

                    return false;
                  },
                  onUnlocked: () {
                    print('Unlocked.');
                  },
                ),
              ),
              RaisedButton(
                child: Text('Open biometric first'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  canBiometric: true,
                  showBiometricFirst: true,
                  // biometricFunction: (context) async {
                  //   final localAuth = LocalAuthentication();
                  //   final didAuthenticate =
                  //       await localAuth.authenticateWithBiometrics(
                  //           localizedReason: 'Please authenticate');

                  //   if (didAuthenticate) {
                  //     Navigator.of(context).pop();
                  //   }
                  // },
                  biometricAuthenticate: (_) async {
                    final localAuth = LocalAuthentication();
                    final didAuthenticate =
                        await localAuth.authenticateWithBiometrics(
                            localizedReason: 'Please authenticate');

                    if (didAuthenticate) {
                      return true;
                    }

                    return false;
                  },
                  onUnlocked: () => print('Unlocked.'),
                ),
              ),
              RaisedButton(
                child: Text('Can\'t cancel'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  canCancel: false,
                ),
              ),
              RaisedButton(
                child: Text('Customize text'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  cancelText: 'Close',
                  deleteText: 'Remove',
                ),
              ),
              RaisedButton(
                child: Text('Confirm mode.'),
                onPressed: () => showConfirmPasscode(
                  context: context,
                  onCompleted: (context, verifyCode) {
                    print(verifyCode);
                    Navigator.of(context).maybePop();
                  },
                ),
              ),
              RaisedButton(
                child: Text('Change styles.'),
                onPressed: () => showLockScreen(
                  context: context,
                  correctString: '1234',
                  backgroundColor: Colors.grey.shade50,
                  backgroundColorOpacity: 1,
                  circleInputButtonConfig: CircleInputButtonConfig(
                    textStyle: TextStyle(
                      fontSize: MediaQuery.of(context).size.width * 0.1,
                      color: Colors.white,
                    ),
                    backgroundColor: Colors.blue,
                    backgroundOpacity: 0.5,
                    shape: RoundedRectangleBorder(
                      side: BorderSide(
                        width: 1,
                        color: Colors.blue,
                        style: BorderStyle.solid,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_screen_lock: ^1.2.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_screen_lock/circle_input_button.dart';
import 'package:flutter_screen_lock/dot_secret_ui.dart';
import 'package:flutter_screen_lock/lock_screen.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
70
Health:
Code health derived from static analysis. [more]
97
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
84
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_screen_lock that is a package requiring null.

Health suggestions

Fix lib/lock_screen.dart. (-3.45 points)

Analysis of lib/lock_screen.dart reported 7 hints, including:

line 99 col 13: Close instances of dart.core.Sink.

line 237 col 18: 'biometricFunction' is deprecated and shouldn't be used. use biometricAuthenticate..

line 241 col 20: 'biometricFunction' is deprecated and shouldn't be used. use biometricAuthenticate..

line 248 col 22: 'biometricFunction' is deprecated and shouldn't be used. use biometricAuthenticate..

line 489 col 20: 'biometricFunction' is deprecated and shouldn't be used. use biometricAuthenticate..

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test
pedantic ^1.8.0+1