Flutter - Passcode Lock Screen

Overview

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,
  cancelButton: Text('Cancel'),
  deleteButton: Text('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

Landscape Support

passcode-screen-default-lanscape.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 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
Comments
  • add reset function

    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.

    opened by chitgoks 6
  • Give a child option for 'Forgot passcode'

    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.

    opened by AmitJoki 6
  • Wrong position of filled circles

    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.

    opened by ma-ruz 5
  • Invalid curve endpoint at 1.0

    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 }); }); }

    opened by saikiranVu 4
  • Failed to build

    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)

    opened by iamjitendrasinh 2
  • Change README to use cancelButton and deleteButton

    Change README to use cancelButton and deleteButton

    I started use this package yesterday, it's awesome! But I think the README is a little bit out of the date, cancelLocalizedText and deleteLocalizedText seems doesn't exist anymore.

    If I misunderstood something, feel free to just close this PR =D

    Again, thank you for this package, it's awesome.

    opened by lai32290 1
  • What does bottomWidget do?

    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!

    opened by lordtottuu 1
  • BUG: Fix debug assertion on ShakeCurve animation.

    BUG: Fix debug assertion on ShakeCurve animation.

    Flutter's Curve class requires that the transform function map 0 to ~0 and 1 to ~1. The previous ShakeCurve transform function sin(t * 3 * pi).abs(), which doesn't satisfy this property because sin(3 * pi) is 0, not 1.

    Changing the constant from 3 to 2.5 produces the required endpoint value for t = 1.

    Fixes https://github.com/xPutnikx/flutter-passcode/issues/23 .

    opened by ssanderson 1
  • Equal replacement for digitSize property

    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?

    opened by contactjavas 1
  • Example failed to build android, works on IOS

    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

    opened by marcmathys 1
  • Feature request: just providing widgets for customizations (The Flutter way)

    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.

    opened by pixnbit 1
  • [WIP] rework keyboard to have 3x4 grid and support different screen size for macos and web

    [WIP] rework keyboard to have 3x4 grid and support different screen size for macos and web

    I'm not super happy with this solution, because I'm hardcoding 3x4 keyboard style here, but seems like it is the primary use case of the widget. This solution solves issues with occasional 2x6 keyboard on some landscape screens.

    The best way to test is to run macOS example or web example and flex it

    opened by xPutnikx 0
  • Add canPop() condition

    Add canPop() condition

    Checks if the navigator can pop. This avoids an error I get when a passcode has successfully completed. The functionality continues to work as expected after this change.

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

    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.

    opened by Quyaz 0
Owner
Vladimir Hudnitsky
CIO @ Profoto
Vladimir Hudnitsky
This package gives you lock screen or pass code page

Flutter Pass Code Page or Pin Code Page Package This package gives you beautiful pass code page for using both android and ios. Demo Finger Print Usag

Yasin ilhan 61 Aug 22, 2022
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Rotate Dial Lock

Rotary dial Locker Dependencies : How it works Most magic handle by GuesterDetector. onPanEnd onPanDown onPanUpdate SpringHouse, 1st we locate where u

Md. Yeasin Sheikh 10 Dec 21, 2022
Backs up Android devices on Linux, macOS and Windows. Backup your device without vendor lock-ins, using insecure software or root.

Backs up Android devices on Linux, macOS and Windows. Backup your device without vendor lock-ins, using insecure software or root. Supports encryption and compression out of the box.

null 255 Dec 31, 2022
Flutter onboarding screen - An example of onboarding screen on Flutter

Flutter Onboarding Screen IntroViews is inspired by Paper Onboarding. Thanks to Fluttery. Future Development Pull requests and suggestions welcome. Lo

Ümit Duran 198 Aug 3, 2022
Flutter screen adaptation, font adaptation, get screen information

flutter_screenutil A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes! Note: This pl

OpenFlutter 3.4k Jan 6, 2023
Authentication + Splash Screen Flutter UI, UI created getting inspired from one share on dribble with flutter

Rest App, with Firebase Auth + SplashScreen UI created getting inspired from one share on dribble with flutter, after getting amazing responce, Added

Sanskar Tiwari 202 Dec 17, 2022
Flutter plugin to manage home screen widget within flutter app.

Flutter App Widget App Widget / Home Screen widget plugin for flutter app Usage Please see app_widget subdirectory for the usage documentation. Plafor

Alexander Dischberg 6 Dec 16, 2022
This repository is Watch_App Screen UI - Flutter

watch_flutter A new Flutter Watch_Shop application. Designed by Adarsh Goldar, Code with Flutter by Kishor Kc. Kishor KC Design credit by Adarsh Golda

Kishor Kc 7 Nov 22, 2022
This repository is Online_Learning Screen UI - Flutter. I am fetching the data from the local JSON API.

online_learning A new Flutter Online_Learning application. Designed by Arun PP, Code with Flutter by Kishor Kc. Kishor Kc I am fetching the data from

Kishor Kc 14 Jul 5, 2022
Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? Flutter Shortcuts Plugin is known for : Flutter Shortcuts Fast, performant &

Divyanshu Shekhar 39 Sep 26, 2022
Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Compatibility ✅ Android ❌ iOS (active issue: iOS support for quick actions) Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? F

Devs On Flutter 39 Sep 26, 2022
This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc.

screen_retriever This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc. screen_retriever P

LeanFlutter 27 Dec 6, 2022
A Flutter plugin to request the device unlock screen.

device_unlock A Flutter plugin to request the device unlock screen on Android and iOS. How does it work The following attempts and fallbacks are made:

Cíngulo 19 Sep 7, 2022
Application to practice creating different types of screen in flutter

Diseño de paginas en flutter. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Diego Martinez 2 Nov 29, 2021
Simple Flutter Movie List & Detail Screen ui.

MovieDetail using Flutter Getting Started For help getting started with Flutter, view our online documentation. Classes used from Library WidgetCarous

Vivek Sharma 38 Nov 5, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Flutter Login Screen with Firebase Auth and Facebook Login Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinv

null 296 Dec 29, 2022
A basic login/register screen that can be used as a template for future Flutter projects.

A Flutter / Firebase login screen A simple flutter/dart based login-screen that connects with Firebase Auth to enable users to sign-in/up with Email o

Kim Andre Langholz 142 Dec 20, 2022