Modal bottom sheets should not dismiss on tapping the sheet body

Currently showModalBottomSheet() allows dismissing the displayed sheet by tapping on its body.
The modal bottom sheet should not dismiss upon tapping the general body.

See https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet, modal bottom sheets can only be dismissed by:

Tapping a menu item or action within the bottom sheet
Tapping the scrim
Swiping the sheet down
Using a close affordance within the bottom sheet’s top app bar, if available

I can work around this with an opaque noop gesture detector around the sheet widget, but the default behavior ought to conform to material spec.

~~I'm troubling with the problem too, I wonder how you use the GestureDetector to solve the dismissing of bottom sheet when tapping its body? Could you please show me a simple code example?~~
Have already solved, thanks a lot!

For the record, the fix in our code was to wrap our bottom sheet widget like this. The buttons in the bottom sheet still worked:

GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {},
      child: <existing bottom sheet widget>
)

I also agree with this. Model bottom sheet should not closed, because tap does indicate interest in model, not intention to dismiss.

I also agree on this, when a user tap on the Model Bottom Sheet, it should not close it.

This is still happening for me.

Agreed. Model sheet should close if tapped outside but not inside unless directed to do so.

@HansMuller

cc @HansMuller

Dear developers, let users decide how bottom sheet will react on tap on it's body

Why just not having this configurable with a dismissable field by default to false to be material compliant?

While this isn't technically a breaking API change, in order to fix this we would be changing the current behavior of the bottom sheet implementation. For those interested I posted a breaking change announcement here:

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!topic/flutter-announce/9m39PZCAKkM

Feel free to add to this ticket to provide feedback.

Why just not having this configurable with a dismissable field by default to false to be material compliant?

We could add a dismissOnTap boolean field, but that would add complexity to the API for a feature that most apps would never want, and for those that do, it is simple to implement themselves.

IMHO anything modal should be dismissed only programatically. When a developer pops anything modal he does it precisely to prevent user interaction with whatever is behind it, so he should have control on how to dismiss it.
I was trying to use a modalbottomsheet to show some info while performing some async background work and I expected it to force the user to wait for it to finish but he can just tap anywhere on the screen, close the modalbottomsheet and mess with the entire workflow I need (finish loading data before being able to edit it).
Same goes for modal dialogs. Hardware back button on Android can dismiss it. When instead it should be considered part of the page and pop the entire page, not just the modal.
But for those who wants to have full control over the modal dismission, you need something like that:

showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              MyModel model = Provider.of<MyModel>(context); //this is just my model doing the background work. You don't need it
              return WillPopScope(
                onWillPop: () async => false, //prevents Android back button and outside tap from popping it
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {}, //prevents taps inside the sheet from popping it
                  onVerticalDragStart: (_) {}, //prevents dragging down from popping it
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: <Widget>[
                        CircularProgressIndicator(),
                        SizedBox(
                          width: 10,
                        ),
                        Text(model.progressText),
                      ],
                    ),
                  ),
                ),
              );
            });

showDialog only needs the WillPopScope and barrierDismissible: false, though

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
	return WillPopScope(
	  onWillPop: () async => false,
	  child: Center(
		child: CircularProgressIndicator(),
	  ),
	);
  },
);

But honestly? This shouldn't be necessary. This should be the default behavior. All that extra code should be added IF desired, not if undesired. Having to add empty methods to prevent stuff is definitely not the best design and it looks like a real problem in Flutter. My code is full of them just to make things work as expected.

So here're my suggestions:

Add: onBackPressed callback for all modals.
Add: onOutsideTap, onInsideTap and onSwipeDown callbacks (or something like that) to ModalBottomSheet.

If set, they are enabled. If not set, they are disabled by default. Just like other Widgets on Flutter like FlatButton.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Modal bottom sheets should not dismiss on tapping the sheet body #20720

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Modal bottom sheets should not dismiss on tapping the sheet body #20720

Description

Activity

Narumikun commented on Oct 14, 2018

jklint-g commented on Oct 15, 2018

yathit commented on Nov 18, 2018

iamhachemi commented on Dec 31, 2018

dominikkallusky commented on Feb 7, 2019

leogny commented on Apr 27, 2019

Hixie commented on Apr 30, 2019

marinat commented on May 7, 2019

jaumard commented on May 9, 2019

darrenaustin commented on May 10, 2019

darrenaustin commented on May 10, 2019

dpedrinha commented on Sep 29, 2019

github-actions commented on Aug 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions