Aurum · Lock Screen — Web3 Flutter screen
Web3
54 views

Aurum · Lock Screen

Aurum · Lock Screen is a production-ready Web3 Flutter screen from FlutterKit Pro, installable with flutterkit add web3-auth-lock.

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.

Reveal the one-line command to drop this screen into your project.

Licensed for unlimited commercial projects · resale prohibited · License

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

Related screens