Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide layout overflow message in flutter

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

like image 685
Gowsik Raja Avatar asked Apr 30 '18 11:04

Gowsik Raja


People also ask

How do I hide overflow error in flutter?

The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView. Also, wrap the SingleChildScrollView with Center so that the entire UI is centered.


1 Answers

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.

like image 171
Rémi Rousselet Avatar answered Sep 21 '22 19:09

Rémi Rousselet