I have created a custom DropDownButton with GetX in Flutter, it throws me error when i wrap with obx and if i remove obx i cannot select from the list

Question

Custom DropDownButton

class CustomDropDown extends StatefulWidget {
PurchasePackageController purchasePackageController =
  PurchasePackageController();
final String hintName;
final List<String> listName;
final void Function(String?)? onChanged;
CustomDropDown(
  {Key? key,
  required this.hintName,
  required this.listName,
  required this.onChanged})
  : super(key: key);

@override
State<CustomDropDown> createState() => _CustomDropDownState();
}

class _CustomDropDownState extends State<CustomDropDown> {
String? selectedValue;

List<DropdownMenuItem<String>> buildDropdownMenuItems(List list) {
List<DropdownMenuItem<String>> dropDownItems = [];
list.forEach((value) {
  dropDownItems.add(DropdownMenuItem<String>(
    value: value,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child: Text(
        value,
        style: TextStyle(fontSize: 16.0, color: colorPrimary),
      ),
    ),
  ));
});

return dropDownItems;
}

@override
Widget build(BuildContext context) {
return Padding(
  padding: EdgeInsets.symmetric(horizontal: 10.0.h),
  child: InputDecorator(
    decoration: InputDecoration(
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: colorPrimary),
      ),
    ),
    isEmpty: true,
    //dropdownvalue == '',
    child: DropdownButtonHideUnderline(
      child: Obx(() => DropdownButton<String>(
            iconSize: 30.0.sp,
            iconEnabledColor: colorPrimary,
            hint: Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0.h),
              child: Text(
                widget.hintName,
                style: TextStyle(fontSize: 18.0.sp, color: colorPrimary),
              ),
            ),
            value: selectedValue,
            isDense: true,
            onChanged: (value) => widget.onChanged,
            buildDropdownMenuItems() 
            items: buildDropdownMenuItems(
              widget.listName,
            ),
          )),
    ),
  ),
);
}
}

View

class LocationView extends GetView<LocationController> {


LocationView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: const Text('Location'),
      centerTitle: true,
    ),
    body: Column(
      children: [
        CustomDropDown(
          hintName: "Package Type",
          listName: controller.MDPackageType,
          onChanged: (newValue) =>
              controller.onChangedPackageName(newValue!),
        ),
        CustomDropDown(
            hintName: "Package Name",
            listName: controller.MDPackageType,
            onChanged: (newValue) =>
                controller.onChangedPackageType(newValue!)),
        Container(
          height: MediaQuery.of(context).size.height * 0.50,
          width: MediaQuery.of(context).size.width * 0.95,
          child: Column(children: [
            Text(controller.selectedPackageName.value),
            Text(controller.selectedPackageType.value)
          ]),
        )
      ],
    ));
}

}

Controller

class LocationController extends GetxController {


List<String> MDPackageType = [
'Package Type 1',
'Package Type 2',
'Package Type 3',
'Package Type 4',
];
List<String> MDPackageName = [
'Package Name 1',
'Package Name 2',
'Package Name 3',
'Package Name 4',
];
var selectedPackageType = "Package Type 1".obs;
var selectedPackageName = "Package Name 1".obs;

onChangedPackageType(String value) => selectedPackageType.value = value;
onChangedPackageName(String value) => selectedPackageName.value = value;
}

Error

throw """ [Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated. If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers suitable for an update (example: GetX => HeavyWidget => variableObservable). If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX. """; }

And if i remove obx, i can code is running but i cannot select items frrom the Drop Down Menu

Answer 1

Fixed!!!

Had to change

onChanged: (value) => widget.onChanged,

to

onChanged: (value) {
          setState(() {
            selectedValue = value;
          });
          if (widget.onChanged != null) widget.onChanged!(value);
        },

And remove Obx