Flutter refreshing a column inside an AlertDialog

Question

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?

score 1 · Answer 1 · answered Dec 17 '19 at 18:25

One possible option could be to add an provider, transfer the changed boolean over the provider to the column and update it with notifylistener. Something like following could work.

//at the Action button of the AlertDialog

Provider.of<foo>(context).setBoolean(true)

//In the Provider

boolean isButtonVisible = false;
void setBoolean(bool visible){
isButtonVisible = visible;
notifylistener;
}
bool getBoolean()=>isButtonVisible;

//In the Column of the actionbutton

Visibility{
visible: `Provider.of<foo>(context).getBoolean,`

score 1 · Accepted Answer · answered Dec 17 '19 at 19:44

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.

Flutter refreshing a column inside an AlertDialog

2 Answers2