Flutter - Concept of Visible and Invisible Widgets

Last Updated : 27 Mar, 2023

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.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// TextStyle widget constant
const TextStyle kstyle = TextStyle(fontSize: 60);

// Main class 
// Extending StatelessWidget
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 the 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 constant
const 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 constant 
const 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: 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 takes 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.

Example 4:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// TextStyle widget constant
const 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.

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.

Example 5:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const FirstApp());
}

const TextStyle aayush_style = TextStyle(fontSize: 60);

class FirstApp extends StatelessWidget {
  const FirstApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Aayush"),
          backgroundColor: const Color.fromRGBO(15, 157, 88, 1),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
            Text("One", style: aayush_style),
             // Offstage widget to manage visibility
              Offstage(
                offstage: false,
                child: Text("Two", style: aayush_style,),
              ),

              Text("Three", style: aayush_style)
            ],
          ),
        ),
      ),
    );
  }
}

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.