DEV Community

Ethiel ADIASSA
Ethiel ADIASSA

Posted on

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
      )
    );

Enter fullscreen mode Exit fullscreen mode

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
      )
    );

Enter fullscreen mode Exit fullscreen mode

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
      )
    );

Enter fullscreen mode Exit fullscreen mode

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.

Imgur

That's all for this post. Thanks :)

Top comments (1)

Collapse
 
sub8s profile image
Subrahmanya S M

how to test Gone ?