Flutter not updating DropdownButton placed within a dialog when item is selected

Issue

I have an alertDialog containing a DropdownButton widget. Whenever I click on an option within the dropDown I want it to display the selected value. I have listed the code below along with 2 screenshots.

I believe this may be an issue with how flutter builds widget because when I placed the DropdownButton widget outside of the dialog it worked, however placing it within an alertDialog causes it to fail. I also noticed that if I clicked on an option in the DropdownButton and then exited and clicked on the dialog again the selected item would change. However, I want the selected value to change without the user having to tap out of the dialog and then back in.

^

The above image is the dialog when a user first clicks on it. At first the only selected item is "I'm not able to help". This value should change whenever a user clicks on the DropdownMenu widget and selects a different option such as "other".

^

These are the various options a user can click on within the dropdown menu. When a user clicks on it, the menu should update accordingly.

CODE:

Please note that I have defined _chosenValue as a global variable outside of the build function.

void _showDecline() {

      showDialog(
        context: context,
        builder: (BuildContext context) {

          return AlertDialog(
            title: new Text("Decline Appointment Request"),
            content: Container(
              height: 100,
              width: 200,
              child: Column(
                children: <Widget>[
                  new Text("Please select an option for why you declined."),
                  new DropdownButton<String>(
                    value: _chosenValue,
                    underline: Container(),
                    items: <String>['I\'m not able to help', 'Unclear description', 'Not available at set date and time', 'Other'].map((String value) {
                      return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(value, style: TextStyle(fontWeight: FontWeight.w500),),
                      );
                    }).toList(),
                     onChanged: (String value) {
                       setState(() {
                        _chosenValue = value;
                      });
                    },
                  )
                ],
              ),
            ),
            actions: <Widget>[
              // usually buttons at the bottom of the dialog
              new FlatButton(
                child: new Text("Close"),
                onPressed: () {},
                },
              ),
              
            ],
          );
        },
      );
    }

Solution

setState will only update current StatefulWidget's Widget Build function.

You should use StatefulBuilder inside showDialog.

For your case just add StatefulBuilder as a parent of your DropDown widget, and use StateSetter when you want to update the StatefulBuilder's children. It will only update the widget tree defined under StateFulBuilder builder function.

---

See the full code including stateFulBuilder at DartPad code StateFulBuilderDartPad.

For more information on StatefulBuilder head over to StateFulBuilder documentation page.

Answered By - Darshan Rathod