How to detect tap on the scrim of the modal bottom sheet?

Question

I am using a modal sheet, when I tap somewhere outside the modal bottom sheet (In the transparent area), it closes the bottom sheet, so I need a callback of this tap gesture so that I can perform certain actions before closing the bottom sheet.

There is property isDismissible in the showModalBottomSheet, which disables the tap on the scrim, but I don't want it to disable it, just need a callback so that certain actions can be performed before closing.

score 0 · Answer 1 · answered Jul 12 '22 at 16:31

Not sure if this is exactly what you're looking for but you could return a StatefulWidget in the showModalBottomSheet builder and in that widget trigger a callback with the deactivate or dispose overrides. Deactivate is triggered first.

To trigger a callback you'd need to pass that function into the StatefulWidget's constructor.

e.g.

void callback() {
  debugPrint('>>> my callback triggered');
}

void showMyModalBottomSheet() {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return MyBottomSheetWidget(
        callback: callback,
      );
    },
  );
}

class MyBottomSheetWidget extends StatefulWidget {
  final VoidCallback callback;

  const MyBottomSheetWidget({
    Key key,
    this.callback,
  }) : super(key: key);

  @override
  State<MyBottomSheetWidget> createState() => _MyBottomSheetWidgetState();
}

class _MyBottomSheetWidgetState extends State<MyBottomSheetWidget> {
  @override
  void deactivate() {
    debugPrint('>>> bottom sheet closing');
    widget.callback(); // This will be trigger when the bottom sheet finishes closing
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

How to detect tap on the scrim of the modal bottom sheet?

1 Answers1