Screen · Finance

Wallet SwiftUI Screen

A SwiftUI wallet UI of stacked cards and passes you can bring forward, fan out and reorder.

Wallet-style stacked cards: tap to bring one to the front while the rest fan down with staggered springs, drag down to return, long-press to lift and reorder, with haptics on lift and settle.

  • SwiftUI
  • iOS 17.0+
  • wallet-stack
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • Tap a card to bring it forward while the rest fan down
  • Long-press to lift and reorder, written back to your array
  • Staggered springs, with haptics on lift and settle
  • VoiceOver move up and move down actions
  • The Wallet screen from the preview, ready to adapt

In the Build Kit

Studio (style), Personal Finance (brief), Send Money (recipe). Your agent builds around this screen in the same design.

Used in

Finance App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Cards overlap with a fixed peek and soft shadows. Tap one and it springs to the top while the rest fan down to the bottom edge with staggered springs, each slightly smaller; drag the front card down, tap it, or tap the fan to return it. Long-press a card in the stack to lift it (larger, deeper shadow, rigid haptic) and drag it to a new slot; the others move out of the way and the card settles with a soft haptic. Each card face is a caller-provided view, and the order is a binding so reordering writes back.

Notes

  • States: stacked, pressed (0.98 while a long-press is arming), lifted (1.04 with a 24pt shadow), front, fanned (0.96, tighter peek at the bottom). The fan uses settle.delay(index * 0.03) for the stagger and no delay under Reduce Motion.
  • Reorder is a LongPressGesture(0.3s) sequenced before a DragGesture(minimumDistance: 0). The target slot is round(translation / peek); when it changes, the card is moved in the array and the finger offset is adjusted by the slot distance so the card never jumps.
  • The front card's downward drag rubber-bands upward and returns when predictedEndTranslation passes 40% of the card height. Gestures switch by state: front card gets tap-or-pull, stacked cards get long-press-or-tap.
  • Every card is a VoiceOver button with "Move up" and "Move down" custom actions; the container is labeled "Cards".
  • Content is wrapped in AnyView so a heterogeneous list of faces can share one [WalletCard] binding. Keep faces light; the stack renders every card.
  • WalletStackExample at the end of WalletStack.swift is the screen shown in the preview; copy it as a starting point.