How To Properly Use Flutter Visibility Widget

In this Flutter tutorial, we’ll practically learn the usage of the Flutter visibility widget. We’ll go through multiple code examples to better understand the features and working of this Flutter widget.

Code for the examples used in this article will also be available in this very article, so you can check them out in case you are stuck somewhere while implementing the visibility widget in your own Flutter app.

Let’s now get started.

What is Flutter Visibility Widget?

This widget is used to show, hide, or replace its child widget. It takes a boolean value which if true, then it’ll show its child widget, and if it is false, then it’ll hide that child widget.

The visibility widget also comes with an additional feature in which you can specify some other widget in case the main widget is hidden or when the visibility is given a false boolean value.

Let’s now understand this concept with the help of practical Flutter code examples.

Implementing Visibility Widget Examples

In our first example, we’ll simply hide and unhide the Flutter widget provided as a child to the Flutter visibility widget. Then, in the second example, we’ll show a new widget in place of the main child widget.

Example 1: Hide/Unhide Widget using Flutter Visibility Widget

In this example, we’ll create a Flutter container widget and give it some height, width, and background color. See below:

Container(
        height: 100,
        width: 100,
        color: Colors.green,
      )

flutter container widget having a green background color

Now we’ll wrap it with a visibility widget. See below:

Visibility(
   child:  // the same above container
 )

flutter container widget having a green background color

We can see the container here as well. The reason is that by default, the visible constructor is passed true as it takes a boolean value. If this value is true then the child widget will be shown and if it’s false, then it’ll hide that widget.

In order to see it practically, we’ll create a simple Flutter material button that’ll be used to change the value that is passed to the visible constructor.

Step 1: Boolean variable

bool showItem = false;

The value of this boolean will be used to hide/unhide the container.

Step 2: Material Button

 MaterialButton(
            onPressed: () {
              setState(() {
                showItem=!showItem;
              });
            },
            color: Colors.grey.shade300,
            child: Text('Show/Hide Container'),
          )

flutter material button widget with a grey background color

When the user taps on this button the the value of the showItem boolean will be changed. If its currently true then it’ll be set to false and vice versa.

Step 3: Visible Constructor

Visibility(
        visible: showItem,
        child:  // same container
)

Passing the showItem to the visible constructor will get the last job done. Now if the value is true, then the child container will be shown, or else, it’ll be hidden.

Testing Phase

Let’s now test it.

Initially, the value of showItem is false so the container is hidden.

flutter container widget and a flutter material button widget with a grey background color

Tapping on the button sets the value to true as it was currently false. It results in the container being visible on the screen.

Tapping on the button again hides the container as the value is now again set to false.

Example 2: Replacement in Visibility Widget

The replacement constructor of the visibility widget is used to show a widget when the visible constructor is set to false. By default, the replacement is set to show a Flutter sized box widget with no size.

In this example, we’ll give it a new container widget. You can give it any Flutter widget of your choice. See below:

 Visibility(
replacement: Container(   // can use some other Flutter widget as well in its place
              height: 50,
              width: 50,
              color: Colors.blue,
              margin: EdgeInsets.only(bottom: 21),
            ),
visible: showItem,
child: // can use same container given in the above examples
)

flutter visibility widget with replacement widget

By default, the showItem value is false, which results in the replacement widget to display on the screen. We tapped on the buttons and in the second image, you can see that the widget given to the child constructor of visibility is now displayed. So this is how we can show our custom widget as well.

This is how we can use the Flutter visibility widget. Do share it with other Flutter programmers if you like this tutorial.

Customized Flutter Visibility Widget Source Code

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VisibilityWidgetExamples(),
    );
  }
}

class VisibilityWidgetExamples extends StatefulWidget {
  const VisibilityWidgetExamples({super.key});
  @override
  State<VisibilityWidgetExamples> createState() =>
      _VisibilityWidgetExamplesState();
}
class _VisibilityWidgetExamplesState extends State<VisibilityWidgetExamples> {

  bool showItem = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Visibility(
            visible: showItem,

            child: Container(
              height: 100,
              width: 100,
              color: Colors.green,
              margin: EdgeInsets.only(bottom: 21),
            ),

            replacement: Container(
              height: 50,
              width: 50,
              color: Colors.blue,
              margin: EdgeInsets.only(bottom: 21),
            ),
          ),

          MaterialButton(
            onPressed: () {
              setState(() {
                showItem = !showItem;
              });
            },
            color: Colors.grey.shade300,
            child: Text('Show/Hide Container'),
          )
        ],
      )),
    );
  }
}

Conclusion

In conclusion, we’ve practically discussed how to use the Flutter visibility widget to show/hide its child widget. Also, we’ve learned how to display a custom widget when the visibility is false. Your valuable feedback would be much appreciated.

We’d also be super delighted to see you visit our other tutorials on Flutter app development. Thank you so much for reading this article.