Анимированный контейнер: RenderFlex переполнен на 154 пикселя внизу

Question

У меня проблема при изменении размера анимированного контейнера при установке другой высоты содержимого.

При изменении размера выдается исключение:

════════ Библиотека рендеринга 1013 *

Вот минимальный пример для воспроизведения проблемы (гораздо более сложный в моем реальном приложении, но вы понимаете, в чем дело):

bool expanded;

initState() {
  super.initState();
  expanded = false;
}

void _toggleMode() {
  setState(() {
    expanded = !expanded;
  });
}

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Test")),
    body: AnimatedContainer(
      height: expanded ? 230 : 70,
      duration: Duration(milliseconds: 800),
      child: Column(
        children: <Widget>[
          Expanded(
            child: PageView.builder(
              itemBuilder: (context, position) {
                return expanded
                    ? Column(
                        children: <Widget>[
                          Container(height: 40, color: Colors.blue),
                          Container(height: 40, color: Colors.blue[400]),
                          Container(height: 40, color: Colors.blue[300]),
                          Container(height: 40, color: Colors.blue[200]),
                          Container(height: 40, color: Colors.blue[100]),
                        ],
                      )
                    : Column(
                        children: <Widget>[
                          Container(height: 40, color: Colors.blue),
                        ],
                      );
              },
            ),
          ),
          InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
        ],
      ),
    ),
  );
}

В обоих режимах (расширен или нет), содержимое соответствует контейнеру (без переполнения), проблема возникает только при изменении размера.

Конечно, проблема не возникает с контейнером basi c без анимации.

Как я могу справиться с этим?

Answer 1

Это происходит из-за того, что вы проверяете развернутый контейнер, а затем немедленно возвращаете контейнеры до того, как контейнер приобретет свой окончательный размер

Обходной путь - изменить столбец большего размера. с ListView с NeverScrollableScrollPhysics()

Редактировать: вам даже не нужно больше проверять развернутость, и вы получите правильную анимацию

 bool expanded;

  initState() {
    super.initState();
    expanded = false;
  }

  void _toggleMode() {
    setState(() {
      expanded = !expanded;
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test")),
      body: AnimatedContainer(
        height: expanded ? 230 : 70,
        duration: Duration(milliseconds: 800),
        child: Column(
          children: <Widget>[
            Expanded(
              child: PageView.builder(
                itemBuilder: (context, position) {
                  return ListView(
                    physics: NeverScrollableScrollPhysics(),
                        children: <Widget>[
                    Column(
                      children: <Widget>[
                          Container(height: 40, color: Colors.blue),
                          Container(height: 40, color: Colors.blue[400]),
                          Container(height: 40, color: Colors.blue[300]),
                          Container(height: 40, color: Colors.blue[200]),
                          Container(height: 40, color: Colors.blue[100]),
                      ],
                    ),
                  ],
                      );
//                      : Column(
//                    children: <Widget>[
//                      Container(height: 40, color: Colors.blue),
//                    ],
//                  );
                },
              ),
            ),
            InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
          ],
        ),
      ),
    );
  }