A RenderFlex overflowed by 112 pixels on the bottom

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