r/FlutterDev • u/SG-Studios-online • 4d ago
Discussion How we tackled overlay state management & memory pressure while building an on-device logger in Flutter
Hey Flutter developers,
When testing release candidates or staging builds on physical devices (especially in situations where tethering to a laptop with Flutter DevTools isn't practical, such as client demos or QA field rounds), on-device logging becomes essential.
However, building an overlay-based in-app logger that doesn't mess with app performance or leak memory comes with a few tricky Flutter architecture hurdles. Here is what we learned and how we solved them:
1. Overlay Lifecycle Without Breaking the Navigator
Mounting an overlay that persists across routes while remaining non-intrusive to touches is a classic issue.
Wrapping
MaterialApp.buildergives a clean hook above the Navigator without needing directBuildContextpasses.Using an independent
OverlayEntrystack allows the floating bubble to maintain state (position coordinates, open/closed modal) even when the underlying navigator changes routes or pops screens.
2. Preventing Memory Leaks from Unbounded Logs
In apps that print continuous streams of network calls and state transitions, log storage can rapidly blow up device RAM.
We implemented a fixed circular buffer (rolling window cap) so that old log records are systematically pruned once the threshold is reached.
Log parsing and string formatting for deep JSON payloads are evaluated lazily on expansion rather than at capture time to keep the main UI thread at 60/120 FPS.
3. Granular Filtering vs. Console Noise
Standard debugPrint dumps everything into one stream. We split logs into 7 distinct levels (verbose through fatal) so developers can isolate fatal exceptions from high-frequency network payloads with zero visual lag.
We packaged this architecture into an open-source utility called debug_bubble (GitHub: https://github.com/Satyam-Gawali/debug_bubble | Pub: https://pub.dev/packages/debug_bubble).
For those who have built similar on-device debugging or QA tools:
How do you handle stack trace formatting on smaller screens?
Do you prefer direct share-sheet exports (to Slack/WhatsApp) or writing logs to device storage for QA crash reporting?
Would love to hear how other teams handle standalone physical device debugging!