Renderflex overflowed at bottom

Question

I am trying to do animation where the HomePageTop widget shrinks whenever i scroll the listview and the offset of listview is greater than > 100. The animation works but just at the end of the animation renderflex overflowed error is being shown.

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),
          ],
        ),
      ),
    );
  }
}

Here the size of animated container is being controlled by listview scroll controller. whenever i scroll down this error is being given

Error

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

My HomePageTop widget

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())),
          ]),
        ),
      ],
    );
  }

Wrapping the animated container with expanded removes the error but the animation where size decreases does not occur. searchField() is a text field.Wrapping it in a fitted box also gives an error. Any help is appreciated.Thanks in advance

Answer 1

It is because the SizedBox inside HomePageTop widget has a fixed height. If you remove it the error does not appear, you don't need it anyway.