Home > Mobile >  DropDownButton: Adjust height of items
DropDownButton: Adjust height of items

Time:01-11

I have DropDownButton:

DropdownButtonHideUnderline(
    child: DropdownButton(
      isExpanded: true,
      value: value,
      items: widget.items.map((item) {
        return DropdownMenuItem(
          value: item, 
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, 
              children: [
                Text(
                  item.toString(),
                ),
                Container(
                  child: Text(
                    item.subtitle.toString(),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  padding: EdgeInsets.only(left: 10.0)
                ),
              ]),
              padding: EdgeInsets.only(bottom: 10),
            )
      }).toList(),
      onChanged: widget.onChanged,
      selectedItemBuilder: (context) {
        return widget.items.map((item) {
          return Align(
            child: Text(
              item.toString(),
            ),
            alignment: Alignment.centerLeft,
          );
        }).toList();
      }
    )
  )

enter image description here

I am trying to implement a title and a subtitle (a bit smaller description). The title is generating a "Buttom Overflow" and the subtitle overflows to next item.

Is there a chance to adjust the height according to the required space of its content?

Edit:

enter image description here

Result Screen for Dropdown list-> enter image description here

Result screen after selected dropdown item-> enter image description here

CodePudding user response:

You can change dropdown item height with DropdownButton2. Use itemHeight Property to do that.

  •  Tags:  
  • Related