How to hide layout overflow message in flutter

Question

Asked by Gowsik R on April 30, 2018 (source).

I'm new for Flutter.Working with bottom sheet.Bottom sheet has normal constant height. it's height will increase based on dragging. Please refer the code below.Issue is when the bottom sheet is normal size views are overflowed. please refer attached image. I want to remove the overflow message in window.

class MyBottomSheet extends StatefulWidget {
  @override
  _MyBottomSheetState createState() => new _MyBottomSheetState();
}

class _MyBottomSheetState extends State<MyBottomSheet> {
  Offset dragDetail;
  double slidingPercent;
  static const PAGE_FULL_HEIGHT= 600.0;
  static const PAGE_NORMAL_HEIGHT=80.0;
  SlideDirection direction;
  static double pageHeight = PAGE_NORMAL_HEIGHT;
  static PagePosition pagePosition = PagePosition.Bottom;

  onVerticalStart(DragStartDetails details) {
    dragDetail = details.globalPosition;
  }

  onVerticalEnd(DragEndDetails details) {
    setState(() {
      if (pageHeight < 300) {
        pageHeight = PAGE_NORMAL_HEIGHT;
        pagePosition = PagePosition.Bottom;
      } else if (pageHeight > 300) {
        pageHeight = PAGE_FULL_HEIGHT;
        pagePosition = PagePosition.Top;
      }
    });
  }

  onVerticalUpdate(DragUpdateDetails details) {
    setState(() {
      if (dragDetail != null) {
        final newPosition = details.globalPosition;
        final dy = dragDetail.dy - newPosition.dy;

        if (dy > 0.0) {
          direction = SlideDirection.bottomToTop;
        } else if (dy < 0.0) {
          direction = SlideDirection.topToBottom;
        }

        if (direction == SlideDirection.bottomToTop &&
            pagePosition != PagePosition.Top) {
          pageHeight =
              ((dy / PAGE_FULL_HEIGHT) * 1000).abs().clamp(PAGE_NORMAL_HEIGHT, PAGE_FULL_HEIGHT);
        } else if (direction == SlideDirection.topToBottom &&
            pagePosition != PagePosition.Bottom) {
          pageHeight = PAGE_FULL_HEIGHT -
              ((dy / PAGE_FULL_HEIGHT) * 1000).abs().clamp(PAGE_NORMAL_HEIGHT, PAGE_FULL_HEIGHT);
        }
      }
    });
  }

  Column buildButtonColumn(IconData icon, String label) {

    return new Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        new Icon(icon),
        new Container(
          margin: const EdgeInsets.only(left: 30.0,right: 30.0),
          child: new Text(
            label,
            style:  new TextStyle(
              fontSize: 12.0,
              fontWeight: FontWeight.w400,
              color: Colors.blue,
            ),
          ),
        ),
      ],
    );
  }


  @override
  Widget build(BuildContext context) {
    return new Container(
      height: pageHeight,
      width: MediaQuery.of(context).size.width,
      child: new Stack(
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 0.0),
            child: new Card(
              elevation: 5.0,
              child: new PhysicalModel(
                  shape: BoxShape.rectangle,
                  borderRadius: new BorderRadius.circular(5.0),
                  color: Colors.black12,
                  child: new Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: new Column(
                      children: <Widget>[
                        new Align(
                          alignment: Alignment.topCenter,
                          child: new Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              buildButtonColumn(Icons.local_offer, 'Offer'),
                              buildButtonColumn(Icons.notifications_active, 'Notification'),
                              buildButtonColumn(Icons.shopping_cart, 'Cart'),
                            ],
                          ),
                        ),
                        new Divider(color: Colors.black,)
                      ],
                    ),
                  )),

            ),
          ),
          new GestureDetector(
            onVerticalDragStart: onVerticalStart,
            onVerticalDragEnd: onVerticalEnd,
            onVerticalDragUpdate: onVerticalUpdate,
          )
        ],
      ),
    );
  }
}

Normal Size

Normal size

Full size

enter image description here

Answer

Question answered by Rémi R (source).

In flutter, overflow is considered as an error. And should be fixed, not ignored.

On your case, it's the height: pageHeight in the root container of your bottomsheet which cause the problem as it's too small.

Removing or increasing it's value should solve your problem.

ANDROID FLUTTER FLUTTER-LAYOUT FLUTTER-TEST
SHARE: