How do you properly detect and respond to multi touch gestures in Flutter, such as pinch to zoom or a two finger rotation gesture, using the ScaleGestureRecognizer or the InteractiveViewer widget?

Intermediate

Answer

Detecting genuine multi touch gestures involving two or more simultaneous fingers, such as the familiar pinch to zoom or a two finger rotation gesture, is typically handled either directly through GestureDetector's own dedicated onScaleUpdate callback, which conveniently provides both the current combined scale factor and rotation angle together in a single callback, or considerably more simply through the InteractiveViewer widget, which already comes fully pre built specifically to properly handle panning, zooming, and rotation gestures on any given child widget without requiring you to write any of that fairly complex underlying gesture handling logic entirely by hand yourself.

InteractiveViewer(
  minScale: 0.5,
  maxScale: 4.0,
  child: Image.network(imageUrl),
)

Real-world example A photo viewing app wraps its displayed full screen images with InteractiveViewer, immediately and effortlessly providing a familiar, genuinely smooth pinch to zoom and pan interaction without needing to write any custom multi touch gesture handling logic entirely by hand themselves.

Common follow-ups: What is the difference between using InteractiveViewer and manually implementing your own scale gesture handling from scratch?;How do you properly constrain the minimum and maximum allowed zoom levels within InteractiveViewer?

Custom Painters & CustomPaint;Custom Widgets & Reusable Components

All 7 Flutter Gestures & Touch Handling questions