Show Hide Widgets in Flutter using Visibility Widget

Sometimes you may need to show and hide a widget in Flutter based on some conditions. For example, you may want to hide the number of likes when you don’t have any likes. You may also want to remove UI elements from the screen when users choose to delete them. So in this tutorial, we’ll learn how to show hide widgets in Flutter using Visibility widget.

Here’s what we’ll cover:

• What is Visibility Widget
• Steps to Show Hide Widgets in Flutter using Visibility Widget
• Maintaining the Size when Hidden
• Showing Replacement Widget

What is Visibility Widget

In Flutter, The Visibility widget is used to show and hide the widget. The Visibility widget has a property called visible. It accepts a boolean value. Setting the True will show the widget while setting it to false will hide the widget.

Code Example:

Visibility(
  visible: true,
  child: Image.asset(
    'assets/images/eye_open.png',
    height: 300,
    width: 300,
  ),
)

Output:

Hint: When you set the visible flag to false, the Visibility widget internally removes the child from the widget tree itself. This gives the impression of the child widget being hidden.

Steps to Show Hide Widgets in Flutter using Visibility Widget

To programmatically show hide widgets in Flutter using Visibility widget, simply wrap your widget inside the Visibility widget and then control its visibility using the variable. You can set the variable value from anywhere and then rebuilding the screen shows or hides the widget.

Here are the step by step instructions:

Step 1: Create a variable something likebool _isShow = true; in your class that holds the state of visibility.

Step 2: Wrap your widget inside the Visibility widget.

Step 3: Add the visible parameter (inside Visibility) and assign the previously created variable name.

Step 4: Add the ElevatedButton (below the visibility widget) to set the variable value. 

Step 5: Inside the onPressed event of ElevatedButton, set the _isShow to true if its current value is false and false if its current value is true.

Step 6: Run the app.

Code Example:

bool _isShow = true;
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ...,
    body: Center(
      child: Column(
        children: [
          const SizedBox(
            height: 50,
          ),
          Visibility(
            visible: _isShow,
            child: Image.asset(
              'assets/images/hen.png',
              height: 300,
              width: 300,
            ),
          ),
          const SizedBox(
            height: 50,
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.black,
            ),
            onPressed: () {
              setState(
                () {
                  _isShow = !_isShow;
                },
              );
            },
            child: Text(
              _isShow ? 'Hide' : 'Show',
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    ),
  );
}

Output:

Maintaining the Size when Hidden

If you notice the previous example, by default the Visibility widget removes the child widget from the widget tree. Hence the space reserved by the child widget gets free and the Button gets shifted. In some cases, this can annoy your users as all the UI below gets shifted.

To fix this issue, we can preserve the space (reserved by the child widget) by setting the maintain flags to true.

Here’s how you do that:

• Add the maintainSize, maintainAnimation, maintainState parameter, and set its value to true.
• Run the app

Code Example:

Visibility(
  visible: _isShow,
  maintainSize: true, //NEW
  maintainAnimation: true, //NEW
  maintainState: true, //NEW
  child: Image.asset(
    'assets/images/hen.png',
    height: 300,
    width: 300,
  ),
)

Explanation:

Setting the combination of maintainSize, maintainAnimation, maintainState to true will keep the space as it is and the UI below the hidden widget won’t be shifted.

In this case, Visibility widget internally uses the Opacity widget and sets the opacity to 0 thereby giving the impression of the widget being hidden.

Hint: It’s advisable to not change these values dynamically.

Output:

Showing Replacement Widget

Sometimes you may want to display another widget when the primary widget is hidden. For example, you could display the closed eye icon when the users choose to hide the password.

To show the replacement widget:

• Add the replacement parameter (inside the Visibility widget) and assign the appropriate widget to it.
• Run the app.

Code Example:

Visibility(
  visible: _isShow,
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,
  replacement: Image.asset(
    'assets/images/eye_close.png',
    height: 300,
    width: 300,
  ),
  child: Image.asset(
    'assets/images/eye_open.png',
    height: 300,
    width: 300,
  ),
)

Output:

That’s it. I hope you liked it. Thanks!

Conclusion

In this tutorial, we learned how to show hide widgets in Flutter using visibility widget with a practical example. We also learned how to maintain the size while the widget is hidden. Finally, we saw how to display another widget when your primary widget is hidden by using the replacement parameter.

Would you like to check other interesting Flutter tutorials?