Search code examples
flutterdropdown

How can I limit to only five items in the dropdown but still be able to scroll down?


We have a list with 20+ elements that we have to show in a dropdown. The problem is that when we deploy the dropdown, the list covers all the screen. We want to reduce the number of shown elements to about 5 or 6 and be able to scroll down the rest of the list. We would also like to know if it's possible that the dropDownMenuItems deploy under the dropDownButton.

We have tryed doing ".toList().sublist(0,5)," but this way didn´t allow us to scroll.

Widget _dropdown() {
    return new Container(
      width: MediaQuery.of(context).size.width * 35 / 100,
      height: MediaQuery.of(context).size.height * 6 / 100,
      decoration: BoxDecoration(
        backgroundBlendMode: BlendMode.darken,
      ),
      child: Theme(
        child: DropdownButtonHideUnderline(
          child: ButtonTheme(
            alignedDropdown: true,
            child: new DropdownButton(
              hint: Text(
                'HINT TEXT',
              ),
              value: selected_item,
              onChanged: (newValue) {
                setState(
                  () {
                    selected_item = newValue;
                  },
                );
              },
              isDense: false,
              isExpanded: true,

              items: data.map((location) {
                return new DropdownMenuItem<String>(
                  child: new Container(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: new Text(
                        location.toUpperCase(),
                      ),
                    ),
                  ),
                  value: location,
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }

Solution

  • Look into this custom DropDown Button. It is the normal Dropdown Button with the possibility to give height to the widget. If you set height = 5* 48.0 (which is the _menuItemHeight) you should only see 5 elements.