From this thread I found that there are many ways of hiding a widget from the tree hierarchy. Like using:
Visibility
:
Visibility(
visible: false,
child: Foo(),
);
Offstage
:
Offstage(
offstage: true,
child: Foo(),
);
Opacity
:
Opacity(
opacity: 0,
child: Foo(),
);
if
condition:
if (visible) {
child
}
and what not.
Which one of them is preferred (I know Visibility
is the one, by why Visibility
), what's the difference between if
condition and Visibility
, how do I measure the performance. Opacity
docs mentions:
Opacity is more efficient than adding and removing the child widget from the tree on demand.
What does that mean, was it for if
condition? If yes, where does if
stand then among the four?
Invisible: The widget takes up physical space on the screen but is not visible to user.
isVisible. This property controls the visibility of a widget on the form. If set to false, the widget is not displayed.
In Flutter, it tends to be done effectively utilizing Visibility a widget. The widget you need to show or hide must be the child of Visibility widget. In the constructor, pass visibility alternative whose value is a boolean and is put away as the state. Then, at that point, update the value to show or hide the child .
Opacity class Null safety. A widget that makes its child partially transparent. This class paints its child into an intermediate buffer and then blends the child back into the scene partially transparent.
Opacity
This one sets the opacity (alpha) to anything you want. Setting it to 0.0
is just slightly less visible than setting it to 0.1
, so hopefully that's easy to understand. The widget will still maintain its size and occupy the same space, and maintain every state, including animations. Since it leaves a gap behind, users can still touch it or click it. (BTW, if you don't want people to touch an invisible button, you can wrap it with an IgnorePointer
widget.)
Offstage
This one hides the child widget. You can imagine it as putting the widget "outside of the screen" so users won't see it. The widget still goes through everything in the flutter pipeline, until it arrives at the rendering stage, where it doesn't layout or paint anything at all. This means it will maintain all the state and animations, but just won't occupy any space during "layout stage", and won't draw anything during "paint stage". Because it leaves no gap behind, naturally users cannot click it.
Visibility
This one combines the above (and more) for your convenience. It has parameters like maintainState
, maintainAnimation
, maintainSize
, maintainInteractivity
etc. Depending on how you set those properties, it decides from the following:
if you want to maintain state, it will either wrap the child with an Opacity
or with an Offstage
, depends on whether you also want to maintain size. Further, unless you want to maintainInteractivity
, it will also wrap an IgnorePointer
for you, because clicking on a transparent button is kinda weird.
if you don't want to maintainState
at all, it directly replaces the child
with a SizedBox
so it's completely gone. You can change the blank SizedBox
to anything you want, with the replacement
property.
Removing Widget
If you don't need to maintain states and etc, it's usually recommended to completely remove the widget from the tree. For example, you can use if (condition)
to decide whether to include a widget in a list, or use condition ? child : SizedBox()
to replace it with a SizedBox
directly. This avoid unnecessary calculations and is the best for performance.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With