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
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With