[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-gestire-i-gesti-in-flutter-guida-completa-a-gesturedetector-e-oltre":3,"comments-article-gestire-i-gesti-in-flutter-guida-completa-a-gesturedetector-e-oltre":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},29,"Gestire i gesti in Flutter: guida completa a GestureDetector e oltre","gestire-i-gesti-in-flutter-guida-completa-a-gesturedetector-e-oltre","Scopri come intercettare tap, drag, scale e gesti personalizzati in Flutter usando GestureDetector, RawGestureDetector e i GestureRecognizer per creare interazioni fluide e naturali.","## Introduzione\n\nLe interazioni tattili sono il cuore di ogni applicazione mobile. In Flutter, la gestione dei gesti è potente e flessibile grazie a un sistema stratificato che va dal semplice `GestureDetector` fino ai `GestureRecognizer` personalizzati. In questo articolo vedremo come intercettare tap, drag, scale e come risolvere i conflitti tra gesti concorrenti.\n\n## GestureDetector: il punto di partenza\n\nIl widget `GestureDetector` è il modo più immediato per rendere interattivo qualsiasi widget. Non ha una rappresentazione grafica propria: si limita ad avvolgere un child e a notificare gli eventi.\n\n```dart\nGestureDetector(\n  onTap: () => print('Tap singolo'),\n  onDoubleTap: () => print('Doppio tap'),\n  onLongPress: () => print('Pressione prolungata'),\n  child: Container(\n    padding: const EdgeInsets.all(24),\n    color: Colors.blue,\n    child: const Text('Toccami'),\n  ),\n)\n```\n\n### Attenzione all'area di hit test\n\nUn errore comune è avvolgere un `Container` senza colore o dimensioni: le zone trasparenti non ricevono eventi di default. Per intercettare i tap anche su aree vuote si usa `behavior`:\n\n```dart\nGestureDetector(\n  behavior: HitTestBehavior.opaque, \u002F\u002F riceve tap su tutta l'area\n  onTap: () => print('Tap ovunque nell\\'area'),\n  child: const SizedBox(width: 200, height: 100),\n)\n```\n\nI valori possibili sono:\n\n- `deferToChild`: solo i child rispondono (default)\n- `opaque`: l'intera area risponde e blocca i widget sottostanti\n- `translucent`: l'area risponde ma lascia passare gli eventi sotto\n\n## Gestire il drag e lo spostamento\n\nPer trascinare un elemento possiamo usare i callback `onPanUpdate` che forniscono il delta dello spostamento.\n\n```dart\nclass DraggableBox extends StatefulWidget {\n  const DraggableBox({super.key});\n\n  @override\n  State\u003CDraggableBox> createState() => _DraggableBoxState();\n}\n\nclass _DraggableBoxState extends State\u003CDraggableBox> {\n  Offset _position = Offset.zero;\n\n  @override\n  Widget build(BuildContext context) {\n    return Stack(\n      children: [\n        Positioned(\n          left: _position.dx,\n          top: _position.dy,\n          child: GestureDetector(\n            onPanUpdate: (details) {\n              setState(() {\n                _position += details.delta;\n              });\n            },\n            child: Container(\n              width: 80,\n              height: 80,\n              color: Colors.deepPurple,\n            ),\n          ),\n        ),\n      ],\n    );\n  }\n}\n```\n\n## Gesti di scala e rotazione\n\nI callback `onScaleStart`, `onScaleUpdate` e `onScaleEnd` gestiscono pinch-to-zoom e rotazioni. Nota che scale e pan non possono coesistere nello stesso `GestureDetector`, perché lo scale include già lo spostamento.\n\n```dart\nGestureDetector(\n  onScaleUpdate: (details) {\n    setState(() {\n      _scale = (_baseScale * details.scale).clamp(0.5, 4.0);\n      _rotation = details.rotation;\n    });\n  },\n  child: Transform(\n    transform: Matrix4.identity()\n      ..scale(_scale)\n      ..rotateZ(_rotation),\n    alignment: Alignment.center,\n    child: Image.asset('assets\u002Ffoto.jpg'),\n  ),\n)\n```\n\n## L'arena dei gesti: risolvere i conflitti\n\nQuando più `GestureRecognizer` vogliono lo stesso puntatore, Flutter usa la **Gesture Arena**. Ogni recognizer \"compete\" e chi vince ottiene l'evento, gli altri vengono scartati. Questo spiega perché un tap all'interno di una `ListView` scrollabile funziona: il recognizer del tap vince se il dito non si muove, mentre lo scroll vince se c'è movimento.\n\n## RawGestureDetector e recognizer personalizzati\n\nQuando serve un controllo fine, si usa `RawGestureDetector` con una mappa di factory. È utile per personalizzare il comportamento di un recognizer, come consentire più tap simultanei:\n\n```dart\nRawGestureDetector(\n  gestures: {\n    TapGestureRecognizer: GestureRecognizerFactoryWithHandlers\u003CTapGestureRecognizer>(\n      () => TapGestureRecognizer(),\n      (recognizer) {\n        recognizer.onTap = () => print('Tap personalizzato');\n      },\n    ),\n  },\n  child: Container(color: Colors.orange, height: 100),\n)\n```\n\n## Listener: eventi puntatore a basso livello\n\nSe hai bisogno di intercettare gli eventi grezzi del puntatore senza il sistema dell'arena, usa il widget `Listener`:\n\n```dart\nListener(\n  onPointerDown: (event) => print('Giù: ${event.position}'),\n  onPointerMove: (event) => print('Muove: ${event.delta}'),\n  onPointerUp: (event) => print('Su'),\n  child: Container(color: Colors.green, height: 100),\n)\n```\n\n## Best practice\n\n- Preferisci widget dedicati come `InkWell` quando vuoi il feedback visivo Material (effetto ripple).\n- Evita di annidare troppi `GestureDetector`: complica la risoluzione dei conflitti.\n- Usa `behavior: HitTestBehavior.opaque` per zone tappabili con spazi vuoti.\n- Ricordati che `onPanUpdate` e `onScaleUpdate` non convivono nello stesso detector.\n\n## Conclusione\n\nIl sistema di gestione dei gesti di Flutter offre livelli di astrazione adatti a ogni esigenza: dal comodo `GestureDetector` per i casi comuni, fino a `RawGestureDetector` e `Listener` per scenari avanzati. Comprendere la Gesture Arena è la chiave per costruire interazioni robuste e prive di conflitti.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F26e0fa31-f481-4be5-9ae2-2fe1c99547db.jpg",null,"published","2026-07-03T04:00:38+00:00","Gestione gesti in Flutter: GestureDetector e oltre","Guida completa alla gestione dei gesti in Flutter: tap, drag, scale, Gesture Arena, RawGestureDetector e Listener con esempi pratici in Dart.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219603578]