How to dispose/recreate a Widget after an action

Viewed 24514

I am trying to figure out how to destroy/recreate a Widget based on an action (e.g: onPressed).

The way I thought about this, is to have my Widget rapped within an Opacity object, and control the state of the Opacity 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?

I have created the following dummy example to show what I mean.

The red Icon should be disposed when I press the cloud Icon and recreated when I press the RaisedButton.

enter image description here

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Destroy/Recreate Example"),
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Stack(fit: StackFit.passthrough,
                    children: <Widget>[
                      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("Recreate!"),
                  ),
                ])
        )
    );
  }

How to start on this idea?

Update

The following code achieves the same thing but by manipulating the Opacity of the red Icon (show/hide).

var _myOpacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Destroy/Recreate Example"),
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Stack(fit: StackFit.passthrough,
                    children: <Widget>[
                      new IconButton(icon: new Icon(
                        Icons.cloud_circle, size: 40.0, color: Colors.blue,),
                          onPressed: ()=>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: ()=>
                    setState((){
                    _myOpacity = 1.0;

        })
                   /*_recreateWidget*/,
                    child: new Text("Recreate!"),
                  ),
                ])
        )
    );
  }
1 Answers
Related