Renderflex overflowed at bottom - flutter

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.