Dropdownbutton restrict shown items

Question

Ive got the following Problem: I want the user to choose a day of month with a dropdownbutton. So my items are the numbers 1 to 31. Now the list got pretty long and the Dropdownbutton is really large. Is there a Solution to show e.g. only 5 Elements at the same time?

Widget buildDropdownMonthlyTurnus() {
return DropdownButton<int>(
    value: _selectedDay,
    icon: Icon(Icons.arrow_downward),
    iconSize: 24,
    elevation: 16,
    style: TextStyle(color: Colors.blue),
    underline: Container(
      height: 2,
      color: Colors.blue,
    ),
    onChanged: (int newValue) {
      setState(() {
        _selectedDay = newValue;
      });
    },
    items: Constants.daysOfMonth.map((int value) {
      return new DropdownMenuItem<int>(
        value: value,
        child: new Text(
          value.toString(),
          style: new TextStyle(color: Colors.black),
        ),
      );
    }).toList());

}

In the link you see my problem with the large list.

enter image description here

I think you will find the answer here https://stackoverflow.com/a/53984215/10768535 — s.am.i, Apr 08 '21 at 11:00

score 0 · Answer 1 · answered Apr 08 '21 at 10:46

0

For this problem you can use listview, inside a container and show manage its size according to the list items shown, you don't need to use dropdown items at all.

answered Apr 08 '21 at 10:46

Jay Dangar

3,271
1
16
35

Hey, I added some Code from my Application. You can see my Dropdown which creates the Screenshot. – Kai Leifker Apr 08 '21 at 11:57
@KaiLeifker you can use custom_dropdown created by diegodeveloper, here's the example code and link to the thread. https://github.com/flutter/flutter/issues/23865#issuecomment-638546234 – Jay Dangar Apr 08 '21 at 12:02

score 0 · Answer 2 · answered Mar 31 '22 at 13:58

Use the menuMaxHeight property of the DropdownButton class. It's a recent addition to control the height of the menu.

Widget buildDropdownMonthlyTurnus() {
return DropdownButton<int>(
    menuMaxHeight: 200.0,
    value: _selectedDay,
    icon: Icon(Icons.arrow_downward),
    iconSize: 24,
    elevation: 16,
    style: TextStyle(color: Colors.blue),
    underline: Container(
      height: 2,
      color: Colors.blue,
    ),
    onChanged: (int newValue) {
      setState(() {
        _selectedDay = newValue;
      });
    },
    items: Constants.daysOfMonth.map((int value) {
      return new DropdownMenuItem<int>(
        value: value,
        child: new Text(
          value.toString(),
          style: new TextStyle(color: Colors.black),
        ),
      );
    }).toList());

Dropdownbutton restrict shown items

2 Answers2