Flutter – Concept of Visible and Invisible Widgets

21 Feb, 2022
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. 
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 
Dart
import 'package:flutter/material.dart'; void main() {  runApp(MyApp());} // TextStyle widget constantconst TextStyle kstyle = TextStyle(fontSize: 60); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text("GeeksForGeeks"),          backgroundColor: Color.fromRGBO(15, 157, 88, 1),        ),        body:            // to center the child widget            Center(          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: [              Text("one", style: kstyle),                             // Visibility widget to manage visibility              Visibility(                                 // showing the child widget                visible: true,                child: Text(                  "two",                  style: kstyle,                ),              ),              Text(                "three",                style: kstyle,              ),            ],          ),        ),      ),    );  }}
Output:
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
Dart
import 'package:flutter/material.dart'; void main() {  runApp(MyApp());} // TextStyle widget constantconst TextStyle kstyle = TextStyle(fontSize: 60); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text("GeeksForGeeks"),        ),        body:                     // to center the child widget            Center(          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: [              Text("one", style: kstyle),                             // Visibility widget to manage visibility              Visibility(                                 // hiding the child widget                visible: false,                child: Text(                  "two",                  style: kstyle,                ),              ),              Text(                "three",                style: kstyle,              ),            ],          ),        ),      ),    );  }}
Output:
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.
Dart
import 'package:flutter/material.dart'; void main() {runApp(MyApp());} // TextStyle widget constantconst TextStyle kstyle = TextStyle(fontSize: 60); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {    return MaterialApp(    home: Scaffold(        appBar: AppBar(        title: Text("GeeksForGeeks"),        ),        body:                     // to center the child widget            Center(        child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: [            Text("one", style: kstyle),                             // Visibility widget to manage visibility            Visibility(                                 // hiding the child widget                visible: false,                child: Text(                "two",                style: kstyle,                ),            ),            Text(                "three",                style: kstyle,            ),            ],        ),        ),    ),    );}}
Output:
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. 
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.
Example 4:
Dart
import 'package:flutter/material.dart'; void main() {  runApp(MyApp());} // TextStyle widget constantconst TextStyle kstyle = TextStyle(fontSize: 60); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text("GeeksForGeeks"),          backgroundColor: Color.fromRGBO(15, 157, 88, 1),        ),        body:                     // to center the child widget            Center(          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: [              Text("one", style: kstyle),                             // Opacity widget to manage visibility              Opacity(                                 // hiding the child widget                opacity: 0,                child: Text(                  "two",                  style: kstyle,                ),              ),              Text(                "three",                style: kstyle,              ),            ],          ),        ),      ),    );  }}
Output:
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 Opacity widget whose child is a Text widget (‘two’ is the object in it). Inside the Opacity class, the parameter opacity is employed and is set to 0, which make the Text widget invisible here, but the place is used to occupy is still there. 
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.
Example 5:
Code block
Output:
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.
ankit_kumar_
varshagumber28
sagar0719kumar
Picked
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Dialogs