Aurum · Profit & Loss
Aurum · Profit & Loss is a production-ready Web3 Flutter screen from FlutterKit Pro, installable with flutterkit add web3-home-pnl.
Aurum's Profit & Loss screen opens on a large green +$2,564.80 "Total profit" headline, then a 150px CustomPainter chart that traces a P/L line above a hairline zero baseline with a soft top-to-bottom green gradient fill and a dot marking the latest point. A row of five timeframe pills (1W, 1M, 3M, 1Y, ALL) sits below — the active pill (1M) gets a raised surface chip and amber label, and tapping one swaps the painted curve via setState. Two bordered split cells break the number into "Realized" (+$1,712.50) and "Unrealized" (+$852.30). A "By asset" card lists BTC, ETH, SOL and LINK, each with a painted tinted ticker badge, full name, and a right-aligned dollar gain plus percent — Solana shows red -$284.10 / -7.0% while the rest are green, all using tabular-figure number alignment. Built as one self-contained StatefulWidget: pure Flutter with a bundled Inter font, forced dark theme, no network images or icon glyphs, and an onBack callback so it drops into any navigation stack backend-agnostically.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_PnlChartPainter CustomPainter drawing the P/L line, zero baseline, gradient fill and end-point dot from a normalized points list
- ✓Five tappable timeframe pills (1W/1M/3M/1Y/ALL) that swap the painted curve via setState with an active amber-on-surface chip
- ✓Realized vs Unrealized split cells (_SplitCell) with green/red colouring driven by a positive flag
- ✓By-asset P/L card (_AssetPnlRow) with painted tinted ticker badges, dollar gain and signed percent per coin
- ✓Tabular-figure number styling on all amounts so digits stay aligned, plus a back IconButton wired to an onBack callback
- ✓Single self-contained StatefulWidget, bundled Inter font, forced dark ThemeData, no network images or emoji glyphs
Use cases
- ✓A crypto wallet's portfolio P/L tab showing realized and unrealized gains
- ✓A DeFi or exchange app's per-asset profit breakdown with timeframe filtering
- ✓An investment tracker summarizing total return over 1W to ALL ranges
- ✓A trading app's performance screen with a painted gain/loss curve and coin rows
