title: Flutter DropDownButton Popup 200px below Button
body: <p>I'm using a DropDownButton with a custom style inside a ListView. My problem is: the PopupMenu opens about 200-300px below the Button so it looks like the Button below that has opened:
  <a href="https://i.stack.imgur.com/Q6DBzl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q6DBzl.jpg" alt="enter image description here"></a></p>
  
  <p>I wrapped the Dropdown in a custom style, but i already tried removing that and that did nothing. I've also tried to use just a normal Dropdownbutton, but that had the same effect.
  the corresponding build:</p>
  
  <pre><code>    @override
  Widget build(BuildContext context) {
      homeModel = Provider.of&lt;HomeModel&gt;(context);
      model = Provider.of&lt;TransferModel&gt;(context);
      navigator = Navigator.of(context);
      var items = model.items.entries.toList();
      return Container(
        color: Colors.white,
        child: ListView.builder(
          physics: BouncingScrollPhysics(),
          itemCount: model.items.entries.length,
          itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
                  child: CustomDropDown(
                    errorText: "",
                    hint: items[index].value["label"],
                    items: items[index]
                        .value["items"]
                        .asMap()
                        .map((int i, str) =&gt; MapEntry(
                            i,
                            DropdownMenuItem(
                              value: i,
                              child: Text(str is Map
                                  ? str["displayName"].toString()
                                  : str.toString()),
                            )))
                        .values
                        .toList()
                        .cast&lt;DropdownMenuItem&lt;int&gt;&gt;(),
                    value: items[index].value["selected"],
                    onChanged: (position) =&gt;
                        model.selectItem(items[index].key, position),
                  ),
                );
          },
        ),
      );
  
    }
  </code></pre>
  
  <p>CustomDropDown:</p>
  
  <pre><code>class CustomDropDown extends StatelessWidget {
    final int value;
    final String hint;
    final String errorText;
    final List&lt;DropdownMenuItem&gt; items;
    final Function onChanged;
  
    const CustomDropDown(
        {Key key,
        this.value,
        this.hint,
        this.items,
        this.onChanged,
        this.errorText})
        : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: &lt;Widget&gt;[
          Container(
            decoration: BoxDecoration(
                color: Colors.grey[100], borderRadius: BorderRadius.circular(30)),
            child: Padding(
              padding:
                  const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 5),
              child: DropdownButton&lt;int&gt;(
                value: value,
                hint: Text(
                  hint,
                  style: TextStyle(fontSize: 20),
                  overflow: TextOverflow.ellipsis,
                ),
                style: Theme.of(context).textTheme.title,
                items: items,
                onChanged: (item) {
                  onChanged(item);
                },
                isExpanded: true,
                underline: Container(),
                icon: Icon(Icons.keyboard_arrow_down),
              ),
            ),
          ),
          if (errorText != null) 
            Padding(
              padding: EdgeInsets.only(left: 30, top: 10),
              child: Text(errorText, style: TextStyle(fontSize: 12, color: Colors.red[800]),),
            )
  
        ],
      );
    }
  }
  </code></pre>
  
  <p>edit: I've just noticed, that the popup always opens in the screen center. But I still have no idea why that is.</p>
  
  <p>edit 2: thanks to @João Soares I've now narrowed down the issue: I surround the Widget with the ListView with an AnimatedContainer for opening and closing the menu. The padding of this container seems to be the culprit, but i have no idea how i can fix this, since i need that Container: (the Child is the ListView Widget)</p>
  
  <pre><code>  class ContentSheet extends StatelessWidget {
    final Widget child;
    final bool isMenuVisible;
  
    const ContentSheet({Key key, this.child, this.isMenuVisible}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: EdgeInsets.only(top: 50),
        child: AnimatedContainer(
          duration: Duration(milliseconds: 450),
          curve: Curves.elasticOut,
          padding: EdgeInsets.only(top: isMenuVisible ? 400 : 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20)),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20), topRight: Radius.circular(20)),
                color: Colors.white,
              ),
              child: child
            ),
          ),
        ),
      );
    }
  }
  </code></pre>