Flutter Passcode Lock Screen or how to reinvent a wheel

I would like to tell you a story on how I decided to migrate my project to Flutter and how I ended up reinventing the wheel.

I have an iOS application called Passkeep. This is a pretty straightforward app, to store passwords locally in an iPhone keychain.

I don’t trust the Internet. I won’t send passwords to any third party server. I want just to keep my passwords on my device!

Until the last year, I used touchID and FaceID as an authentication mechanism. However, according to the latest Apple’s requirements, you have to provide an alternative authentication method in case biometric auth is broken or disabled.

Ok, no probs, I found an awesome iOS library SmileLock which solved all my problems.

SmileLock demo with blur

Everything was fine until Flutter came…

Flutter

Flutter just impressed me with the nice UI stuff you could do easily and of course, it allows you to develop for both platforms at the same time.

I thought: “ Yes! It’s a great time to migrate my project to Flutter and get Android app ‘for free’ ”.

I’m not going to tell you how much time I spent trying to figure out why `flutter-local-auth` package doesn’t work on iOS < 11 and how complicated it was to smoothly migrate the existing native app users to the flutter app while keeping all passwords. It’s a long story for another article.

A lot (not really) open-source packages

The first problem I faced when I started to work on my new app is — there is no library for passcode authentication for Flutter! But… c’mon Flutter! Do I need to implement everything by myself? Do I really want to create my app on Flutter? Ok, I guess want…

I wanted to save an awesome experience you are getting by using SmileLock because it looks nice and native. So I basically replicated the logic you are getting from a native library but for Flutter.

The package I made is totally platform-agnostic and has a very customizable UI. It doesn’t care how you will verify password and where you store it. It just allows you to enter a passcode and react on verification success or fail.

Let’s take a look into details.

It’s all widgets!

First of all, the package provides you a widget of a passcode screen. Additionally, you could show it whenever you like.

Here is what you need to do to implement the widget for your app.

1. The screen has a default configuration of colors and sizes.
2. You have to verify the entered passcode yourself, the widget doesn’t have any storage or internal methods to verify passcode, it just returns it to a callback.
3. You have to notify the widget about the result of verification
4. All strings like ‘title’, ‘cancel’ and ‘delete’ are configurable and localizable

the default implementation of the passcode screen

As a result, you would get a widget which allows you to enter a passcode, returns the entered passcode, and performs a shake animation if the passcode is wrong.

Customization

Of course, you have your own theme and probably want to have some different style. So what could you customize?

First of all, it’s tiny circles which indicate how many digits user entered.

Note: extraSize used for shake animation and would be overridden

Then you should be able to customize how the keyboard looks.

This is what I got by applying a blue theme and bigger sizes.

customized passcode screen

Feel free to try the package and contribute to it!

I’d like to emphasize that there is a lot of work to do to make Flutter experience as awesome as native app development!
Look around and maybe you could create the next flutter package!

If you have any questions about the package just email me. Good luck!