Flutter – Concept of Visible and Invisible Widgets
In this article, we will see how we can change the visibility of widgets in flutter. We will learn about various methods for managing the visibility of flutter widgets. There are a couple of ways to manage the visibility of widgets in flutter.
Method 1: Using Visibility class
It has a visible property that manages whether the child is included in the widget subtree or not. When it is set to false, the replacement child generally a zero-sized box is included instead.
Example 1: Showing the child widget by setting the visible parameter true of the Visibility widget
Explanation: In this body of this flutter app the Center is the parent widget holding a Column widget which in turn is having two Text widget and a Visibility widget as its children. The Visibility widget is placed in between the two Text widgets and it contains the text ‘two‘. The visible parameter in the Visibility widget takes a boolean value as the object and here it is set to true, which make the Text widget containing ‘two‘ visible.
Example 2: Hiding the child widget by setting the visible parameter as false
Explanation: In this case, the second Text widget in the app body is wrapped with the Visibility widget and its visible parameter is set to false which makes disappear from the screen without leaving the space it had occupied in the previous example.
Example 3: In this example, we will see how to leave space for the hidden or invisible widget.
Explanation: If you look at the output of the second example you will notice that the space the Text widget (child of Visibility class) use to take is not there. For instance, if we want to make a widget disappear but the space it use to take should be empty instead of replacing it with the following widget then we can employ maintainSize parameter of the Visibility class which also take a boolean value as the parameter. In the above maintainSize is set to true.
Method 2: Using Opacity Class
The Opacity widget makes its child partially transparent.Opacity value decides whether the child will be painted or not. The child won’t be removed from the widget tree but it will still take up space and have interactivity.
Explanation: Similar to the second example the parent widget in the app body is Center which is holding a Column widget. Column widget is holding two Text widgets and in between that there is an Opcity widget whose child is a Text widget (‘two’ is the object in it). Inside the Opcity class, the parameter opacity is employed and is set to 0, which make the Text widget invisible here, but the place is used to occuipy is still there.
Method 3: Using Offstage Class
Offset widget lays the child out as if it was in the widget tree, but doesn’t paint anything. The child widget neither has any interactivity nor it takes any space.
Explanation: In this example, the second Text widget in the app body is wrapped with Offstage class. In the Offstage widget offstage is a property that taken in a boolean as the object, and in this case, it is set to true which makes the child (Text widget here) invisible as it is not painted on the screen, even the space occupied by the child is not there.