passcode_screen 1.0.2

Pub

Flutter - Passcode Lock Screen #

A Flutter package for iOS and Android for showing passcode input screen, similar to Native iOS.

passcode-screen-demo.gif

Installation #

First add passcode_screen as a dependency in your pubspec.yaml file.

Then use import

import 'package:passcode_screen/passcode_screen.dart';

What can it do for you? #

passcode-screen-default.png
  1. Create a beautiful passcode lock view simply.
PasscodeScreen(
  title: title,
  passwordEnteredCallback: _onPasscodeEntered,
  cancelLocalizedText: 'Cancel',
  deleteLocalizedText: 'Delete',
  shouldTriggerVerification: _verificationNotifier.stream,  
);
  1. Passcode input completed callback.
_onPasscodeEntered(String enteredPasscode) {
  
}
  1. Notify passcode screen if passcode correct or not
final StreamController<bool> _verificationNotifier = StreamController<bool>.broadcast();

_onPasscodeEntered(String enteredPasscode) {
  bool isValid = '123456' == enteredPassword;
  _verificationNotifier.add(isValid);
}

Don't forget to close a stream

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

  1. Customize UI.

Customize circles

class CircleUIConfig {
  final Color borderColor;
  final Color fillColor;
  final double borderWidth;
  final double circleSize;
  double extraSize;
}

Customize keyboard

class KeyboardUIConfig {
  final double digitSize;
  final TextStyle digitTextStyle;
  final TextStyle deleteButtonTextStyle;
  final Color primaryColor;
  final Color digitFillColor;
  final EdgeInsetsGeometry keyboardRowMargin;
  final EdgeInsetsGeometry deleteButtonMargin;
}
passcode-screen-custom.png

iOS & Android

Plugin is totally platform agnostic. No configuration required - the plugin should work out of the box.

Contributions #

Warmly welcome to submit a pull request!

Passcode Lock Screen #

Passcode Lock Screen is owned and maintained by Redeyes Dev

Used in production #

Passkeep - Passwords Keeper

Contributors #

Vladimir Hudnitsky [BeDaut] (https://github.com/BeDaut) [mix1009] (https://github.com/mix1009)

Relase notes: #

1.0.0+1: #

Basic implementation of a widget.

  • You could show a widget, enter passcode and validate it.

1.0.1 #

  • Added isValidCallback to help you handle success scenario. isValidCallback will be invoked after passcode screen will pop.

1.0.2 #

  • Added configurable background and title color. (by @BeDaut)
  • Added cancelCallback to react when user cancelled widget (by @mix1009)

[0.0.1] - TODO: Add release date.

[1.0.0+1] - 22 Jan 2019

Basic implementation of a widget.

  • You could show a widget, enter passcode and validate it.

[1.0.1] - 12 May 2019

  • Added isValidCallback to help you handle success scenario. isValidCallback will be invoked after passcode screen will pop.

[1.0.2] - 28 June 2019

  • Added configurable background and title color.
  • Added cancelCallback to react when user cancelled widget

example/README.md

Example #

passcode-screen-demo.gif
  1. Create a beautiful passcode lock view simply.
PasscodeScreen(
  title: title,
  passwordEnteredCallback: _onPasscodeEntered,
  cancelLocalizedText: 'Cancel',
  deleteLocalizedText: 'Delete',
  shouldTriggerVerification: _verificationNotifier.stream,  
);
  1. Passcode input completed callback.
_onPasscodeEntered(String enteredPasscode) {
  
}
  1. Notify passcode screen if passcode correct or not
final StreamController<bool> _verificationNotifier = StreamController<bool>.broadcast();

_onPasscodeEntered(String enteredPasscode) {
  bool isValid = '123456' == enteredPassword;
  _verificationNotifier.add(isValid);
}

Don't forget to close a stream

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

  1. Customize UI.

Customize circles

class CircleUIConfig {
  final Color borderColor;
  final Color fillColor;
  final double borderWidth;
  final double circleSize;
  double extraSize;
}

Customize keyboard

class KeyboardUIConfig {
  final double digitSize;
  final TextStyle digitTextStyle;
  final TextStyle deleteButtonTextStyle;
  final Color primaryColor;
  final Color digitFillColor;
  final EdgeInsetsGeometry keyboardRowMargin;
  final EdgeInsetsGeometry deleteButtonMargin;
}
passcode-screen-custom.png

Relase notes: #

1.0.0+1: #

Basic implementation of a widget.

  • You could show a widget, enter passcode and validate it.

1.0.1 #

  • Added isValidCallback to help you handle success scenario. isValidCallback will be invoked after passcode screen will pop.

Use this package as a library

1. Depend on it

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


dependencies:
  passcode_screen: ^1.0.2

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:passcode_screen/passcode_screen.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

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

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/passcode_screen.dart.

Run flutter format to format lib/passcode_screen.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
mockito ^4.0.0

Admin