If you ever wanted to create a canvas in Flutter that needs to be panned in any direction and would allow zoom, you probably tried to create a [MultiGestureRecognizer](https://api.flutter.dev/flutter/gestures/MultiDragGestureRecognizer-class.html) or added onPanUpdate and onScaleUpdate under a [GestureDetector](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) and received an error because both can not work at the same time. Even if you have two GestureDetectors, it will still not work as desired and one of them will always win.

Multi-touch goal

We want to create an app where:

• the user can pan the canvas with two or more fingers.
• the user can zoom the canvas with two fingers only (pinch/zoom).
• a single finger can interact with a canvas object (selection is detected).
• there’s also bonus trackpad support with similar results.

In order to achieve this we need to use a Listener for the trackpad events and raw touch interactions, and [RawKeyboardListener](https://api.flutter.dev/flutter/widgets/RawKeyboardListener-class.html) for keyboard shortcuts.

Part 1: project setup

Open your terminal and type in the following code:

mkdir flutter_multi_touch
cd flutter_multi_touch
flutter create .
code .

The last line is optional and only necessary if you have VSCode installed. This command will open the directory inside VSCode.

#flutter