How to add divider to dropdown list? - flutter

Question

I have the following dropdown:
DropdownButtonFormField(
isExpanded: true,
isDense: true,
value: dropdownValue,
icon: SvgPicture.asset(
AppImages.ic_expand_dropdown,
),
iconDisabledColor: AppColors.colorDarkGray,
iconEnabledColor: AppColors.colorDarkGray,
focusNode: widget.focusNode,
validator: widget.validator,
decoration: InputDecoration(
label: widget.widgetLabel,
labelStyle:
widget.labelStyle ?? AppTextStyles.transparentBlueDark16(),
labelText: widget.isLabelRes
? AppLocales.getTextOrNull(widget.label)
: widget.label,
fillColor: Colors.white,
filled: true,
hintText: widget.pickerPlaceholder,
hintStyle: widget.hintStyle ?? AppTextStyles.alto16(),
alignLabelWithHint: true,
errorText: widget.isErrorRes
? AppLocales.getTextOrNull(widget.error)
: widget.error,
contentPadding: const EdgeInsets.symmetric(
horizontal: 0,
vertical: 0,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: 1,
color:
widget.enabledBorderColor ?? AppColors.colorInputBorder,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: 2,
color: widget.focusedBorderColor ?? AppColors.colorAccent,
),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: 2,
color: AppColors.colorError,
),
),
border: UnderlineInputBorder(
borderSide: BorderSide(
width: 1,
color: widget.borderColor ?? AppColors.colorInputBorder,
),
),
),
style: AppTextStyles.grayDark16(
fontWeight: AppFontWeight.medium,
),
onChanged: (String? newValue) {
dropdownValue = newValue;
widget.onChanged(dropdownValue!);
},
items: widget.pickerList.map<DropdownMenuItem<String>>((value) {
return DropdownMenuItem<String>(
value: value,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
child: Text(
value,
style: AppTextStyles.grayDark16(
fontWeight: AppFontWeight.medium,
),
),
),
Visibility(
child: Divider(
color: AppColors.colorEden10,
height: 2.0,
indent: 10.0,
endIndent: 10.0,
),
visible: widget.pickerList.last != value,
),
],
),
);
}).toList(),
),
I need to display the dividers between items. As I didn't find any option to add it as in List, I added the divider by creating a Column that contains Text and Divider which is shown in some cases. But the problem is that when I select the item divider is also displayed in dropdown as a result and I don't see any option to hide it here. Is there any way to add a divider without displaying it after selecting item?

Answer 1

To avoid selected Item Divider, we need to use selectedItemBuilder:. By default, it uses items layout.
You can use on DropdownButtonFormField like
selectedItemBuilder: (context) => widget.pickerList
.map(
(text) => Text(text),
)
.toList(),
You can set your own logic to create the UI.
And the simplified State-snippet is
late List<DropdownMenuItem<String>> menuItems = [];
#override
void initState() {
super.initState();
dropdownValue = widget.pickerList.first;
for (int i = 0; i < widget.pickerList.length; i++) {
//* on 1st index there will be no divider
i == 0
? menuItems.add(
DropdownMenuItem<String>(
child: Text(
widget.pickerList[i],
),
value: widget.pickerList[i],
),
)
: menuItems.add(
DropdownMenuItem<String>(
child: Container(
width: double.maxFinite,
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(
top: 6, // adjust the way you like
),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey,
width: 2,
),
),
),
child: Text(
widget.pickerList[i],
),
),
value: widget.pickerList[i],
),
);
}
}
#override
Widget build(BuildContext context) {
return DropdownButtonFormField<String>(
isExpanded: true,
isDense: true,
value: dropdownValue,
onChanged: (String? newValue) {
// dropdownValue = newValue;
// widget.onChanged(dropdownValue!);
},
items: menuItems,
selectedItemBuilder: (context) => widget.pickerList
.map(
(text) => Text(text),
)
.toList(),
);
}