NavigationAdvanced50 XP3 min read
How do you display floating/overlay widgets outside the normal widget tree?
TL;DR: Flutter's Overlay widget is a stack of OverlayEntries that sits above all routes. Insert an OverlayEntry to display floating UI (tooltips, loading overlays, draggable widgets) on top of everything.
Full Answer
The Navigator itself is built on top of an Overlay. You can insert your own OverlayEntries to show floating widgets above all routes without pushing a new route.
- ▸Overlay.of(context).insert(entry) — add an entry above all content
- ▸entry.remove() — remove the overlay entry
- ▸OverlayEntry(builder: ...) — builds the floating widget
- ▸Use cases: custom tooltips, in-app notifications, tutorial pointers, loading spinners
🎯
Always call entry.remove() when the overlay is no longer needed. Overlay entries don't clean themselves up — they persist until explicitly removed.
Code Examples
dartLoading overlay with OverlayEntry
Output
Semi-transparent black overlay with spinner covers entire screen during network call; removed on completion
Common Mistakes
- ✗Not calling entry.remove() on error — loading overlay stays permanently
- ✗Creating OverlayEntry inside build() — creates a new entry every rebuild
Interview Tip
💡
Overlay is rarely asked but shows deep Flutter knowledge. Mention it as the mechanism behind Tooltip, DropdownMenu, and SnackBar.
#Overlay#OverlayEntry#tooltip#floating#popup