Question 262906 in Flutter Question posted in
The official Flutter documentation can be found here.

How to put a Divider between DropdownMenu items in Flutter

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

Tags:

2

Answers


  1. 0

    You can use the selectedItemBuilder property from the DropDownMenu

    selectedItemBuilder: (context) => widget.listOfDropDownContent
          .map(
            (text) => Column(children: [
                                Text(text), 
                                Divider(),
                              ])
          )
          .toList(),
    Login or Signup to reply.
  2. 0

    @bbr Following my recommendation, you should generate a custom DropdownMenuItem view, as demonstrated in the provided code. Please review it, as I believe it will be beneficial to you!

    DropdownButton(
            isExpanded: true,
            isDense: true,
            value: dropdownvalue,
            icon: const Icon(
              Icons.arrow_drop_down,
              color: Colors.brown,
            ),
            iconSize: 40,
            onChanged: (String? val) => setState(() => dropdownvalue = val!),
            items: items.map((option) {
              return DropdownMenuItem(
                value: option,
                child: Container(
                    width: double.infinity,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.fromLTRB(0, 8.0, 0, 6.0),
                    decoration: BoxDecoration(
                        border: Border(
                            top: BorderSide(color:  items.indexOf(option) == 0
                                    ? Colors.transparent
                                    : Colors.grey, width: 1))),
                    child: Text(option)),
              );
            }).toList(),
            selectedItemBuilder: (con) {
              return items.map((item) {
                return Text(item);
              }).toList();
            }),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search