Flutter : IgnorePointer with InteractiveViewer

As I develop a image editing tool for profile image, I faced a problem with overlapped widgets.

To edit the image, the user should be able to zoom out or in, and drag the image around. This can be done by using InteractiveViewer, but then the widget covering InteractiveViewer, which blurs out other part of the image that's not used for profile, prevents interacting with it.

Stack(
          fit: StackFit.expand,
          children: [
            InteractiveViewer(
              constrained: false,
              child: Image.file(
                File(context.watch<SelectedImage>().file.path),
                colorBlendMode: BlendMode.dstOut,
              ),
            ),
            CustomPaint(
                painter: CameraPainter(),
            ),
          ],
        )

The top most widget, in this case, the CustomPaint widget consumes user interaction making the InteractiveViewer useless.
Problem here is simple. User interaction just need to reach the InteractiveViewer below.

Stack(
          fit: StackFit.expand,
          children: [
            InteractiveViewer(
              constrained: false,
              child: Image.file(
                File(context.watch<SelectedImage>().file.path),
                colorBlendMode: BlendMode.dstOut,
              ),
            ),
            IgnorePointer(
              child: CustomPaint(
                painter: CameraPainter(),
              ),
            )
          ],
        )

Just wrapping the blocking widget with IgnorePointer solves the problem. IgnorePointer doesn't simply remove the user input, but it literally ignores it without consuming it. Therefore, the widget stacked below can use the user input passing through the IgnorePointer widget.