How to make Dependent DropdownButtonFormField in showDialog in flutter?

Question

I make the Dependent DropdownButtonFormField in showDialog.

when i select the item of first dropdown the values not showing in second dropdown which is dependent on first dropdown.

But when i close the Dialog and reopen the dialog the values showing in second dropdown.

So here my Question is how to refresh second dropdown when first dropdown value is changed?

Future<bool> showDropDownDialog(title) async {
    List<DropdownMenuItem<AllocationType>> items = [];
    dropDownAllocationTypeModels.forEach((element) {
      items.add(DropdownMenuItem(
        child: Text(
          element.allocationTypeName!,
          style: Themes.getTextStyle(context),
        ),
        value: element,
      ));
    });

    List<DropdownMenuItem<ServiceArea>> serviceAreaitems = [];
    dropDownServiceAreaModels.forEach((element) {
      serviceAreaitems.add(DropdownMenuItem(
        child: Text(
          element.serviceAreaName ?? "1",
          style: Themes.getTextStyle(context),
        ),
        value: element,
      ));
    });

    void onTeamChange(area) {
      setState(() {
        dropdownValueTeamType = null;
        dropdownValueServiceArea = area;
        dropDownTeamTypeModels = [];
      });
      ApiHelper()
          .getTeamsByServiceArea(dropdownValueServiceArea!.id!)
          .then((value) => {
                setState(() {
                  dropDownTeamTypeModels = value;
                })
              });
    }
    return await showDialog(
          context: context,
          builder: (context) => Center(
            child: Form(
              key: _formKey,
              child: Container(
                padding: EdgeInsets.all(10),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Card(
                      color: Colors.blueGrey[100],
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(15),
                                      bottomRight: Radius.circular(15),
                                    ),
                                    child: Container(
                                      padding: EdgeInsets.all(10),
                                      alignment: Alignment.center,
                                      width: 300,
                                      color:
                                          Themes.getPrimaryDarkBackgroundColor(
                                              context),
                                      child: Text(
                                        title,
                                        style: Themes.getTitleTextStyleWhite(
                                            context),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Padding(
                                padding: EdgeInsets.only(
                                    left: Constants.APP_PADDING,
                                    right: Constants.APP_PADDING,
                                    top: Constants.APP_PADDING),
                                child: DropdownButtonFormField<ServiceArea>(
                                  style: Themes.getTextFieldTextStyle(context),
                                  decoration: InputDecoration(
                                    border: OutlineInputBorder(),
                                    labelText: AppLocalizations.of(context)
                                        .hintSelectServiceArea,
                                  ),
                                  value: dropdownValueServiceArea,
                                  isExpanded: true,
                                  items: serviceAreaitems,
                                  onChanged: (value) {
                                    setState(() {
                                      dropdownValueServiceArea = value;
                                      onTeamChange(value);
                                    });
                                  },
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(
                                    left: Constants.APP_PADDING,
                                    right: Constants.APP_PADDING,
                                    top: Constants.APP_PADDING),
                                child: DropdownButtonFormField<dynamic>(
                                  style: Themes.getTextFieldTextStyle(context),
                                  decoration: InputDecoration(
                                    border: OutlineInputBorder(),
                                    labelText: AppLocalizations.of(context)
                                        .hintSelectTeamType,
                                  ),
                                  value: dropdownValueTeamType,
                                  isExpanded: true,
                                  items: dropDownTeamTypeModels.map((team) {
                                    return DropdownMenuItem<dynamic>(
                                      value: team,
                                      child: Text(team),
                                    );
                                  }).toList(),
                                  onChanged: (value) {
                                    setState(() {
                                      dropdownValueTeamType = value;
                                    });
                                  },
                                ),
                              ),
                            ],
                          )),
                      elevation: 8,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ) ??
        false; //if showDialouge had returned null, then return false
  }

Answer 1

As I see you use statefull widget approach. So I believe you have to wrap parent dialog widget to statefull, declare variables (as dropdownValueServiceArea) in it, and change them inside dropdown callbacks with

setState(()=> dropdownValueServiceArea = newValue);