Screen · Food
Nutrition SwiftUI Screen
A week in packed bubbles you tap to focus, with a progress figure and capsule bars.
A statistics screen built on a packed bubble chart: each bubble is a category sized by its share, packed with a physics-free solver and allowed to crop at the edge. Tap one to focus it while the rest re-pack around it; a giant progress figure with a dot grid and a column of capsule bars sit below.
- SwiftUI
- iOS 17.0+
- bubble-chart
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- Packed bubbles sized by share that re-pack around the one you tap
- A giant progress figure over a dot grid
- Capsule bar columns for the week
- Chart data exposed to VoiceOver through Audio Graphs
- The Nutrition screen from the preview, ready to adapt
In the Build Kit
Candy (style). Your agent builds around this screen in the same design.
Used in
Meal Planner (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
Each bubble is a food group, its area set by its share of the week, packed tightly around the largest and allowed to run past both edges of the screen. Tap one and it grows to the middle while the rest re-pack around it in one spring, showing what it adds up to; tap it again to let go. Below the chart, a giant percentage of the weekly plan sits over a dot grid of the week's meals (cooked, skipped, still ahead), and the days stand as columns of capsule bars, one capsule per meal.
Notes
BubbleChartfills the frame you give it and never clips, so place it full width and let the screen crop the outer bubbles. It takes its data, colours and fonts through parameters and reads no theme.- The packing is a small deterministic solver, not a physics simulation: bubbles are placed largest first (the focused one before all), each at the closest spot that touches its neighbours without overlapping, then the cluster is scaled to fit the height. The same steps run in the web preview, so both draw the same picture.
- Labels stay readable when a bubble runs past an edge: they slide toward the middle of the screen while staying inside their bubble.
- Every bubble is a button with its group and share for VoiceOver, with the selected trait when focused, and the chart exposes its data to Audio Graphs through an accessibility chart descriptor.
- Reduce Motion swaps the re-pack spring for a short ease.
BubbleChartExampleat the end ofBubbleChart.swiftis the screen shown in the preview, with the plan card, the daily balance columns and the app's floating bar. Copy it as a starting point.
03
Keep building
Pieces that work well next to this one.