I have an AlertDialog
showed using the showDialog()
method, inside it I have a Column
that contains two Text
widgets, one of which is invisible. What I'm trying to do here is change the visibility of the text using the AlertDialog
action button.
What I initially is creating the Column
like this:
bool textVisibility = false;
var column = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Visible Text"),
Visibility(
visible: textVisibility,
child: Text("Invisible Text!"),
)
],
);
And then I include it inside my AlertDialog
like this:
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context,StateSetter dialogState) {
return AlertDialog(
content: column,
actions: <Widget>[
FlatButton(
child: Text("Yes"),
onPressed: () {
dialogState(() {
textVisibility = true
});
},
),
],
);
},
);
}
)
This obviously won't work because the dialogState()
will update data of the dialog, not its Column
child. So my question is how can I update the Column
from inside the AlertDialog
action button call?
One thing you could do is move the column initialization and declaration into the builder function because this is the only way the column will be rebuilt after the statesetter is called so you will have something like this.
showDialog(
context: context,
builder: (context) {
var column = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Visible Text"),
Visibility(
visible: textVisibility,
child: Text("Invisible Text!"),
)
],
);
return StatefulBuilder(
builder: (context,StateSetter dialogState) {
return AlertDialog(
content: column,
actions: <Widget>[
FlatButton(
child: Text("Yes"),
onPressed: () {
dialogState(() {
textVisibility = true
});
},
),
],
);
},
);
}
)
Take note that the state variable has to stay outside the statefulbuilder's builder however.