How to Make DropDownButton2 Reusable in flutter

Question

Obx(
                    () => DropdownButton2<String>(
                      items: countryController.states.map((state) {
                        return DropdownMenuItem<String>(
                          value: state["stateName"],
                          child: Text(state["stateName"].toString()),
                        );
                      }).toList(),
                      hint: const Text('Select State'),
                      onChanged: (String? newValue) {
                        // Handle onChanged event here
                        // You may want to update your controller value here
                        countryController.selectedState.value =
                            newValue.toString();
                      },
                      // Ensure that countryController.selectedState.value is not null and exists in the result list
                      value: (countryController.states.any((element) =>
                              element["stateName"] ==
                              countryController.selectedState.value))
                          ? countryController.selectedState.value
                          : countryController.states.isNotEmpty
                              ? null
                              : null, // If the result list is empty, value is set to null
                    ),
                  ), //

I'm using the flutter drop down button2 package i.e, dropdown_button2: ^2.3.9

for above mentioned code I'm using that dropdown button but,
i have three scenarios like I'm using this drop down for ISD, Country and states for that i have make it reusable so, code should be reactive like just i need to pass parameters based on that should responsive.

Answer 1

You can create a StatefulWidget that returns a configured instance of DropDownButton2 based on some parameters that you set.

This is how I would do it if I only wanted the countryController and the hintText as parameters:

class MyDropDownButton extends StatefulWidget {
  final dynamic controller;
  final String hintText;
  // add more parameters here...

  const MyDropDownButton({
    super.key, 
    required this.controller,
    required this.hintText
  });

@override
MyDropDownButtonState createState() => MyDropDownButtonState();
}

class MyDropDownButtonState extends State<MyDropDownButton> {
  @override
  Widget build(BuildContext context) {
  return DropdownButton2<String>(
    items: widget.controller.states.map((state) { // <--
      return DropdownMenuItem<String>(
        value: state["stateName"],
         child: Text(state["stateName"].toString()),
      );
    }).toList(),
    hint: widget.hintText, // <--
    onChanged: (String? newValue) {
      widget.controller.selectedState.value = newValue.toString();
    },
    value: (widget.controller.states.any((element) =>
      element["stateName"] == widget.controller.selectedState.value))
        ? widget.controller.selectedState.value
        : widget.controller.states.isNotEmpty
          ? null
          : null,
     );
   } 
 }

Now say if you wanted to create the same DropDownButton2 as the one you've written above all you have to do is:

MyDropDownButton(
  controller: countryController,
  hintText: "Select State",
),

Of course you could add as many parameters as you like.