title: Flutter: DropDownButton items below button
body: <p>I want to create a pretty <code>DropDownButton</code>. 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.</p>
  <p><a href="https://i.stack.imgur.com/G4h2T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4h2T.png" alt="DropDownButton folded" /></a></p>
  <p>and after:</p>
  <p><a href="https://i.stack.imgur.com/Ft03p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ft03p.png" alt="DropDownButton unfolded" /></a></p>
  <p>Below is my code:</p>
  <pre><code>var _repeats = [&quot;Einmalig&quot;, &quot;Wiederholen:&quot;];
  String _initRepeat = &quot;Einmalig&quot;;
  
  FormField&lt;String&gt;(
                              builder: (FormFieldState&lt;String&gt; 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&lt;String&gt;(
                                      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&lt;String&gt;(
                                          value: value,
                                          child: Text(
                                            value,
                                            style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 12.0,
                                            ),
                                          ),
                                        );
                                      }).toList(),
                                    ),
                                  ),
                                );
                              },
                            ),
  </code></pre>
  <p>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!!</p>