Flutterexperts

It has a visible property that oversees 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.

In this blog, we will explore the Show/Hide Widget In Flutter. We will see how to implement a demo program and we will see how we can change the visibility of widgets and how to show or hide widgets in Flutter using Visibility Widget in your flutter applications.

Visibility class – widgets library – Dart API
Whether to show or hide a child. By default, the visible property controls whether the child is included in the subtree…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

Introduction:

Here and there, you might need to make a widget possibly displayed in specific conditions and hidden if the condition doesn’t meet. In Flutter, it tends to be done effectively utilizing Visibility a widget.

The widget you need to show or hide must be the child of Visibility widget. In the constructor, pass visibility alternative whose value is a boolean and is put away as the state. Then, at that point, update the value to show or hide the child.

Demo Module :

---

Constructor:

To utilize Visibility, you need to call the constructor underneath:

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 is one contention you need to pass, child . child is the show or hide, as controlled by visible.

Properties:

There are some properties of Visibility are:

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

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we will create a bool variable that was bool _isVisible is equal to true.

bool _isVisible = true;

We will create a showToast() method. In this method, we will add setState() function. We will add _isVisible is equal to !_isVisible.

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

In the body, we will add the Visibility() widget. In this widget, we will add visible which means control whether the child is shown or not. We will add variable _isVisible. It’s child property, we will add an image with height and BoxFit.contain.

Visibility(
  visible: _isVisible,
  child: Image.asset("assets/logo.png",
    height: 300,
    fit: BoxFit.contain,
  ),
),

We will also add Text and ElevatedButton(). In this button, we will add style, onPressed, and text. We will add showToast on the onPressed method.

Text("FlutterDevs is a protruding flutter app development company with an extensive "
    "in-house team of 30+ seasoned professionals who know exactly what you need "
    "to strengthen your business across various dimensions. With more than 10+ years "
    "of experience in mobile applications, we know your needs very well."
  ,style: TextStyle(fontSize: 20)
),
SizedBox(height: 35,),
ElevatedButton(
  style: ElevatedButton.styleFrom(
    textStyle: TextStyle(fontSize: 20),
    minimumSize: Size.fromHeight(50),
  ),
    onPressed: showToast,
    child: Text("Show/Hide")
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_visibility_widget_demo/splash_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
    );
  }
}

class ShowHideDemo extends StatefulWidget {
  @override
  _ShowHideDemoState createState() {
    return _ShowHideDemoState();
  }
}

class _ShowHideDemoState extends State {
  bool _isVisible = true;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: Colors.cyan,
            title: Text('Flutter Show/Hide Widget Demo'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Visibility(
                  visible: _isVisible,
                  child: Image.asset("assets/logo.png",
                    height: 300,
                    fit: BoxFit.contain,
                  ),
                ),
                Text("FlutterDevs is a protruding flutter app development company with an extensive "
                    "in-house team of 30+ seasoned professionals who know exactly what you need "
                    "to strengthen your business across various dimensions. With more than 10+ years "
                    "of experience in mobile applications, we know your needs very well."
                  ,style: TextStyle(fontSize: 20)
                ),
                SizedBox(height: 35,),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: TextStyle(fontSize: 20),
                    minimumSize: Size.fromHeight(50),
                  ),
                    onPressed: showToast,
                    child: Text("Show/Hide")
                ),
              ],
            ),
          ),
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of the Show/Hide Widget in a flutter; you can modify this code according to your choice. This was a small introduction to Show/Hide Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Show/Hide Widget in your flutter projects. We will show you what the Introduction is?. Show a constructor and properties of the Show/Hide Widget. Make a demo program for working Show/Hide Widget using Visibility Widget in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---