How to blur the camera output while paused in Flutter?

Question

In the code below, I want to blur the camera output as the GestureDetector is tapped and the camera output is paused. In the present scenario, the camera output pauses but doesn't blur.

There is a similar question here; which primarily deals in changes in AppLifecycleState while inactive, not while active which is the case here.

var pauseCamera = 0;
CameraController? controller; //From the camera package.
...
GestureDetector(
          onTap: () {
            pauseCamera++; 
            pauseCamera.isOdd
                ? controller!.pausePreview()
                : controller!.resumePreview();
          },
          child: pauseCamera.isOdd
              ? ClipRect(
                  child: ImageFiltered(
                    imageFilter: ImageFilter.blur(
                      sigmaX: 5.0,
                      sigmaY: 5.0,
                    ),
                    child: const CameraView(), //Displays the camera.
                  ),
                )
              : const CameraView(),
        ),

have you tried calling `setState((){})` in `onTap` call back — brook yonas, Sep 23 '22 at 07:04

ЯДPTГФИ · Accepted Answer · 2022-09-24T14:58:26.510

In the code I used in my question above, I defined pauseCamera inside the build function and therefore when setState was called, the application wasn't rebuilding. Below is an implementation for blurring camera output while paused:

var pauseCamera = 0; //Should be defined outside the build function.
CameraController? controller; //From the camera package.
...
Stack(
  children: [
    SizedBox(
      width: width,
      height: width * resolutionRatio,
      child: GestureDetector(
        onTap: () {
          setState(
            () {
              pauseCamera++;
            },
          );
          pauseCamera.isOdd
              ? controller!.pausePreview()
              : controller!.resumePreview();
        },
        child: const CameraView(), //Displays the camera.
      ),
    ),
    pauseCamera.isOdd
        ? SizedBox(
            width: width,
            height: width * resolutionRatio,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 20,
                  sigmaY: 20,
                ),
                child: const SizedBox.shrink(),
              ),
            ),
          )
        : const SizedBox.shrink()
  ],
),

How to blur the camera output while paused in Flutter?

1 Answers1