Блог

Я пытаюсь создать анимацию, в которой виджет HomePageTop сжимается всякий раз, когда я прокручиваю listview, а смещение listview превышает > 100. Анимация работает, но только в конце анимации отображается ошибка renderflex overflowed.

 class HomePageView extends StatefulWidget {
  @override
  _HomePageViewState createState() => _HomePageViewState();
}

class _HomePageViewState extends State<HomePageView> {
  ScrollController scrollController = ScrollController();
  bool closeTopContainer = false;

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      setState(() {
        closeTopContainer = scrollController.offset > 100;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color.fromRGBO(235, 236, 240, 1),
      body: Container(
        height: size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AnimatedContainer(
              color: Colors.redAccent,
                width: size.width,
                duration: const Duration(milliseconds: 200),
                height: closeTopContainer ? 0 : size.width * .33,
                child: HomePageTop(
                  size: size,
                )),
            Expanded(
              child: ListView(
                      controller: scrollcontroller),
          ],
        ),
      ),
    );
  }
}
  

Здесь размер анимированного контейнера контролируется контроллером прокрутки listview.
всякий раз, когда я прокручиваю вниз, выдается эта ошибка

Ошибка

 The following assertion was thrown during layout:
A RenderFlex overflowed by 5.4 pixels on the bottom.

The relevant error-causing widget was:
  Column file:///D:/flutter/app/app/lib/views/Widgets/widgets.dart:94:12

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
The specific RenderFlex in question is: RenderFlex#a37e0 OVERFLOWING:
  needs compositing
  creator: Column ← HomePageTop ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Flex
    ← ConstrainedBox ← Container ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=470.2, h=49.6)
  size: Size(470.2, 49.6)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: min
  crossAxisAlignment: center
  verticalDirection: down
  

Мой виджет на главной странице

 Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 55,
        ),
        Expanded(
          child: Stack(children: [
            Positioned(right: 20, child: FittedBox(fit:BoxFit.fill,child: LogoutButton())),
            Positioned(
                top: 50,
                child: Container(
                  alignment: Alignment.topCenter,
                    padding: EdgeInsets.all(20),
                    width: size.width,
                    child: searchField())),
          ]),
        ),
      ],
    );
  }
  

Обертывание анимированного контейнера с помощью expanded устраняет ошибку, но анимация, в которой размер уменьшается, не возникает.
searchField() — это текстовое поле.Обертывание его в подогнанный блок также выдает ошибку.
Любая помощь приветствуется.Заранее спасибо

Это потому, что SizedBox внутри виджета HomePageTop имеет фиксированную высоту. Если вы удалите его, ошибка не появится, вам это все равно не нужно.