Bottom Overflow in Expansion Panel

Question

Can anyone help to decipher the exception that I keep running into? I am not sure what to attempt next in order to fix the overflow as the panel expands. I've tried wrapping it into a flexible widget but that doesn't seem to fix the issue.

Here's a quick gif showing the error: https://imgur.com/itIYV8s

Here is my exception:

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY 
╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 74 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked 
in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents 
being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) 
to force the children of the
flutter: RenderFlex to fit within the available space instead of being 
sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter:   RenderFlex#ac136 OVERFLOWING
flutter:   creator: Column ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Container ←
flutter:   Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#04b41 ink renderer]
flutter:   ← NotificationListener<LayoutChangedNotification> ← CustomPaint ← ⋯
flutter:   parentData: <none> (can use size)
flutter:   constraints: BoxConstraints(w=363.0, h=0.4)
flutter:   size: Size(363.0, 0.4)
flutter:   direction: vertical
flutter:   mainAxisAlignment: spaceBetween
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: center
flutter:   verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: A RenderFlex overflowed by 74 pixels on the bottom.

Here is my code:

new SingleChildScrollView(
    child: new Card(
    margin: EdgeInsets.all(0.0),
    elevation: 2.0,
    color: MyApp.getTheme().canvasColor,
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new ListTile(
            title: new Text("FB", style: new TextStyle(
              fontWeight: FontWeight.bold,
            ),),
            subtitle: new Text("Facebook, Inc."),
            onTap: () {
              setState(() {
                if (this._bodyHeight == 200.0) {
                  this._bodyHeight = 0.0;
                } else {
                  this._bodyHeight = 200.0;
                }
              });
            },
            trailing: new FlatButton(
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
              ),
              onPressed: () {
                setState(() {
                  mode++;
                  if (mode == 1) {
                    text = "+0.80%";
                  } else if (mode == 2) {
                    text = "+1.41";
                  } else {
                    text = "513.3B";
                    mode=0;
                  }
                });
              },
              child: new Text("+1.41", style: new TextStyle(
                color: Colors.white,
              ),),
              color: Colors.green,
            )
        ),
        new Container(
          child: new AnimatedContainer(
            child: new Column(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(""),
                new Padding(
                  padding: new EdgeInsets.only(bottom: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Divider(),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          new FlatButton(
                            onPressed: () {
                              setState(() {
                                if (this._bodyHeight == 200.0) {
                                  this._bodyHeight = 0.0;
                                } else {
                                  this._bodyHeight = 200.0;
                                }
                              });
                             },
                            child: new Text(
                              "CANCEL",
                              style: new TextStyle(
                                color: Colors.grey,
                              ),
                            ),
                          ),
                          new FlatButton(
                            onPressed: null,
                            child: new Text(
                               "SAVE",
                              style: new TextStyle(
                                color: MyApp.getTheme().indicatorColor,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                )
              ],
            ),
            width: 400.0,
            curve: Curves.easeInOut,
            duration: const Duration(milliseconds: 500),
            height: _bodyHeight,
            color: MyApp.getTheme().canvasColor,
          ),
        ),
      ],
    ),
  ),
),

Thank you so much!

Answer 1

I checked out your code and the reason of the error was Column part within the FlatButton and Dividers.

new SingleChildScrollView(
        child: new Card(
          margin: EdgeInsets.all(0.0),
          elevation: 2.0,
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new ListTile(
                  title: new Text(
                    "FB",
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  subtitle: new Text("Facebook, Inc."),
                  onTap: () {
                    setState(() {
                      if (this._bodyHeight == 200.0) {
                        this._bodyHeight = 0.0;
                      } else {
                        this._bodyHeight = 200.0;
                      }
                    });
                  },
                  trailing: new FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius:
                          new BorderRadius.all(new Radius.circular(20.0)),
                    ),
                    onPressed: () {
                      setState(() {
                        mode++;
                        if (mode == 1) {
                          text = "+0.80%";
                        } else if (mode == 2) {
                          text = "+1.41";
                        } else {
                          text = "513.3B";
                          mode = 0;
                        }
                      });
                    },
                    child: new Text(
                      "+1.41",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    color: Colors.green,
                  )),
              new Container(
                child: new AnimatedContainer(
                  child: Align(
                      alignment: Alignment.bottomRight,
                      child: new SingleChildScrollView(
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            new Divider(),
                            new Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                new FlatButton(
                                  onPressed: () {
                                    setState(() {
                                      if (this._bodyHeight == 200.0) {
                                        this._bodyHeight = 0.0;
                                      } else {
                                        this._bodyHeight = 200.0;
                                      }
                                    });
                                  },
                                  child: new Text(
                                    "CANCEL",
                                    style: new TextStyle(
                                      color: Colors.grey,
                                    ),
                                  ),
                                ),
                                new FlatButton(
                                  onPressed: null,
                                  child: new Text(
                                    "SAVE",
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      )),
                  width: 400.0,
                  curve: Curves.easeInOut,
                  duration: const Duration(milliseconds: 500),
                  height: _bodyHeight,
                ),
              ),
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.

And during the animation, column is overflowing . And because column is not visible (and it's expected to be visible) it's causing this error. Therefore we are going to put the column in the SingleChildScrollView to fix the issue so it will taking in to account as visible.

I hope everything is clear, please tell me if something is not clear or code is not working.