Why the Visibility doesn't work in flutter?

Question

I want to hide my Image container by clicking AppBar's IconButton. But My AppBar's IconButton doesn't work. I think, I made a mistake in my code .....

import 'package:flutter/material.dart';
import 'package:icon_shadow/icon_shadow.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    bool viewVisible = true;

  /*  void showWidget() {
      setState(() {
        viewVisible = true;
      });
      print("Pressed");
    }
*/
    void hideWidget() {
      setState(() {
        viewVisible = false;
        print("Work");
      });
    }


    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("Icon & Image Shadow Demo"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_drop_down_circle),
                onPressed: hideWidget,
              )
            ],
          ),
          body: Stack(
            children: <Widget>[
             ListView(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                            showShadow: false,
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5.0,
                      ),
                      Visibility(
                        maintainAnimation: true,
                        maintainSize: true,
                        maintainState: true,

                        visible: viewVisible,
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.8),
                                spreadRadius: 5,
                                blurRadius: 3,
                                offset:
                                    Offset(5, 7), // changes position of shadow
                              ),
                            ],
                          ),
                          child: Image.asset("assets/images/download.png"),
                        ),
                      )
                    ],
                  ),
                ],
              )
            ],

          )),
    );
  }
}

Solution 1

move bool viewVisible = true; outside of the build method and it's better to move hideWidget too, otherwise you declare the function again and again with every build

class _HomePageState extends State<HomePage> {

  bool viewVisible = true;


  void hideWidget() {
    setState(() {
      viewVisible = false;
      print("Work");
    });
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("Icon & Image Shadow Demo"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_drop_down_circle),
                onPressed: hideWidget,
              )
            ],
          ),
          body: Stack(
            children: <Widget>[
             ListView(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                          ),
                          IconShadowWidget(
                            Icon(
                              Icons.add_circle,
                              color: Colors.red,
                              size: 100.0,
                            ),
                            shadowColor: Colors.black,
                            showShadow: false,
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5.0,
                      ),
                      Visibility(
                        maintainAnimation: true,
                        maintainSize: true,
                        maintainState: true,

                        visible: viewVisible,
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.8),
                                spreadRadius: 5,
                                blurRadius: 3,
                                offset:
                                    Offset(5, 7), // changes position of shadow
                              ),
                            ],
                          ),
                          child: Image.asset("assets/images/download.png"),
                        ),
                      )
                    ],
                  ),
                ],
              )
            ],

          )),
    );
  }
}

Solution 2

Define viewVisible at the top :

class _HomePageState extends State<HomePage> {
  bool viewVisible = true;
  @override
  Widget build(BuildContext context) {

It was not updating because you initialized the viewVisible in the build method and it used to build at every setstate making it true and it would never become false.