How to return dropdown value from a separate class inside a Flutter Dialog

I would like to add a dropdown (or more in some cases) in a pop up dialog. In order to manage all dropdowns in the entire app and make the coding of the UI more simpler, I separate the dropdown Widget to another dart file. I am not able to refresh the UI when the selection of the dropdown is changed, and I am not able to get the value back to the dialog box for future processing.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: TextButton(
        onPressed: () {
          ShowDialog(context);
        },
        child: Text('Show Dialog'),
      ),
    );
  }
}

Future<void> ShowDialog(context) async {
  var DataType;
  var DropDownValue;
  await showDialog(
      context: context,
      builder: (context) {
        return StatefulBuilder(builder: (context, setStateAB) {
          return AlertDialog(
            scrollable: true,
            title: Text('Test Dialog'),
            content: MyDropDown(DataType, DropDownValue),
            actions: [
              ElevatedButton.icon(
                onPressed: () {
                   // call function to save including the DropDownValue
                },
                icon: Icon(
                  Icons.save,
                  size: 24.0,
                ),
                label: Text('Save'),
              ),
              ElevatedButton.icon(
                onPressed: () {},
                icon: Icon(
                  Icons.cancel,
                  size: 24.0,
                ),
                label: Text('Cancel'),
              ),
            ],
          );
        });
      });
}

Widget MyDropDown(type, val) {
  //get http data according to type
  return DropdownButton<String>(
    value: val,
    isExpanded: true,
    //below items for testing only
    items: <String>['One', 'Two', 'Free', 'Four']
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
    onChanged: (String? selectedvalue) {
      val = selectedvalue!;
    },
  );
}

How can I refresh the UI and return the selected value back to dialog?

You could pass callback function to your MyDropDown widget.

return AlertDialog(
  ...,
  content: MyDropDown(
    DataType, 
    DropDownValue,
    (String? selectedValue) => DropDownValue = selectedValue,
  ),
  ...,
);

Widget MyDropDown(type, val, onChanged) {
  return DropdownButton<String>(
    ...,
    onChanged: (String? selectedvalue) {
      val = selectedvalue!;
      onChanged(selectedvalue);
    },
  );
}

I see you haven't used the state that you declared in the dropdown menu.all in all this is the gist

//update the ui of both inside the dropdown and outside like this
...
onChange:...
setState(() { }); // update the main(state) UI
  setStateAB((){});//update the inner UI

....

You could create variable that would hold the value inside both of the states also