Flutter - Hide / Show Widget Using Visibility

How to show or hide widget in Flutter using Visibility? Find out on this tutorial.

Sometimes, you may want to make a widget only shown in certain condition and hidden if the condition doesn't meet. In Flutter, it can be done easily using Visibility widget.

The widget you want to show or hide must be the child of Visibility widget. In the constructor, pass visibility option whose value is a boolean and is stored as state. Then, update the value in order to show or hide the child.

In this example below, there are three Card widgets. The second one (B) is wrapped inside Visibility widget. There's a button for switching the value of the state between true and false.

  import 'package:flutter/material.dart';
  
  class VisibilityExample extends StatefulWidget {
    @override
    _VisibilityExampleState createState() {
      return _VisibilityExampleState();
    }
  }
  
  class _VisibilityExampleState extends State {
    bool _isVisible = true;
  
    void showToast() {
      setState(() {
        _isVisible = !_isVisible;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Visibility Tutorial by Woolha.com',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Visibility Tutorial by Woolha.com'),
          ),
          body: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RaisedButton(
                  child: Text('Show/Hide Card B'),
                  onPressed: showToast,
                ),
                Card(
                  child: new ListTile(
                    title: Center(
                      child: new Text('A'),
                    ),
                  ),
                ),
                Visibility (
                  visible: _isVisible,
                  child: Card(
                    child: new ListTile(
                      title: Center(
                        child: new Text('B'),
                      ),
                    ),
                  ),
                ),
                Card(
                  child: new ListTile(
                    title: Center(
                      child: new Text('C'),
                    ),
                  ),
                ),
              ],
            ),
          )
        ),
      );
    }
  }
  
  void main() => runApp(VisibilityExample());

If you try to run the code and press the button, Card B will be disappear and Card C will be moved up occupying the are that was Card B's. However, you can also pass a replacement of type Widget in the constructor. If you do that, Card B will be replaced with the replacement widget when it's not visible.

  Visibility (
    visible: _isVisible,
    child: Card(
      child: new ListTile(
        title: Center(
          child: new Text('B'),
        ),
      ),
    ),
    replacement: Card(
      child: new ListTile(
        title: Center(
          child: new Text('B replacement'),
        ),
      ),
    )
  ),

If you want to make a widget invisible by setting its opacity, you can consider to use Opacity widget.

Below is the list of options supported by Visibility widget constructor.

OptionDescription
Widget child (required)The widget that will be shown or hidden depending on visibility value.
Widget replacementThe widget that will be shown if the child is not visible. Default is SizedBox.shrink.
bool visibleUsed to control whether the child is shown or not. Default is true.
bool maintainStateWhether to maintain the child's state if it becomes not visible. Default is false.
bool maintainAnimationWhether to maintain the child's animations if it becomes not visible. Default is false.
bool maintainSizeWhether to maintain space for where the widget would have been. Default is false.
bool maintainSemanticsWhether to maintain the semantics for the widget when it is hidden (e.g. /// for accessibility). Default is false.
bool maintainInteractivityWhether to allow the widget to be interactive when hidden. Default is false.