xputnikx/flutter-passcode

Flutter - Passcode Lock Screen

Flutter - Passcode Lock Screen

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

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?

1. Create a beautiful passcode lock view simply.

PasscodeScreen(
  title: title,
  passwordEnteredCallback: _onPasscodeEntered,
  cancelButton: Text('Cancel'),
  deleteButton: Text('Delete'),
  shouldTriggerVerification: _verificationNotifier.stream,  
);

2. Passcode input completed callback.

_onPasscodeEntered(String enteredPasscode) {
  
}

3. 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();
}

4. 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;
}

Landscape Support

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 mix1009 pixnbit ssanderson imejiasoft

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)

1.1.0

• Provide widget instead of string for title
• Fixed digits layout
• Added flexibility to configure 'Cancel' and 'Delete' buttons as widgets
• Added flexibility to provide digits as list of strings for better customisation
• Removed navigation as default action when cancel pressed

1.1.1

• Add landscape view for the passcode screen

1.2.0

• Add dynamic size for landscape view.
• Moved 'Cancel' button to the bottom of the screen to align with iOS Native Passcode Screen style.

1.2.1

• Example updated to target Android 11
• Fixed Issue#23

1.2.2

• Fixed an issue with example build
• Example updated to show how to implement 'Reset passcode' feature

2.0.0

• Null safety

flutter-passcode's Issues

Error while dragging / spam pressing: A RenderFlex overflowed by 180 pixels on the right.

When pressing and dragging on the passcode screen I got 'A RenderFlex overflowed by 180 pixels on the right.'.

This seems to be fixed when surrounding the rows in passcode_screen.dart with an Expanded widget.

Title on top even in landscape mode

How can i make the title to appear on top of the keypad in the landscape mode?

Equal replacement for digitSize property

I think there was digitSize property in the KeyboardUIConfig. It seems not available anymore. Now the KeyboardUIConfig constructors are:

const KeyboardUIConfig({
  this.digitBorderWidth = 1,
  this.keyboardRowMargin = const EdgeInsets.only(top: 15, left: 4, right: 4),
  this.digitInnerMargin = const EdgeInsets.all(24),
  this.primaryColor = Colors.white,
  this.digitFillColor = Colors.transparent,
  this.digitTextStyle = const TextStyle(fontSize: 30, color: Colors.white),
  this.deleteButtonTextStyle = const TextStyle(fontSize: 16, color: Colors.white),
  this.keyboardSize,
});

What's the equal replacement for digitSize? Is it keyboardSize or digitTextStyle?

enteredPasscode

reset and empty all input number fields

Feature request: just providing widgets for customizations (The Flutter way)

First off thanks for this awesome library!

I feel the API is not flexible enough for me to customize. I would suggest just provide a widget for the header, it's up to the implementer to provide either a "Text('Enter your point') with different styles" or something more creative.

The same goes to the face of the buttons. You can open up to 9 digits and 1 for the cancel button to either provide just Text or something else. For example, I would like to have an Icon instead of "Cancel" text. Also, the face text can be customized say for non-arabic numerals.

How can I solve this problem when I import the project

Because example depends on passcode_screen from path which doesn't exist (could not find package passcode_screen at "....\passcode_screen"), version solving failed.
pub get failed (66; Because example depends on passcode_screen from path which doesn't exist (could not find package passcode_screen at "....\passcode_screen"), version solving failed.)

What does bottomWidget do?

I'm trying to implement a lockscreen and I'm not sure what bottomwidget does. I tried adding a button but the ontap event simply triggers the delete/cancel button. Looked through the source code and I'm not entirely sure. Thanks in advance!

Failed to build

Because example depends on passcode_screen from path which doesn't exist (could not find package passcode_screen at "....\passcode_screen"), version solving failed.
pub get failed (66)

Example failed to build android, works on IOS

Launching lib/main.dart on Android SDK built for x86 in debug mode...
[!] Your app isn't using AndroidX.
To avoid potential build failures, you can quickly migrate your app by following the steps on https://goo.gl/CP92wY.
Running Gradle task 'assembleDebug'...

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:processDebugResources'.

Android resource linking failed
Output: /Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/incremental/mergeDebugResources/merged.dir/values/values.xml:186: error: resource android:attr/fontVariationSettings not found.
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/incremental/mergeDebugResources/merged.dir/values/values.xml:187: error: resource android:attr/ttcIndex not found.
error: failed linking references.

Command: /Users/marcmathys/.gradle/caches/transforms-1/files-1.1/aapt2-3.2.1-4818971-osx.jar/18bf3ef7ae11aba806cb141a66e9d4af/aapt2-3.2.1-4818971-osx/aapt2 link -I
/Users/marcmathys/Library/Android/sdk/platforms/android-27/android.jar
--manifest
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/merged_manifests/debug/processDebugManifest/merged/AndroidManifest.xml
-o
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/processed_res/debug/processDebugResources/out/resources-debug.ap_
-R
@/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/incremental/processDebugResources/resources-list-for-resources-debug.ap_.txt
--auto-add-overlay
--java
/Users/marcmathys/AndroidStudioProjects/example/build/app/generated/not_namespaced_r_class_sources/debug/processDebugResources/r
--custom-package
com.redeyes.passcodescreen.example
-0
apk
--output-text-symbols
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/symbols/debug/R.txt
--no-version-vectors
Daemon: AAPT2 aapt2-3.2.1-4818971-osx Daemon #0
Output: /Users/marcmathys/.gradle/caches/transforms-1/files-1.1/support-compat-28.0.0.aar/9c79557a07b349133747795d92e9553b/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/fontVariationSettings not found.

/Users/marcmathys/.gradle/caches/transforms-1/files-1.1/support-compat-28.0.0.aar/9c79557a07b349133747795d92e9553b/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/ttcIndex not found.

error: failed linking references.
Command: /Users/marcmathys/.gradle/caches/transforms-1/files-1.1/aapt2-3.2.1-4818971-osx.jar/18bf3ef7ae11aba806cb141a66e9d4af/aapt2-3.2.1-4818971-osx/aapt2 link -I
/Users/marcmathys/Library/Android/sdk/platforms/android-27/android.jar
--manifest
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/merged_manifests/debug/processDebugManifest/merged/AndroidManifest.xml
-o
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/processed_res/debug/processDebugResources/out/resources-debug.ap_
-R
@/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/incremental/processDebugResources/resources-list-for-resources-debug.ap_.txt
--auto-add-overlay
--java
/Users/marcmathys/AndroidStudioProjects/example/build/app/generated/not_namespaced_r_class_sources/debug/processDebugResources/r
--custom-package
com.redeyes.passcodescreen.example
-0
apk
--output-text-symbols
/Users/marcmathys/AndroidStudioProjects/example/build/app/intermediates/symbols/debug/R.txt
--no-version-vectors
Daemon: AAPT2 aapt2-3.2.1-4818971-osx Daemon #0

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 9s
Finished with error: Gradle task assembleDebug failed with exit code 1

Set length of pin code

Unable to set length of pin code. There is no option when construction Passcode

How to

Example as "passcode screen" as first route/screen ?

add reset function

to clear programmatically. i am doing a change pin feature using this. currently, i dont see any function in passcode_screen.dart

so a property like
changePin: true

would be nice. so if the user incorrectly enters both pin, a restart button will appear . just a suggestion.

Does not support accessibility

If we increase the font size via accessibility - the plugin will display spanned text :

Documentation is outdated

cancelLocalizedText has been replaced with cancelButton, same for delete

The documentation as it is does not compile

Missing shake animation from readme gif.

Great package, thank you. Perfect for what I needed.

I have a suggestion and that's to bring back the shake animation on a wrong password. It seemed to exist before everything got condensed into on main.dart file, but now nothing happens when the wrong passcode is entered.

Also related to this, maybe set a maximum number of tries before a lockout?

Thanks.

Delete button alignment off

This is an extreme example, but I noticed it even for smaller screens too.

How to: Specify MaxLength of passcode setting

Give a child option for 'Forgot passcode'

People forget passcodes sometimes and and therefore there should be a child widget that could be positioned at the bottom of the screen for ('Forgot the password?') kind of Widget.

It would make this aesthatically beautiful Widget more pragmatic.

0 button doesn't work

Hello,
when pressing on the 0 button, nothing happens. All the other numberfields work, only the buttom one doesn't. Can somebody help me ?

Invalid curve endpoint at 1.0

Invalid curve endpoint at 1.0

Curves must map 0.0 to near zero and 1.0 to near one but ShakeCurve mapped 1.0 to 3.6739403974420594e-16, which is near 0.0.

@OverRide
initState() {
super.initState();
streamSubscription = widget.shouldTriggerVerification.listen((isValid) => _showValidation(isValid));
controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
final Animation curve = CurvedAnimation(parent: controller, curve: ShakeCurve());
animation = Tween(begin: 0.0, end: ### 10.0).animate(curve)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
setState(() {
enteredPasscode = '';
controller.value = 0;
});
}
})
..addListener(() {
setState(() {
// the animation object’s value is the changed state
});
});
}

Layout is wrong in small screen devices

The passcode screen looks wrong (see at the cancel button and the title in the attached screenshot) and sometimes even bottom overflows on small screen device (e.g Nexus one) a specially when using the bottomWidget parameter (fingerprint icon in the attached screenshot).

Null safety

Can we add null safety to the project?

Wrong position of filled circles

When I use a visible (not transparent) fill color for the keyboard circles, the filled circles are drawn at wrong positions. The circle borders are not at the edges of the circle fills and some of the filled circles (different digits depending on the keyboard size) are cut off on the tops.

I use the widget as a child in a SimpleDialog and it looks like this:

          Container(
            height: 400,
            width: 300,
            child: PasscodeScreen(
              title: Container(),
              backgroundColor: Colors.white,
              circleUIConfig: CircleUIConfig(
                borderColor: Colors.grey[800],
                fillColor: Colors.grey[800],
              ),
              keyboardUIConfig: KeyboardUIConfig(
                digitTextStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 25,
                ),
                primaryColor: Colors.white,
                digitFillColor: Colors.grey,
                keyboardSize: Size(220, 320),
              ),
              cancelButton: Container(height: 0, width: 0,),
              deleteButton: Icon(Icons.backspace),
              passwordDigits: 4,
              passwordEnteredCallback: _onPinEntered,
              shouldTriggerVerification: _pinVerificationNotifier.stream,
            ),
          ),

I suggest using the digitFillColor as the color of the BoxDecoration rather than the color of the Material.

Please add keyboard shortcuts for use on web

When using in a flutter web app, the passcode should be enterable using keyboard. Please add keyboard shortcuts (0-9 + backspace).

Don't need Navigator.maybePop in _onDeleteCancelButtonPressed

If someone want to pop the page, he could define a cancelCallback function, do it by himself.

Thanks for this work, it saves lots of my time.