How to hide any widget in flutter

Mohit Kumar

27 April 2023

We can show or hide widgets using the Visibility widget. When designing mobile apps using flutter we may need to show or hide the widget based on a specific context. This feature is available to control whether we display or hide information.

Visibility is a useful widget to show or hide other widgets in the app. We have to wrap the widget we want to show or hide it in the widget to look like a child. This widget has a so-called visual area that controls the child’s (visible or invisible) status. Instead of hiding the baby, we can replace it with another widget. This widget gives us control over how to save widget space when not visible.

You may also check our Flutter App development Services.

Property:
Visibility has several properties:
> Type: This property is used for widgets that show or hide depending on the visibility value.
> MaintainAnimation: This property is used to determine whether to keep the child animation when it is not visible. The default is wrong.
> Visible: This property controls whether the child is visible. The default is true.
> Replace: This property is used for widgets that are displayed when the child is not visible. The default is SizedBox.shrink.
> MaintainState: This property is used to maintain the child’s state when it is not visible. The default is wrong.
> MaintainInteractivity: This property is used to allow the widget to be interactive when hidden. The default is wrong.
> MaintainSemantics: This property is used to maintain the widget’s semantics when the widget is hidden. The default is wrong.
> MaintainSize: Maintaining the size when the widget is not visible.

Code:

import 'package:flutter/material.dart';

void main() =&gt; runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


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

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

  @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(
        title: const Text('Flutter Show/Hide Widget Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &#091;
            Visibility(
              visible: _isVisible,
              child: Image.network('https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=94a1e718d89ca60a6337a6008341ca50&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80',height: 300,
                fit: BoxFit.contain,
              ),
            ),
            const Text("Please Tab on the button to show/ hide image."
                ,style:  TextStyle(fontSize: 20)
            ),
            const SizedBox(height: 35,),
            ElevatedButton(
                style: ElevatedButton.styleFrom(
                  textStyle: const TextStyle(fontSize: 20),
                  minimumSize: const Size.fromHeight(50),
                ),
                onPressed: (){
                  setState(() {
                    _isVisible = !_isVisible;
                  });
                },
                child: const Text("Show/Hide")
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return const MaterialApp(

debugShowCheckedModeBanner: false,

home: ShowHideDemo(),

);

}

class ShowHideDemo extends StatefulWidget {

const ShowHideDemo({Key? key}) : super(key: key);

@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(

title: const Text('Flutter Show/Hide Widget Demo'),

body: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Visibility(

visible: _isVisible,

child: Image.network('https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',height: 300,

fit: BoxFit.contain,

const Text("Please Tab on the button to show/ hide image."

,style: TextStyle(fontSize: 20)

const SizedBox(height: 35,),

ElevatedButton(

style: ElevatedButton.styleFrom(

textStyle: const TextStyle(fontSize: 20),

minimumSize: const Size.fromHeight(50),

onPressed: (){

setState(() {

_isVisible = !_isVisible;

});

child: const Text("Show/Hide")

);

}

Output:

Conclusion

In this blog, we have discussed how to hide any widget in flutter in our app features.

I hope it will help you to understand and get a brief idea about it.

Thank you for reading!!