Close bottom sheet on tap outside

Question

I have screen, where I open bottom modal sheet. I call following function:

Scaffold.of(context).showBottomSheet();

I need to use this method, I cannot use any other method for showing modal sheet. What I want to achieve is, that when I click outside the sheet, the sheet is closed. Currently, if I have i.e. Button on the screen behind the sheet, I can click the button. How can I achieve this? I tried to find some setting like isDismissible in the showBottomSheet function, however I did not find anything like it. I also tried to wrap content of the modal sheet with GestureDetector, but that did not work either. Thank you very much for your help.

EDIT: If it is not possible, please advise how to achieve "locking" the layout behind the modal, so it is not clickable at all.

Answer 1

Wrap your bottom sheet content in a TapRegion, then pop the context in TapRegion.onTapOutside:

Scaffold.of(context).showBottomSheet(
  (context) => TapRegion(
    onTapOutside: (_) => Navigator.of(context).pop(),
    child: Container(), // Your content
  ),
);

If you need to propagate tap events through to a button behind the bottom sheet, check out TapRegion.consumeOutsideTaps