Handle widgets visibility easily in Flutter

When it comes to manage your widgets visibility in Flutter, you have many options. Flutter provides us with some cool widgets for this purpose. Let's look at them :)

Let's say you want to hide the following widget.

const child = Text("Hello World");

1. Use Opacity widget

    Opacity(
      opacity: 0.0,
      child: Container(
          child: child
      )
    );

This widget simply sets the child's opacity to zero but still renders it. So the child is hidden but takes space and you can interact with it.

2. Use Offstage widget

    Offstage(
      offstage: true,
      child: child
      )
    );

Offstage renders the child widget off set the screen. This means that the widget is not rendered in the subtree and so doesn't take any space.

3. Use Visibility widget

    Visibility(
      visible: false,
      child: child
      )
    );

Here the child widget is not rendered in the subtree, and Flutter uses instead a shrinked sized box to replace it. The result is pretty much the same as with Offstage.

Use whatever you want as per as your needs.

The image below summarizes all.

That's all for this post. Thanks :)