Aurum · Allocation
Aurum · Allocation is a production-ready Web3 Flutter screen from FlutterKit — free, with full source code.
Aurum · Allocation answers one question for a crypto holder: what slice of my portfolio is each coin? A 220x220 ring is drawn by a CustomPainter (_DonutPainter) that strokes a faint background track, then lays each asset as a round-capped arc separated by a small angular gap, starting at twelve o'clock — orange Bitcoin dominating, blue Ethereum, green Solana, and a thin blue USDC sliver. Centred inside the ring sits a stacked label: "Total value", a bold tabular-figure $21,822, and "4 assets". Below, a rounded hairline-bordered surface holds a legend of four rows split by inset dividers. Each row pairs a painted circular ticker badge (BTC, ETH, SOL, USD — coloured fill, tinted border, no logo) with the coin name, a thin LinearProgressIndicator weighted to its share, and a right-aligned percent (54.1%, 23.2%, 17.2%, 5.5%) over its dollar value. It is pure Flutter (SDK + dart: only) on a forced dark theme with bundled Inter font; rows are InkWell-tapped and report the ticker via onAssetTap, with onBack on the app bar — backend-agnostic, no images or glyphs.
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
- ✓_DonutPainter CustomPainter: background track plus per-asset round-capped arcs with an angular gap, starting at -pi/2 (twelve o'clock)
- ✓Centred ring overlay stacking 'Total value', a bold tabular-figure $21,822, and a '4 assets' count
- ✓Legend card with four InkWell rows on a rounded hairline-bordered surface, separated by inset Dividers
- ✓Painted circular ticker badges (BTC/ETH/SOL/USD) using tinted fill and border — no network logos, no emoji glyphs
- ✓Per-asset LinearProgressIndicator share bars plus right-aligned percent and dollar value in tabular figures
- ✓onAssetTap(ticker) and onBack callbacks, forced ThemeData.dark, bundled Inter font — pure Flutter, backend-agnostic
Use cases
- ✓Crypto wallet portfolio breakdown showing how holdings split across coins
- ✓DeFi or exchange app's diversification view before rebalancing
- ✓Investment tracker summarising asset weights with a donut and legend
- ✓Neobank crypto tab giving users an at-a-glance allocation overview
