Dropdown Values not change in Flutter Modal

Question

I have this Dropdown Widget in a Modal and I cannot Change the Value in the Widget while I'm using setState and everytime I change the value, I should close the Modal and then the Value is Changed.

this is my Code:

var chosenRecentDay = 1;
List<int> daysList = [for (var i = 1; i < 31; i++) i];
int defaultDropDownValue = 1;

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return SizedBox(
      height: 500.0,
      child: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                width: 150.0,
                height: 45.0,
                child: Center(
                  child: DropdownButton(
                    value: defaultDropDownValue,
                    menuMaxHeight: 250.0,
                    icon: const Icon(
                      Icons.arrow_drop_down_circle_rounded,
                      color: Color(0xffF85E63),
                    ),
                    borderRadius: BorderRadius.circular(30.0),
                    alignment: Alignment.center,
                    underline: Container(color: Colors.transparent),
                    items: daysList
                        .map<DropdownMenuItem<dynamic>>((dynamic value) {
                      var convertedList = value.toString();
                      return DropdownMenuItem<dynamic>(
                        value: value,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 5.0),
                              child: Text(
                                convertedList,
                                style: const TextStyle(
                                  color: Color(0xffF85E63),
                                  fontFamily: 'Lalezar',
                                  fontSize: 18.0,
                                ),
                              ),
                            ),
                          ],
                        ),
                      );
                    }).toList(),
                    onChanged: (val) {
                      setState(() {
                        defaultDropDownValue = val!;
                        chosenRecentDay = val;
                      });
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  },
);

Answer 1

You are using a modal and the outer setState doesn't affect the modal after it's created. (It doesn't trigger a rebuild of a modal.)

One solution is to wrap your widget with a StatefulBuilder like this:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        // return your widgets here
      },
    );
  },
);

Remember, if you need to update the state of both the parent widget and the modal, you can use different names for the StateSetter of the StatefulBuilder and the setState of the parent widget.