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.