Search code examples
flutterstateflutter-alertdialog

Flutter refreshing a column inside an AlertDialog


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?


Solution

  • 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.