Disable drag down to close showModalBottomSheet
7,637
Solution 1
Set enableDrag
to false
bool enableDrag
If true, the bottom sheet can dragged up and down and dismissed by swiping downwards.
https://docs.flutter.io/flutter/material/BottomSheet/enableDrag.html
Solution 2
you can try to wrap builder's result with GestureDetector with onVerticalDragStart = (_) {}
showModalBottomSheet(
context: context,
builder: (context) => GestureDetector(
child: **any_widget_here**,
onVerticalDragStart: (_) {},
),
isDismissible: false,
isScrollControlled: true,
);
Solution 3
If you still want to have the scroll inside the modal without the user drag and close it, you can use this:
showModalBottomSheet(
context: context,
enableDrag: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (context) => DraggableScrollableSheet(
expand: false,
initialChildSize: 0.9,
minChildSize: 0.5,
maxChildSize: 0.9,
builder: (context, scrollController) {
return SingleChildScrollView(
child: new Container(
color: Colors.white,
child: buildTitleWidget(),
),
);
},
),
isDismissible: false,
isScrollControlled: true,
);
The trick is not to add scrollController to the SingleChildScrollView
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController <-- HERE
child: new Container(
color: Colors.white,
child: buildTitleWidget(),
),
);
},
Author by
Jesse
Updated on December 09, 2022Comments
-
Jesse over 1 year
How do I disable / escape drag down gesture within the Bottom Sheet Modal so the user can interact within the modal without accidentally closing the modal?
Updated below with the actual modal bottom sheet.
return showModalBottomSheet( context: context, builder: (BuildContext context) { ... } }