I thought I’d write a quick snippet / tutorial on how you can easily write a generic widget to manage visibility in your Flutter application. It’s a pretty common task and it’s something that, once you’ve written it, you’ll probably re-use across all your projects. But, before we begin, let’s talk about what visibility means.

For most use cases there are going to be four specific visibility states:

Visible

This is self explanatory.

Invisible

Rendered in place. Is not visible and is not interactive. You will probably use this state in conjunction with another constrained widget (e.g: Container) because Invisible widgets will still occupy space on the screen even though they’re not interactive and not visible. For example, you may have a Container with a background that has an Image that is invisible until it loads. You don’t want the UI jumping around in this case.

Offscreen

Rendered off screen. Is not visible and is not interactive. It will still incur a cost but it is generally OK because it is useful for doing widget size calculations where you don’t need to show the widget all of the time. For example, if you need to calculate the size of a widget for the end state of an animation where the widget is only visible right at the end.

Gone

Your widget is not rendered at all. Ideally the widget is never included in the widget tree. It should incur a zero or close to zero cost.

Regarding cost, you should consider the following: It is always going to be better for your app to never include the widget in the first place. This way Flutter doesn’t have to worry about widgets that aren’t ever going to be displayed. If it’s something that you may include based on some state then you can still use this approach as well but it may help to simplify things by using a more generic mechanism. In general, your approach will be a bit like: