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!!

Answer 1

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