Флаттер - проблема высоты оверлейного контейнера

Question

Я использую Overlay для рендеринга Container, который содержит Listview внутри. Когда пользователь нажимает «@», я отображаю панель упоминаний, используя Overlay, проблема в том, что контейнер занимает высоту всего экрана, хотя я явно установил ее на 100.0.

Я не знаю если это ошибка с трепетом или я делаю что-то не так, вот скриншот. Вот простой пример dartpad

Вот код, который я использую для виджета

  Widget _buildSuggestionList() {
    return selected != -1
        ? Container(
            color: Colors.purple,
            height: 100.0,
            constraints: BoxConstraints(maxHeight: 100.0, minHeight: 80.0),
            child: ListView.builder(
              itemCount: widget.mentions[selected].data.length,
              itemBuilder: (context, index) {
                final item = widget.mentions[selected].data[index];

                return GestureDetector(
                  onTap: () {
                    if (this._overlayEntry != null) {
                      this._overlayEntry.remove();

                      this._overlayEntry = null;
                    }

                    final newText = "${_controller.value.text}${item["name"]} ";

                    _controller.text = newText;

                    setState(() {
                      text = newText;
                      selected = -1;
                    });
                  },
                  child: Text(
                    item["name"],
                    style: TextStyle(fontSize: 24.0, color: Colors.amber),
                  ),
                );
              },
            ),
          )
        : null;
  }

Вот код наложения:

this._overlayEntry = OverlayEntry(builder: (_) {
     return CompositedTransformFollower(
         link: _layerLink,
         offset: Offset(0, -(size.height + 730.0)),
         child: _buildSuggestionList(),
     );
}

Overlay.of(key.currentContext).insert(_overlayEntry);

Вот моя функция сборки:

  @override
  Widget build(BuildContext context) {
    return Container(
      key: key,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: <Widget>[
          Positioned(
            child: Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(top: 12.0, left: 0.0),
              child: RichText(
                maxLines: 20,
                text: TextSpan(
                  text: text,
                  style: TextStyle(color: Colors.pink, fontSize: 16.0),
                ),
              ),
            ),
          ),
          CompositedTransformTarget(
            link: _layerLink,
            child: TextField(
              maxLines: 20,
              minLines: 1,
              controller: _controller,
              decoration: InputDecoration(hintText: widget.placeholder),
              style: TextStyle(
                color: Colors.transparent,
              ),
            ),
          ),
        ],
      ),
    );
  }

Answer 1

Вы должны ограничить сам рост CompositedTransformFollower безоговорочно, вместо применения ширины / высоты только к ребенку (вашему Container), например, с помощью Positioned:

this._overlayEntry = OverlayEntry(builder: (_) {
  return Positioned(
    width: 100,
    height: 100,
    child: CompositedTransformFollower(
      link: _layerLink,
      offset: Offset(0, -(size.height + 730.0)),
      child: _buildSuggestionList(),
    )
  );
}

Вместо Positioned вы можете использовать любой другой виджет, ограничивающий размер, а импорт заключается в переносе CompositedTransformFollower, а не дочернего элемента.