How to put a Divider between DropdownMenu items in Flutter

Question

I have a DropdownMenu and I want to draw a horizontal divider(line) between DropDownMenuEntries.

'dropdownMenuEntries' property only expects a List of DropDownMenuEntry Widgets.

Any help would be appreciated

Answer 1

I achieved the same Dropdown menu using dropdownbutton2. Below is the code for OurCustomDropdown:

class OurCustomDropdown extends StatelessWidget {
  final Controller c;
  final List<String> dropdownItems;
  final String dropdownValue;
  final void Function(String?)? onChanged;

  const OurCustomDropdown({
    super.key,
    required this.c,
    required this.dropdownItems,
    required this.dropdownValue,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<String>(
        isExpanded: true,
        items: dropdownItems
            .map((String item) => DropdownItem<String>(
                  value: item,
                  height: 20.0,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 14.0,
                    ),
                  ),
                ))
            .toList(),
        value: dropdownValue,
        onChanged: onChanged,
        buttonStyleData: ButtonStyleData(
          padding: const EdgeInsets.only(right: 10),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(12)),
            border: Border.all(
              color: kSelectedCardColor,
            ),
            color: kSelectedCardColor,
          ),
          elevation: 0,
        ),
        dropdownStyleData: kDropdownStyleData,
        dropdownSeparator: const DropdownSeparator(
          child: Divider(),
        ),
      ),
    );
  }
}