Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visibility vs Offstage vs Opacity, which is best in hiding a child from widget tree?

Tags:

flutter

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?

like image 491
iDecode Avatar asked Jun 13 '20 04:06

iDecode


People also ask

Which is invisible widget?

Invisible: The widget takes up physical space on the screen but is not visible to user.

Which property controls the visibility of a widget on the form?

isVisible. This property controls the visibility of a widget on the form. If set to false, the widget is not displayed.

How do you set the visibility of a widget in Flutter?

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 .

What is the use of opacity in Flutter?

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.


1 Answers

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:

  1. 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.

  2. 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.

like image 99
user1032613 Avatar answered Oct 16 '22 19:10

user1032613