A RenderFlex overflowed by 112 pixels on the bottom - flutter

Question

I am using AnimatedContainer. it animate size from 0 to some size and it contain some text and all other things. on pressing one button animation is started and it shows flowing errors.
On the button press i just set value of sizeOfLevel. initially value of it is 0.
Code:
AnimatedContainer(
curve: Curves.bounceIn,
duration: Duration(milliseconds: 200),
width: sizeOfLevel,
height: sizeOfLevel,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
image: DecorationImage(
image: AssetImage('images/levelunlockScreen.jpg'),
fit: BoxFit.cover),
border: Border.all(
style: BorderStyle.solid, width: 4.0, color: Colors.white)),
child: Column(
children: <Widget>[
Center(
child: new Text(
"Unlock Level",
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
],
),
),
Errors:
I/flutter ( 4579): The following message was thrown during layout:
I/flutter ( 4579): A RenderFlex overflowed by 112 pixels on the bottom.
I/flutter ( 4579): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 4579): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 4579): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 4579): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 4579): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 4579): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 4579): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 4579): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 4579): like a ListView.
I/flutter ( 4579): The specific RenderFlex in question is:
I/flutter ( 4579): RenderFlex#4086c OVERFLOWING
I/flutter ( 4579): creator: Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Center
I/flutter ( 4579): ← Stack ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder
I/flutter ( 4579): ← ⋯
I/flutter ( 4579): parentData: offset=Offset(4.0, 4.0) (can use size)
I/flutter ( 4579): constraints: BoxConstraints(w=115.7, h=115.7)
I/flutter ( 4579): size: Size(115.7, 115.7)
I/flutter ( 4579): direction: vertical
I/flutter ( 4579): mainAxisAlignment: start
I/flutter ( 4579): mainAxisSize: max
I/flutter ( 4579): crossAxisAlignment: center
I/flutter ( 4579): verticalDirection: down

Answer 1

" Warping your parent Column into - SingleChildScrollView" works to me, I'm animate the height of the AnimatedContainer.
Older code
return new AnimatedContainer(
curve: Curves.easeInOutCubic,
height: showSearchBar ? 350 : 0,
duration: new Duration(seconds: 3),
child: Container(
margin: EdgeInsets.all(10),
child: Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text('Busque por pacientes'),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child: Column(
children: this.children,
),
),
RaisedButton(
color: themeSecondary,
onPressed: () {
print('raised clicked');
},
child: Text('Buscar'),
)
]),
),
),
),
);
And the newer, warping the SingleChildScrollView
return new AnimatedContainer(
curve: Curves.easeInOutCubic,
height: showSearchBar ? 350 : 0,
duration: new Duration(seconds: 3),
child: Container(
margin: EdgeInsets.all(10),
child: Card(
child: Padding(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text('Busque por pacientes'),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 20),
child: Column(
children: this.children,
),
),
RaisedButton(
color: themeSecondary,
onPressed: () {
print('raised clicked');
},
child: Text('Buscar'),
)
]),
),
),
),
),
);