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.
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!"),
),
])
)
);
}
