State of the dialog not updating on dropdown change

Question

So I have this function to show a reusable dialog that have a list of widget. The main problem lies in the dropdown and the text field. to begin with my dropdown value is A and I wanted the text field to only show when the dropdown value is B.

I tried some code already but when I choose the value B the text field won't show up, then if I close the dialog and try to open it again next time, that will show the text field that I want, but the value in the drop down is A not value B.

How can I achieve something like what I wanted ?

Here's my code :

  List<String> itemList = ["notMyExpertise", "Alasan lainnya"];
  String selectedReason = '';

  void rejectDialog(
      {required dynamic ticketData,
      required String ticketId,
      required VoidCallback onDeclineConfirmed}) {
    showDialog(
        context: context,
        builder: (context) {
          return ReusableConfirmationDialog(
            titleText: 'hello'.tr(),
            contentText: 'hello bro let me try to help you first before '.tr(),
            confirmButtonText: 'sure'.tr(),
            declineButtonText: 'cancel'.tr(),
            onDecline: () {
              Navigator.pop(context);
            },
            onConfirm: onDeclineConfirmed,
            additionalWidget: Column(
              children: [
                ReusableDropdownButton(
                  itemList: itemList,
                  width: 197,
                  height: 26,
                  onChanged: (newValue) {
                    setState(() {
                      selectedReason = newValue;
                    });
                  },
                ),
                const SizedBox(height: 10),
                if (selectedReason == 'Alasan lainnya')
                  Container(
                    constraints: const BoxConstraints(minHeight: 78),
                    width: 230,
                    decoration: BoxDecoration(
                      color: othersChatColor,
                      borderRadius: BorderRadius.circular(15),
                    ),
                    padding:
                        const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: TextFormField(
                      controller: ticketTextController,
                      maxLength: 100,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1000),
                      ],
                      style: primaryColor400Style.copyWith(
                        fontSize: fontSize11,
                      ),
                      maxLines: null,
                      keyboardType: TextInputType.multiline,
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.zero,
                        border: InputBorder.none,
                        hintText: 'reasonHint'.tr(),
                        hintStyle: weight400Style.copyWith(
                            color: hintColor, fontSize: fontSize11),
                        counterText: '',
                      ),
                    ),
                  ),
                const SizedBox(height: 5),
              ],
            ),
          );
        });
  }

Answer 1

Because the dialog and bottom sheets don't have states so you must create a different stateful widget for the widget you want to show in the dialog or sheet and then return it from the dialog or bottom sheet. that's how it will work as a stateful widget and will update as you want.

void rejectDialog(
      {required dynamic ticketData,
      required String ticketId,
      required VoidCallback onDeclineConfirmed}) {
    showDialog(
        context: context,
        builder: (context) {
          return StateFulWidgetYouCreate();
          });
     }