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
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.