How to change the size of the Dropdownbutton list?

Question

I’m new to Flutter and created a Dropdownbutton where it works perfectly. But I need the same when opened, do not fill the entire screen as shown in image 1 and 2. I need the Dropdownbutton open its current location downwards (shown in image 3), so that if the user regrets opening the Dropdownbutton can collect the Dropdown and not be required to select an option for the Dropdownbutton is collected or used from the return option of the device itself. This is possible or I will need to use another Widget?

Follow my code below:

DropdownButton<String>(
          isExpanded: true,
          value: expansionValue,
          icon: Icon(Icons.arrow_downward),
          iconSize: 28,
          elevation: 16,
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
          onChanged: (String newValue) {
            setState(() {
              expansionValue = newValue;
            });
          },
          items: <String>['Box-1', 'Box-2', 'Box-3', 'Box-4','Box-5', 'Box-6',
            'Box-7', 'Box-8', "Box-9", "Box-10", "Box-11", "Box-12", "Box-13",
            "Box-14", "Box-15", "Box-16", "Box-17"]
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600)),
            );
          }).toList(),
        ),

Image 1

Image 2

Image 3 (how I need it to look)

Answer 1

• Short answer:

Officially there is no way to achieve the desired result. There are solutions (gambiarras) on the internet that adapt the original code to your goal.

• Long answer:

Searching for class properties Dropdownbutton none appear to represent the behavior you want.

There is the property itemHeight, that along with perhaps the isDense can help, depending on the situation, although it is far from generic and ideal (requires that there are not many items and that the size of each is calculated statically). In your case-example would no longer serve.

Looking here on the net, I found that answer, in English, which exactly depicts your situation. The solution presented by the user was to create a Custom Dropdownbutton, which is identical to the flutter officer, but with a property height that if it is defined, it involves the dialog selection of items in a Sizedbox with defined maximum height. The author of the answer I mentioned above provided a Gist with this change that you can import into your project and use by adding an import prefix (alias or nickname). In this example, the prefix is custom:

 import 'custom_dropdown.dart' as custom;
[...] 
custom.DropdownButtonFormField(
    height: //Sua Altura aqui
),
[...]

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

This solution is not ideal either. Every new feature that the Flutter team adds to the Dropdownbutton class will not be reflected in its custom version. This response had its last revision in September 2019 precisely with an update of this code, because of this.

One Issue in the official repository is open about this problem, and there is a comment yesterday (26/11/2020) still asking for solution. That is, it is confirmed that there is no official way to do this, and it is not known when this functionality will be added to the framework, but it is something that is already aware and requested.

On this occasion, a user made a new version of the above custom code, but adding a new offset to the top of the page. That is, the list of items will have a minimum distance from the top of the page. Precisely for the user to have the space to click out. This was updated on the last day June 3 and you can get the version of it from this repository, here. I put as a curiosity, the line link of the offset modification. Its use is similar to the original code I put above, but with the property offsetAmount definite.

For your case, a combination of these two properties should solve. Put a minimum distance to the top of the screen and/or a maximum height for the list of items. But this solution must be updated with each modification of Flutter and one day in the future (Who knows?) the team incorporate this solution to the official library.