Option to limit size of DropDown from DropDownButton

[sathishRA91]

i have long list its fill the window when click the DropDownButton. Is it possible to limit the suggestionsAmount in DropDownButton view

[zoechi]

Please elaborate more what this request is about.

[sathishRA91]

[zoechi]

Please add the output of flutter doctor -v.

[HansMuller]

This is a reasonable request.

By default, DropdownButton's menu shows as many items as will fit modulo a little padding above and below. It would be useful to be able to provide a limit. Could be: number of items, menu height, menu height as a percentage of the available space.

If the dropdown's menu is going to scroll, it's helpful if the height limit is not a whole number of items. A partially visible item at the bottom of the menu is a reminder that the menu is scrollable.

[aytunch]

@HansMuller While at it, we should add limitations for the distance the opened menu is from top or bottom. A problem I am having is as follows:
I am using Scaffold.extendBody = true and when I open Dropdownmenu, the bottom part of the list stays under the bottomnavbar. So if we can limit the menu with bottom/top padding as well as the size it would be perfect. Having an only height/width limitation would not be enough since sometimes the dropdownbutton is just above the bottomnavbar and the menu opens up towards top keeping the bottom under the bar. limiting height would only bring the top downwards. not bottom upwards.

[HansMuller]

If Scaffold.extendBody = true, descendants of the scaffold's body enclosed in a SafeArea should avoid the BottomNavigationBar. Will have to see how that works with a drop down menu...

[aytunch]

If Scaffold.extendBody = true, descendants of the scaffold's body enclosed in a SafeArea should avoid the BottomNavigationBar. Will have to see how that works with a drop down menu...

Most probably you are right that it should work with a standart BottomNavigationBar but I implemented mine custom which is wrapping a BottomAppBar. And I believe many can do so as well in order to have the tabs having their own nested navigators like Bizzotto did.

[aytunch]

@HansMuller I tried wrapping DropDownButton in a SafeArea and the dropdowns themselves moved up in the screen by a lot.

However, the DropDownButton Menu still is behind the BottomNavigationBar (BottomAppBar) :((

[HansMuller]

In the case 5km/10km/etc case above the dropdown menu just doesn't fit within the SafeArea. I think what's needed is for the menu's size to reflect the safe area's limits (not the screen's limits). Will look into this. Thanks for the excellent illustration of the problem BTW!

[aytunch]

@HansMuller Thank you for answering so quickly. I will leave them as they are for now and work on building other stuff. I am sure a solution will emerge since you are handling it. Can't wait

[HansMuller]

Ordinarily the dropdown button's menu appears in a route that appears on top of the BottomNavigationBar etc. Here's a simple test case: https://gist.github.com/HansMuller/4444359b7a06df9593004173bc639949

Your case looks considerably more complex? Can you provide a test case that demonstrates the problem?

[wprater]

Is there another issue that tracks a request to adjust or limit the max height for a DropdownButton. We would like to track the progress of such a change, if it's already planned.

[no-response]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

[byronferguson]

@wprater we also have an issue with the default behavior consuming the entire screen, minus a little vertical padding, which makes it difficult to dismiss.

We really need a means to control the dropdown area of this Widget

[CoreyCole]

diegoveloper on stack overflow has implemented a dropdown that takes a pixel height

[tudor07]

@sathishRA91 can you please re-open this issue, it has not been fixed. @CoreyCole's answer is a workaround, but I think a proper fix is necessary in Flutter.

[jffiorillo]

Do we have a proper fix to this issue? I agree with @tudor07 what @CoreyCole suggested is just a workaround.

[MuhammadAliKhan1]

Still not solved huh ? oh well..

[maxgmer]

ye pls add the option to set expanded height

[BoredNerdy]

custom dropdown widget is here :

https://github.com/BoredNerdy/custom_drop_down.git

[talhashahab786]

Brother, simply use containers with margin and paddings and use isExpanded to true. Code given below:

• Thank me Later *

              Container(
                      width: MediaQuery.of(context).size.width * 0.3,
                      margin: EdgeInsets.only(
                          top: 0,
                          left: MediaQuery.of(context).size.width * 0.75),
                      padding: EdgeInsets.only(),
                      child: Center(
                          child: Align(
                              alignment: Alignment.topRight,
                              child: DropdownButton<String>(
                                value: dropDownValue,
                                // icon: Icon(Icons.arrow_downward),
                                iconSize: 24,
                                elevation: 16,
                                isExpanded: true,
                                style: TextStyle(
                                  color: Colors.black87,
                                  fontSize: 14,
                                  height: 1.5,
                                ),
                                // underline: Container(
                                //   height: 2,
                                //   color: Colors.deepPurpleAccent,
                                // ),
                                onChanged: (String newValue) {
                                  setState(() {
                                    dropDownValue = newValue;
                                  });
                                },
                                items: countriesList
                                    .map<DropdownMenuItem<String>>(
                                        (String value) {
                                  return DropdownMenuItem<String>(
                                    value: value,
                                    child: Text(
                                      value,
                                      textAlign: TextAlign.right,
                                    ),
                                  );
                                }).toList(),
                              )))),
  

[tanpinquan]

Since I wanted to maintain a minimum distance from the top the screen instead of a fixed height, I modified diegodeveloper's custom_dropdown to accept a minimum offset value from the top of the screen.

Just download the dart file from link

Usage is the similar to diegodeveloper's

    import 'custom_dropdown.dart' as custom;

    Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Container(
          padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
          child: Form(
            child: ListView(
              scrollDirection: Axis.vertical,
              children: <Widget>[
                //other widgets here
                custom.DropdownButtonFormField(
                  offsetAmount: 150.0,
                  items: this.dropDownItems
                ),
              ],
            ),
          )),
    );

Don't forget to add the alias also in your DropdownMenuItem like this :

 custom.DropdownMenuItem(
                child: Text("Sample Tex"),
                value: "any_value",
              ),

[mahmedMostafa]

still open!!!

[lucasbiel7]

No solutions for this?

[yagnimurali]

Is there any estimation by when we can see a proper solution?

[bhavinwebdesk]

I am able to solve it by changing the copy of DropDown and change this line to something like:
final double maxHeight = math.max(0.0, (constraints.maxHeight / 2) - 1.5 * _kMenuItemHeight);
It is a quick-fix for me but still, I am testing it.

[slagathor2094]

I can't believe this is still open

[gfb-47]

Having the same issue here..

[ggaj]

Some problem here...

😭

[TobiasHeidingsfeld]

Any ETA? How can it take 2 years to add a simple height when the community already added the code for it?

[yudi43]

Flutter is getting a bad reputation because of such issues. It's been so long.

[PranDev]

Has there been any form of acknowledgement of this issue? As a new Flutter dev, Having to use custom components for such a simple issue isn't encouraging at all.

[diego-lipinski-de-castro]

2 year anniversary of this issue

[2shrestha22]

I faced this issue a year ago, faced it again. But here, this issue is open for 2 years.

[AkshayKaneriya]

I am facing this issue, is this issue solved or not?

[slagathor2094]

Are there any updates on this?

[YeungKC]

maybe this week.

[shihaohong]

#76493 has a PR ready that should allow users to limit the size of the menu, if anybody wants to take a look and see

[Joan1211]

More than 2 years to wait for a simple feature.. From one of the most famous software development kit, it's strange that this kind of basic features are not included.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.