How to limit dropdown item list and make it scrollable

Viewed 26

I'm new to flutter and currently I'm trying to create a reusable dropdown button. The problem now is I wanted to have 15 item in my dropdown item list and it's taking all my screen space. I wanted to limit them so at first it will only show around 5-6 item and the user can scroll down the dropdown List and show the rest of the item list.

How can I achieve this ?

Here's my current code for reusable dropdown Button:

Widget build(BuildContext context) {
    return Container(
      decoration: widget.boxDecor,
      padding: widget.padding,
      margin: widget.margin,
      width: widget.width,
      height: widget.height,
      child: Center(
        child: DropdownButton<String>(
          value: widget.initialValue ?? dropdownValue,
          icon: widget.iconDropdown,
          isExpanded: true,
          elevation: 16,
          style: primaryColor400Style.copyWith(
            fontSize: fontSize10,
          ),
          underline: Container(
            height: 2,
            decoration: BoxDecoration(
              color: Colors.transparent,
            ),
          ),
          onChanged: (String? newValue) {
            if (newValue != 'Personal') {
              Provider.of<SelectedTeamProvider>(context, listen: false)
                  .setSelectedTeamNameForTicket(newValue!);
            } else {
              Provider.of<SelectedTeamProvider>(context, listen: false)
                  .setSelectedTeamNameForTicket('');
            }
            if (widget.onChanged != null) {
              widget.onChanged!(newValue!);
            }
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: itemLists.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value.tr()),
            );
          }).toList(),
        ),
      ),
    );
  }
1 Answers

You can use menuMaxHeight to control the size of the menu.

child: DropdownButton<int>(
  menuMaxHeight: 300,  // <-- Adjust this value to get the right number of items
  ...
),
Related