Custom Widget not Rendering - flutter

Question

I have made a custom DropDown Picker the problem is when I switch it, the widget does not get rendered
There are 2 Dropdowns on the UI. In different cases, the child dropDown may or may not be visible.
The problem only occurs if I have both parent and child dropdowns and in the next case, the two dropdowns are both visible.
These are the below cases of how my Dynamic UI is render
case 1 ) DropDown1 and Drop DropDown2 on the UI (Drop Down 2 is parent widget)
when the user clicks on dropDown 2 items the Main UI gets rendered.
(Drop Down 2 items Minutes, Hours, Day, Week)
DropDown 1 item changes as per drop down 2 )
class CustomDropDown extends StatefulWidget {
final List<String> dropDownList;
final defaultVal;
final Function selectedItem;
final customDropDownId;
final isExpanded;
final dropDownType;
const CustomDropDown(
{Key? key,
required this.dropDownList,
required this.defaultVal,
required this.selectedItem,
this.customDropDownId,
this.isExpanded = false,
required this.dropDownType})
: super(key: key);
#override
_CustomDropDownState createState() => _CustomDropDownState();
}
class _CustomDropDownState extends State<CustomDropDown> {
var chosenValue;
#override
void initState() {
super.initState();
print("initState");
chosenValue = widget.defaultVal;
}
#override
void didChangeDependencies() {
super.didChangeDependencies();
print("didChangeDependencies");
}
#override
void dispose() {
super.dispose();
print("dispose");
}
#override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
print("dropDownList ${widget.dropDownList} defaultVal ${widget.defaultVal} chosenValue ${chosenValue} ");
if (widget.dropDownType == DropDownType.DROPDOWN_WITH_ARROW) {
return Material(
elevation: 10,
color: foreground_color,
borderRadius: BorderRadius.circular(10.r),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 5.w),
child: DropdownButton<String>(
value: chosenValue,
isExpanded: widget.isExpanded,
dropdownColor: foreground_color,
icon: const Icon(Icons.keyboard_arrow_down_rounded),
borderRadius: BorderRadius.circular(10.r),
underline: const SizedBox(),
style: const TextStyle(color: Colors.white),
iconEnabledColor: Colors.white,
items: widget.dropDownList
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(color: Colors.white),
),
);
}).toList(),
onChanged: (String? value) {
if (value != null) {
setState(() {
chosenValue = value;
widget.selectedItem(chosenValue, widget.customDropDownId);
});
}
},
),
),
);
}
Parent Widget
Widget repeatEveryWidget(chosenValue) {
if (chosenValue == dropDownJobList[0] ||
chosenValue == dropDownJobList[1]) {
bool isMinutesWidget = chosenValue == dropDownJobList[0];
List<String> dropDownList = isMinutesWidget ? minutesList : hourList;
return CustomDropDown(
isExpanded: false,
dropDownList: dropDownList,
defaultVal:
isMinutesWidget ? defaultMinuteSelected : defaulHourSelected,
dropDownType: DropDownType.DROPDOWN_WITH_ARROW,
selectedItem: (String selectedVal, DropDownsType dropDownId) {
if (isMinutesWidget) {
defaultMinuteSelected = selectedVal;
} else {
defaulHourSelected = selectedVal;
}
},
customDropDownId: DropDownsType.CustomId,
);
} else {
return const SizedBox();
}
}
Parent Calling
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text(REPEAT_EVERY),
SizedBox(
width: 10.w,
),
repeatEveryWidget(chosenValue),
SizedBox(
width: 10.w,
),
CustomDropDown(
dropDownList: dropDownCustomList,
defaultVal: chosenValue,
dropDownType: DropDownType.DROPDOWN_WITH_ARROW,
selectedItem:
(String selectedVal, DropDownsType dropDownId) {
setState(() {
chosenValue = selectedVal;
});
},
customDropDownId:
DropDownsTypeRepeatPicker,
),
],
),
)
Output
If the user selects item 1 Minute and then selects any item other than hours the child drop down gets removed from UI. But when the user selects hours after a minute the Items in Child widget renders but the defaultValue of this does not pick a new value it retains the old data that was picked in minutes as the UI has not been destroyed.

Answer 1

The answer to the above question lies in statement management in a flutter.
As there are two lists which has string object and some data are identical like "5","10"
const List<String> minutesListConfig = ['5', '10', '15', '30', '45', '60'];
const List<String> hourListConfig = ['1', '2', '3','4', '5', '6', '7','8', '9', '10', '11','12'];
As said by the flutter team every widget has an element that keeps track of its state whenever you try to render identical object type in dropdown list it will not render the new list.
If you want the widget tree to make sure to render the dropdown widget in 2 different ways then you will have to use KEY
In this case, the Object key can be used to make sure in background flutter makes 2 different dropdown lists for both the cases and does not render the dropdown as 1 widget.
return CustomDropDown(
key: ObjectKey(chosenValue),
isExpanded: false,
dropDownList: dropDownList,
defaultVal:
isMinutesWidget ? defaultMinuteSelected : defaulHourSelected,
dropDownType: DropDownType.DROPDOWN_WITH_ARROW,
selectedItem: (String selectedVal, DropDownsType dropDownId) {
if (isMinutesWidget) {
defaultMinuteSelected = selectedVal;
} else {
defaulHourSelected = selectedVal;
}
},
customDropDownId: DropDownsType.CustomId,
);
if (widget.dropDownType == DropDownType.DROPDOWN_WITH_ARROW) {
return Material(
elevation: 10,
color: foreground_color,
borderRadius: BorderRadius.circular(10.r),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 5.w),
child: DropdownButton<String>(
key:widget.key
value: chosenValue,
isExpanded: widget.isExpanded,
dropdownColor: foreground_color,
icon: const Icon(Icons.keyboard_arrow_down_rounded),
borderRadius: BorderRadius.circular(10.r),
underline: const SizedBox(),
style: const TextStyle(color: Colors.white),
iconEnabledColor: Colors.white,
items: widget.dropDownList
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(color: Colors.white),
),
);
}).toList(),
onChanged: (String? value) {
if (value != null) {
setState(() {
chosenValue = value;
widget.selectedItem(chosenValue, widget.customDropDownId);
});
}
},
),
),
);
Flutter team video on keys
https://www.youtube.com/watch?v=kn0EOS-ZiIc