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
Fixed!!!
Had to change
onChanged: (value) => widget.onChanged,
to
onChanged: (value) {
setState(() {
selectedValue = value;
});
if (widget.onChanged != null) widget.onChanged!(value);
},
And remove Obx