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


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.

enter image description here


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

enter image description here


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.


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

void _showDecline() {

        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),),
                     onChanged: (String value) {
                       setState(() {
                        _chosenValue = value;
            actions: <Widget>[
              // usually buttons at the bottom of the dialog
              new FlatButton(
                child: new Text("Close"),
                onPressed: () {},


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

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *