Is there a way to have a backdrop filter (blur) for the barrier instead of just a color?

[mark8044]

Is there a way to have a backdrop filter (blur) for the barrier instead of just a color?

Ideally with animation as well (so the blur can come in and out). This is currently possible with Sheets/ModalBottomSheet package as we are given a builder to work with and would be a wonderful addition here

[fujidaiti]

Hi @mark8044,

Currently, there is no convenient way to add a custom modal barrier. However, you can extend ModalSheetRoute and override buildModalBarrier() to customize the barrier creation logic:

class CustomModalSheetRoute extends ModalSheetRoute {
  CustomModalSheetRoute({
    super.settings,
    super.fullscreenDialog,
    required super.builder,
    super.maintainState,
    super.barrierDismissible,
    super.barrierLabel,
    super.barrierColor,
    super.swipeDismissible,
    super.transitionDuration,
    super.transitionCurve,
  });

  @override
  Widget buildModalBarrier() {
    void onDismiss() {
      if (animation!.isCompleted && !navigator!.userGestureInProgress) {
        navigator?.maybePop();
      }
    }

    return CustomModalBarrier(
      onDismiss: onDismiss,
      ...
    );
  }
}