multi-touch-canvas-with-flutter

Installation
SKILL.md

Multi-touch Canvas with Flutter

If you ever wanted to create a canvas in Flutter that needs to be panned in any direction and allow zoom then you also probably tried to create a MultiGestureRecognizer or under a GestureDetector added onPanUpdate and onScaleUpdate and received an error because both can not work at the same time. Even if you have to GestureDetectors then you will still find it does not work how you want and one will always win.

TLDR The final source here and an online demo.

This is the canvas rendering logic used in https://widget.studio

Multi Touch Goal 

  • Pan the canvas with two or more fingers
  • Zoom the canvas with two fingers only (Pinch/Zoom)
  • Single finger will interact with canvas object and detect selection
  • 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 for keyboard shortcuts.

Part 1 - Project Setup 

Related skills
Installs
36
GitHub Stars
39
First Seen
Feb 4, 2026