Aurum · Order Book
Aurum · Order Book is a production-ready Web3 Flutter screen from FlutterKit Pro, installable with flutterkit add web3-trade-orderbook.
A full-height crypto order book for the Aurum exchange on a near-black (#0B0E11) dark canvas with the bundled Inter font. The top bar reads "BTC/USDT · Order book" with a back chevron. Below, headers "Price (USDT)" and "Amount (BTC)" sit beside a tappable precision pill ("1" with an unfold chevron) that cycles grouping through 0.1 / 1 / 10 / 50 via setState. The ladder is a single ListView: seven red ask rows descending toward the spread, a bold center row showing last price 64,130.00 in green with an up-arrow and a right-aligned "Spread 4.8 · 0.02%" block, then seven green bid rows. Each row is a Stack — a right-aligned FractionallySizedBox paints a translucent cumulative depth bar (alpha 0.12) behind tabular-figure price and size text, so bars grow with resting liquidity. A pinned footer shows buy/sell pressure: "B 58%" in green, a flex 58/42 two-color Row clipped to rounded corners, and "42% S" in red. Pure Flutter (Flutter SDK + dart: only), no network images or glyphs for the bars; the onBack callback keeps it backend-agnostic and drop-in.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓web3_trade_orderbook_screen.dart — a single self-contained StatefulWidget with a forced dark Theme
- ✓Bid/ask ladder built from a ListView of _LadderRow widgets with red asks above and green bids below the spread
- ✓Cumulative depth-bar backgrounds via Stack + right-aligned FractionallySizedBox at 12% alpha, no CustomPainter or images needed
- ✓Tappable precision/grouping pill cycling 0.1 / 1 / 10 / 50 through setState
- ✓Center spread row: last price 64,130.00 with up-arrow plus a 'Spread 4.8 · 0.02%' readout, all in tabular figures
- ✓Pinned buy/sell pressure footer using a flex 58/42 two-color Row clipped with ClipRRect
Use cases
- ✓A crypto exchange app showing live BTC/USDT resting liquidity before placing a trade
- ✓A DeFi or Web3 wallet's market-detail tab where users gauge bid/ask depth and spread
- ✓A trading terminal companion screen pairing the order book with a chart and order ticket
- ✓A market-microstructure or analytics view highlighting buy/sell pressure and depth imbalance
