flutterdartmaterial-uidrop-down-menumaterial-design

How to put a Divider between DropdownMenu items in Flutter


This is what I want to achieveI 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


Solution

  • 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(),
            ),
          ),
        );
      }
    }