In Flutter, you often need to conditionally show or hide widgets based on certain conditions or user interactions. This section will explore different techniques and widgets that can be used to achieve conditional show/hide operations in your Flutter applications. We will leverage the Visibility and Offstage widgets discussed earlier and other related approaches.

Using the Visibility Widget in Flutter

The Visibility widget is a flexible and efficient way to toggle visibility without removing the widget from the widget tree. It keeps the widget’s layout intact, making it ideal if you want to keep the widget’s space reserved even when it’s hidden. Let’s walk through an example of how to use it effectively.

class VisibilityExample extends StatefulWidget {
  const VisibilityExample({Key? key}) : super(key: key);

  @override
  _VisibilityExampleState createState() => _VisibilityExampleState();
}

class _VisibilityExampleState extends State<VisibilityExample> {
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lines'),
      ),
      body: Container(
        color: Colors.black87,
        child: Stack(alignment: Alignment.bottomCenter, children: [
          ListView(
            shrinkWrap: true,
            children: [
              Container(
                height: 200,
              ),
              InkWell(
                onTap: () {},
                onHover: (value) {
                  print(value);
                  setState(() {
                    visible = !visible;
                  });
                },
                child: Visibility(
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                  visible: visible,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.arrow_left_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.add_circle_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.remove_circle,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(
                          Icons.arrow_right_outlined,
                        ),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      IconButton(
                        color: Colors.white54,
                        icon: const Icon(Icons.replay_circle_filled_outlined),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ]),
      ),
    );
  }
}

The Visibility widget also allows for advanced control over the widget’s state, including maintaining the widget’s state, size, and semantics when it is not visible. For example, using the replacement property, you can display an alternative widget when the primary widget is hidden:

 bool _isVisible = true;

  void toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

///////////

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

In addition to the Visibility widget, Flutter provides another useful widget for hiding widgets called the Offstage widget. While the Visibility widget modifies the constraints of its child widget, the Offstage widget completely removes the child widget from the widget tree when it is hidden.