Trying to get dropdown menu and date to populate after selection in a dialog

Question

Hi I have a drop down menu and a date selector in an alert dialog. The selections print on the console onChange so I know that it's working but they won't change in the actual alert dialog unless I close and reopen it again. Is there any way I can get the date and drop down menu selections to change in realtime??

My drop down code is as follows :

void rightButtonPressed() {
setState(() {
  walkDuration = dependencies.stopwatch.elapsedMilliseconds~/60000;
  if (dependencies.stopwatch.isRunning) {
    dependencies.stopwatch.stop();
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          actions: <Widget>[
            Theme(
              child: Button(
                child: const Text('Add'),
                onPressed: (){
                  add();
                  Navigator.of(context).pop();
                },
                style: Style(
                  color: Colors.white,
                )
              ),
            )
          ],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8)),
            content: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Form(
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min, 
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Column(
                            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              DropdownButton(
                                value: numberTimes,
                                items: [
                                  DropdownMenuItem(
                                    child: Text("0", style: TextStyle(fontSize:15.0)),
                                    value: 0,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("1", style: TextStyle(fontSize:15.0)),
                                    value: 1,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("2", style: TextStyle(fontSize:15.0)),
                                    value: 2,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("3", style: TextStyle(fontSize:15.0)),
                                    value: 3,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("4", style: TextStyle(fontSize:15.0)),
                                    value: 4,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("5", style: TextStyle(fontSize:15.0)),
                                    value: 5,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("5+", style: TextStyle(fontSize:15.0)),
                                    value: 6,
                                  ),
                                ],
                                onChanged:(value) {
                                  setState((){
                                    numberTimes = value;
                                    print(numberTimes);
                                  });
                                }
                              ),
                            ],
                          )
                        ),

I found the right answer. If anyone else is having similar problems please see link below: https://stackoverflow.com/questions/51962272/how-to-refresh-an-alertdialog-in-flutter — Michelle, Sep 15 '20 at 08:08

score 0 · Answer 1 · answered Sep 15 '20 at 08:17

warp your dialog with statefullBuilder and use setState

example:

 showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
            FlatButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            FlatButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);

score 0 · Answer 2 · answered Sep 15 '20 at 09:11

Please change the DropdownButton to DropdownButtonFormField<int>. I have edited your code, how much you wrote there. Because you do not wrote the full code.

Here is my edited code.

       showDialog<void>(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8)),
                    content: Stack(
                        overflow: Overflow.visible,
                        children: <Widget>[
                          Form(
                              child: DropdownButtonFormField<int>(
                                  value: numberTimes,
                                  items: [
                                    DropdownMenuItem(
                                      child: Text("0",
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 15.0)),
                                      value: 0,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("1",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 1,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("2",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 2,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("3",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 3,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("4",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 4,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("5",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 5,
                                    ),
                                    DropdownMenuItem(
                                      child: Text("5+",
                                          style: TextStyle(fontSize: 15.0)),
                                      value: 6,
                                    ),
                                  ],
                                  onChanged: (int value) {
                                    setState(() => numberTimes = value);
                                  }))
                        ]));
              })

And your code is.

void rightButtonPressed() {
setState(() {
  walkDuration = dependencies.stopwatch.elapsedMilliseconds~/60000;
  if (dependencies.stopwatch.isRunning) {
    dependencies.stopwatch.stop();
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          actions: <Widget>[
            Theme(
              child: Button(
                child: const Text('Add'),
                onPressed: (){
                  add();
                  Navigator.of(context).pop();
                },
                style: Style(
                  color: Colors.white,
                )
              ),
            )
          ],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8)),
            content: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Form(
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min, 
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Column(
                            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              DropdownButtonFormField<int>(
                                value: numberTimes,
                                items: [
                                  DropdownMenuItem(
                                    child: Text("0", style: TextStyle(fontSize:15.0)),
                                    value: 0,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("1", style: TextStyle(fontSize:15.0)),
                                    value: 1,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("2", style: TextStyle(fontSize:15.0)),
                                    value: 2,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("3", style: TextStyle(fontSize:15.0)),
                                    value: 3,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("4", style: TextStyle(fontSize:15.0)),
                                    value: 4,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("5", style: TextStyle(fontSize:15.0)),
                                    value: 5,
                                  ),
                                  DropdownMenuItem(
                                    child: Text("5+", style: TextStyle(fontSize:15.0)),
                                    value: 6,
                                  ),
                                ],
                                onChanged:(value) {
                                  setState((){
                                    numberTimes = value;
                                    print(numberTimes);
                                  });
                                }
                              ),
                            ],
                          )
                        ),

Trying to get dropdown menu and date to populate after selection in a dialog

2 Answers2