Aurum · Lock Screen
Aurum · Lock Screen is a production-ready Web3 Flutter screen from FlutterKit — free, with full source code.
The Aurum Lock Screen is the re-entry gate for a dark crypto wallet, rendered on a near-black 0xFF0B0E11 canvas. A 64px CustomPaint logo draws a gold-gradient hexagon with a stencilled "A" mark, under a bold "Enter passcode" heading and the muted "Unlock Aurum to continue" subline. Six circular passcode dots sit centered: empty dots use a hairline ring, filled ones fill solid gold (0xFFF0B90B). A self-painted numpad lays out 1-9, 0, a Face ID key (face_retouching_natural icon, gold) and a backspace key as InkWell circles inside Expanded rows, so it scales fluidly without fixed pixel math. Tapping six correct digits fires onUnlocked via a post-frame callback; a wrong sequence flips the dots red (0xFFF6465D), runs a 420ms sine-wave shake through an AnimationController plus Transform.translate, shows "Wrong passcode. Try again." then clears the code. A gold "Forgot passcode?" TextButton pins the bottom. Pure Flutter, bundled Inter font, forced dark Theme, fully backend-agnostic via onUnlocked, onBiometric, onForgot and a configurable expectedCode.
Full tutorial coming soon.
The step-by-step walkthrough and complete Dart source for this screen haven't been published yet. They'll be free when they are — no sign-up, no payment. In the meantime, browse the screens that already have their tutorial.
What's included
- ✓Stateful Web3AuthLockScreen exposing onUnlocked, onBiometric and onForgot callbacks plus a configurable expectedCode (default six digits)
- ✓CustomPaint _LogoPainter drawing a gold-gradient hexagon and stencilled "A" mark entirely on-canvas, with no network image
- ✓Six-dot _PasscodeDots indicator that fills gold and recolors red on error using a 1.6px-ring BoxDecoration per dot
- ✓Self-painted _Numpad of Expanded InkWell circle keys, including a gold Face ID biometric key and a backspace_outlined key
- ✓420ms wrong-code shake built from SingleTickerProviderStateMixin, an AnimationController and a sine-wave Transform.translate
- ✓Forced ThemeData.dark Scaffold on 0xFF0B0E11 with the bundled Inter font and a gold "Forgot passcode?" TextButton pinned at the bottom
Use cases
- ✓Re-entry passcode lock for a self-custody crypto wallet like Aurum
- ✓App-resume gate for any finance or trading app that auto-locks after idle
- ✓PIN unlock screen for a portfolio or banking app needing biometric fallback
- ✓Dark-themed numeric passcode lock for a secure notes or vault-style app
