How to show & hide widgets in Flutter

In this article, we will discuss how to show and hide the widgets in flutter. For these, we will use the Visibility widget that helps us to show and hide the widget. At first, we should know what is visibility in a flutter.

Visibility means Whether to show or hide a child. By the use of the Visibility Widget Learn us How To Show/Hide Widgets In our Flutter Apps. Generally, This widget has a property called visible which controls the state (visible or invisible) of the child that helps us to oversee whether the child is remembered for the widget subtree or not. At the point when it is set to false, the replacement child for the most part a zero-sized box has incorporated all things being equal.

Read: Insights On Flutter Widgets

Constructor that are used in Visibility

const Visibility({
  Key? key,
  required this.child,
  this.replacement = const SizedBox.shrink(),
  this.visible = true,
  this.maintainState = false,
  this.maintainAnimation = false,
  this.maintainSize = false,
  this.maintainSemantics = false,
  this.maintainInteractivity = false,
})

 There are various properties that are used in the visibility widget some of them are given below.

child used the widget that will be shown or hidden depending on visibility the value.
maintainAnimation used to maintain the child‘s animations if it becomes not visible. Default is false.
visible used to control whether the child is shown or not. Default is true.
replacementused the widget that will be shown if the child is not visible. Default is SizedBox.shrink.
maintainState used whether to maintain the child‘s state if it becomes not visible. Default is false.
maintainInteractivity used whether to allow the widget to be interactive when hidden. Default is false.
maintainSemantics used whether to maintain the semantics for the widget when it is hidden. Default is false.
maintainSize used whether to maintain space for where the widget would have been. Default is false.

Now we will take an example of how we can show and hide the widget with the help of the Visibility class.

import 'package:flutter/material.dart';

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

  @override
  State<VisibilityScreen> createState() => _VisibilityScreenState();
}

class _VisibilityScreenState extends State<VisibilityScreen> {
  bool isClicked = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Visibility Widget'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Visibility(
              visible: isClicked,
              maintainSize: true,
              maintainAnimation: true,
              maintainState: true,
              child: Container(
                height: 200,
                width: 200,
                color: Colors.green,
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Visibility(
              visible: isClicked,
              maintainSize: true,
              maintainAnimation: true,
              maintainState: true,
              child: Image.network(
                'https://scontent.fktm8-1.fna.fbcdn.net/v/t39.30808-6/277000740_4860211334098026_6444843293679179096_n.jpg?stp=dst-jpg_s960x960&_nc_cat=105&ccb=1-5&_nc_sid=e3f864&_nc_ohc=DLIztIEykVsAX8PDCXj&_nc_ht=scontent.fktm8-1.fna&oh=00_AT-9JLFOwDgOhe4Pr7MpYCX75W-WJElWiv5vvOE_rj6VBw&oe=624B69B4',
                height: 200,
                width: 300,
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    isClicked = !isClicked;
                  });
                },
                child: const Text('Show and Hide')),
          ],
        ),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thank you for reading the guide on how to show and hide the widget with the help of Visibility.