Widget TreeIntermediate30 XP3 min read
What is the difference between Opacity, Visibility, and Offstage?
TL;DR: Opacity paints transparently but still lays out and hit-tests. Visibility can remove the widget from layout. Offstage keeps the widget laid out but invisible and non-interactive.
Full Answer
| Aspect | Opacity(opacity: 0) | Visibility(visible: false) |
|---|---|---|
| Layout | Still occupies space | Replaced by SizedBox.shrink (no space) |
| Hit testing | Still receives touches | No touches |
| Painting | Composited to offscreen layer | Not painted |
| Performance | Creates compositor layer | No paint overhead |
Offstage(offstage: true) keeps the child laid out (size computed) but invisible and non-interactive. Useful for pre-computing sizes before showing a widget.
🎯
Animating opacity via AnimatedOpacity or FadeTransition is GPU-accelerated. Prefer it over animating alpha in CustomPainter.
Code Examples
dartChoosing the right hide widget
Output
Opacity: invisible but space preserved and tappable. Visibility: collapses space. Offstage: invisible, space preserved, not tappable.
Common Mistakes
- ✗Using Opacity(0) expecting no touch events — use AbsorbPointer or Visibility instead
- ✗Animating Opacity with a StatefulWidget instead of AnimatedOpacity (more efficient)
Interview Tip
💡
This question often comes up in performance context. Mention that Opacity creates an extra compositing layer, so for static hidden widgets, Visibility is better.
#Opacity#Visibility#Offstage#rendering#performance