title: How to dispose/recreate a Widget after an action
body: <p>I am trying to figure out how to destroy/recreate a <code>Widget</code> based on an action (e.g: <code>onPressed</code>).</p>
  <p>The way I thought about this, is to have my Widget rapped within an <code>Opacity</code> object, and control the state of the <code>Opacity</code> object based on user interaction somewhere in my app(i.e: hide/show the widget instead of dispose/recreate ). However, what I am asking here, how to destroy/recreating a Widget after clicking a Button?</p>
  <p>I have created the following dummy example to show what I mean.</p>
  <p>The red <code>Icon</code> should be disposed when I press the cloud <code>Icon</code> and recreated when I press the <code>RaisedButton</code>.</p>
  <p><a href="https://i.imgur.com/92cG7ct.jpg" rel="noreferrer"><img src="https://i.imgur.com/92cG7ct.jpg" alt="enter image description here" /></a></p>
  <pre><code>Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Text(&quot;Destroy/Recreate Example&quot;),
          ),
          body: new Center(
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: &lt;Widget&gt;[
                    new Stack(fit: StackFit.passthrough,
                      children: &lt;Widget&gt;[
                        new IconButton(icon: new Icon(
                          Icons.cloud_circle, size: 40.0, color: Colors.blue,),
                            onPressed: null /*_destroyWidget*/),
                        new Positioned(child: new DecoratedBox(
                          decoration: new BoxDecoration(shape: BoxShape.circle),
                          child: new Icon(
                            Icons.add_circle, size: 20.0, color: Colors.red,),),
                            top: 3.0,
                            left: 3.0)
                      ],
                    ),
                    new RaisedButton(onPressed: null /*_recreateWidget*/,
                      child: new Text(&quot;Recreate!&quot;),
                    ),
                  ])
          )
      );
    }
  </code></pre>
  <p>How to start on this idea?</p>
  <p><strong>Update</strong></p>
  <p>The following code achieves the same thing but by manipulating the <code>Opacity</code> of the red <code>Icon</code> (show/hide).</p>
  <pre><code>var _myOpacity = 0.0;
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Text(&quot;Destroy/Recreate Example&quot;),
          ),
          body: new Center(
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: &lt;Widget&gt;[
                    new Stack(fit: StackFit.passthrough,
                      children: &lt;Widget&gt;[
                        new IconButton(icon: new Icon(
                          Icons.cloud_circle, size: 40.0, color: Colors.blue,),
                            onPressed: ()=&gt;setState((){
                          _myOpacity =0.0;
                            }) /*_destroyWidget*/),
                        new Positioned(child: new Opacity(
                          opacity: _myOpacity,
                            child:
                        new DecoratedBox(
                          decoration: new BoxDecoration(shape: BoxShape.circle),
                          child: new Icon(
                            Icons.add_circle, size: 20.0, color: Colors.red,),),),
                            top: 3.0,
                            left: 3.0)
                      ],
                    ),
                    new RaisedButton(onPressed: ()=&gt;
                      setState((){
                      _myOpacity = 1.0;
  
          })
                     /*_recreateWidget*/,
                      child: new Text(&quot;Recreate!&quot;),
                    ),
                  ])
          )
      );
    }
  </code></pre>