How do you create a pan and zoom gesture using two fingers in Flutter?-CodePudding

I'm making a drawing application as a feature of a bigger app. One of its implementation is to use a two-finger gesture system for panning and zooming on the canvas. I can't use single-finger gestures because they are mainly used for drawing. I've heard of MultiDragGestureRecognizer but I'm struggling with its implementation.

CodePudding user response：

You can use InteractiveViewer widget to create two-finger gesture system for panning and zooming on the canvas. It's super simple, just wrap your widget with InteractiveViewer. Here is a code example:

                 InteractiveViewer(
                    child: CachedNetworkImage(
                      imageUrl: imgUrl,
                      imageBuilder: (context, imageProvider) => Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          image: DecorationImage(
                              image: imageProvider, fit: BoxFit.contain),
                        ),
                      ),
                      fit: BoxFit.cover,
                      placeholder: (context, url) => Container(
                          height: ProjectResource.screenHeight * .3,
                          child: Center(child: CircularProgressIndicator())),
                      errorWidget: (context, url, error) => Container(
                          height: ProjectResource.screenHeight * .3,
                          child: Center(child: Icon(Icons.error))),
                    ),
                  ),

CodePudding user response：

For those who are struggling with the same problem: I found a nice implementation that would solve the problem: https://blog.codemagic.io/multi-touch-canvas-with-flutter/