How to hide layout overflow message in flutter

Question

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

Full size

score 1 · Accepted Answer · edited Dec 29 '21 at 00:14

1

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 causes the problem as it's too small.

Removing or increasing its value should solve your problem.

edited Dec 29 '21 at 00:14

Baum mit Augen

49,044
25
144
182

answered Apr 30 '18 at 11:20

Rémi Rousselet

256,336
79
519
432

3

Understand, But in my case i'm resizing the bottom sheet based on drag up and drag down. So 'height: pageHeight' is required. And i want to add some content in bottom sheet. – Gowsik Raja Apr 30 '18 at 12:32
4

Consider using a `ListView` instead of `Column`. – Rémi Rousselet Apr 30 '18 at 12:37
now it's working good. Even i tried with `Expand` , it gave different similar result. But `ListView` is right solution for my requirement. Thanks a-lot . – Gowsik Raja Apr 30 '18 at 12:53
3

Yes, but it is not good if you publish to production, and on some phones that are not tested, you get this thing. Is there any way to remove this for production? – Nihad Delic Aug 08 '19 at 06:23
2

There are cases in Flutter where it throws overflow errors when it shouldn't, so the above answer is too pedantic. For example, with Heros it constantly complains about overflow that does not exist, and there is no clear fix. Other times it can complain about overflows that are <1px and is due to some inaccurary in Flutter's layout code, not in your code. It would be nice if there was actually a way to override this and just tell Flutter to be quiet. – shawnblais Dec 29 '21 at 00:12

How to hide layout overflow message in flutter

1 Answers1