Aurum · Market Depth
Aurum · Market Depth is a production-ready Web3 Flutter screen from FlutterKit — free, with full source code.
Aurum · Market Depth visualises an order book as cumulative liquidity instead of a flat ladder. It centres on a 240px CustomPaint chart (`_DepthPainter`) drawing two filled curves: a green bid wall rising from the left toward centre and a red ask wall climbing away to the right, each a stroked path over a translucent 14%-alpha fill, split by a thin vertical mid-price marker. Above it a colour-dot legend reports total Bids (3.84 BTC) and Asks (3.42 BTC); below it three labels anchor the axis — a low (63,490), the bold mid (64,130) and a high (64,770). A row of four equal-width zoom pills (±0.5% / ±1% / ±2% / ±5%) tightens or widens the price window; the active pill glows in Aurum's amber (0xFFF0B90B) via a GestureDetector + setState. A surface card underneath summarises Bid depth (2%), Ask depth (2%) and a coloured Imbalance reading (+5.8% bid) in tabular figures. Pure Flutter — bundled Inter font, forced dark theme, no network images, no glyph painting; the back arrow is wired through an `onBack` VoidCallback so it drops into any router.
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
- ✓`_DepthPainter` CustomPaint drawing twin cumulative bid/ask curves with translucent fills and a vertical mid-price marker
- ✓Four-state zoom range selector (±0.5%/±1%/±2%/±5%) with amber active styling via GestureDetector + setState
- ✓Colour-dot legend row showing total Bids 3.84 BTC and Asks 3.42 BTC
- ✓Three-point price axis row (low, bold mid, high) under the chart
- ✓Depth-stats card with Bid depth, Ask depth and a colour-coded Imbalance row using tabular figures
- ✓Bundled Inter font, forced dark ThemeData and `onBack` VoidCallback for drop-in routing
Use cases
- ✓Crypto exchange app showing order-book liquidity as a depth chart
- ✓DeFi / DEX trading terminal where users gauge bid/ask walls before swapping
- ✓Pro trading dashboard pairing this with a price chart and order book
- ✓Market-analytics tool surfacing liquidity imbalance around the mid price
