Flutter: DropDownButton items below button

Question

I want to create a pretty DropDownButton. Unfortunately, this seems to be pretty hard. While the design is fine, whenever I want to select a different item the list drops above the selection in a very ugly way. Below is a picture of the current version.

and after:

Below is my code:

var _repeats = ["Einmalig", "Wiederholen:"];
String _initRepeat = "Einmalig";

FormField<String>(
                            builder: (FormFieldState<String> state) {
                              return Container(
                                decoration: BoxDecoration(
                                  color: Color.fromRGBO(204, 204, 204, 1.0),
                                  border: Border.all(color: Colors.black),
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 8.0, right: 8.0,),
                                  child: DropdownButton<String>(
                                    dropdownColor:
                                        Color.fromRGBO(204, 204, 204, 1.0),
                                    alignment: AlignmentDirectional.center,
                                    value: _initRepeat,
                                    isDense: true,
                                    onChanged: (String? newValue) {
                                      setState(() {
                                        _initRepeat = newValue!;
                                        state.didChange(newValue);
                                      });
                                    },
                                    items: _repeats.map((String value) {
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(
                                          value,
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 12.0,
                                          ),
                                        ),
                                      );
                                    }).toList(),
                                  ),
                                ),
                              );
                            },
                          ),

Does anyone have advice on how to improve this? I basically want a selection that is smooth below the currently selected value. Thank you very much!!

Check [the answer here](https://stackoverflow.com/a/76899391/11566969), you can do this utilizing the menuStyle property: — Abel, Aug 14 '23 at 13:44

Ahmed Elsayed · Answer 1 · 2021-12-06T02:30:14.380

I've created a custom DropdownButton from current version of Flutter's DropdownButton and made it more customizable. It's easy, simple and you can have steady dropdown menu below the button "As long as it's possible" without any issues and many other features described with the package. Also, I've added the same functionality to DropdownButtonFormField2 and added a feature of using the button as a popup menu button and the ability of adding dividers after items. I've tested it very well and it works like a charm!

You can use the package or use the source file on GitHub directly. Also, I've Added custom widget with the package you can customize default DropdownButton2 widget for your entire app and use it with few lines as shown in the examples.

Package: DropdownButton2

Repository (GitHub): DropdownButton2

score 0 · Answer 2 · answered Sep 22 '21 at 18:24

0

This package should be your way to go: dropdown_below. It offers exactly what you are looking for.

Or you check out this answer: DropdownButton under Button itself

Basically, it gives you a complete code example of a custom DropdownButton where the Dropdown is always "under" the button itself.

answered Sep 22 '21 at 18:24

Lars

1,250
9
25

I copied the example from `dropdown_below` but it doesn't work for me. Neither do the solutions in the stackoverflow post. I get nullsafety issues :/ Is there any other solution? I would have expected a much more intuitive approach, since dropdowns are used so oftenly. – spadel Sep 22 '21 at 19:04

Flutter: DropDownButton items below button

2 Answers2