How to show/hide a widget in Flutter?

The Flutter framework was designed by Google company teams, like the Android operating system. It, therefore, incorporates new features of the operating system as it is developed. Moreover, an application created with the framework will also work on iOS from the same code. To display or hide a widget, the framework has integrated the same operation found with developing a native application for Android.

There are several ways to hide a widget. You can either hide it entirely or make it invisible, but the space it occupies is still there. With Flutter, both systems are supported through the “Visibility” property, just like a native Android app. The “Visible” attribute allows you to display or hide a widget according to your defined value.

visibility(
child: Text("Fully hidden widget"),
visible: false,
,


Other attributes allow the widget to keep its space while being invisible. The “maintainSize” attribute manages the size, “maintainanimation” takes care of the animation of the widget and “maintainState” takes care of the state. If you set all of these to “true” then the widget is not visible but still in your app and takes up space.

visibility(
child: Text("Invisible but still takes up space"),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: false, ),

If you are working with an older version of the framework, the “Visibility” attribute may not have been integrated yet. In this case, you need to work around the problem. To completely hide a widget and no longer occupy space, replace the container containing it with an empty container. To make it invisible while keeping the space, you can use the “Opacity” property, which controls the opacity of an element and assign a value of 0, which will make it impossible to see. Then move the code of your widget into the “Child” attribute.

new Opacity(opacity: 0.0, child: myWidget)