Flutter : Zooming canvas in certain places

471 views Asked by At

I am trying to make something like a magnifying glass on a Custom Painter. So far I am able to use Backdropfilter with imagefilter matrix scaling like below:

BackdropFilter(
  filter: ImageFilter.matrix(matrix),
  child : CustomFocusCircle()
),

While it works with Stack and Positioned, I wonder if it is possible to create it on canvas. I tried something like this and it kind of worked.

canvas.drawAtlas(
              sourceImage,
              [
                /* Identity transform */
                RSTransform.fromComponents(
                  rotation: 0.0,
                  scale: 1,
                  anchorX: 0,
                  anchorY: 0,
                  translateX: 0,
                  translateY: 0,
                )
              ],
              [ 
                Rect.fromCircle(
                    center: Offset(size.width / 2, size.height / 2),
                    radius: 200),
                
              ],
              [],
              null,
              null,
              Paint());

But I am still not able to figure out how to make it a circular cutout instead of a rectangular one.

1

There are 1 answers

1
AudioBubble On

Have you try this package https://pub.dev/packages/magnifying_glass ? you can try this package I hope this may help you.