Flutter: GestureDetector verwenden und Touch-Ereignisse

GestureDetector ist ein leistungsfähiges Widget, mit dem wir jedem Widget Touch-Ereignisse wie Tippen, Doppeltippen, langes Drücken und Wischen hinzufügen können. Damit werden auch sonst nicht anklickbare Widgets interaktiv.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Mit GestureDetector machen Sie jedes Widget antippbar:

GestureDetector(
  onTap: () {
    print('Tapped!');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text('Tap me'),
  ),
)

Unterstützte Gestenarten

Tipp-Ereignisse

GestureDetector(
  onTap: () => print('Single tap'),
  onDoubleTap: () => print('Double tap'),
  onLongPress: () => print('Long press'),
  onTapDown: (details) => print('Finger touched'),
  onTapUp: (details) => print('Finger lifted'),
  onTapCancel: () => print('Tap cancelled'),
  child: MyWidget(),
)

Zieh-Ereignisse

GestureDetector(
  // Horizontal drag
  onHorizontalDragStart: (details) => print('Horizontal drag started'),
  onHorizontalDragUpdate: (details) => print('Delta: ${details.delta.dx}'),
  onHorizontalDragEnd: (details) => print('Velocity: ${details.primaryVelocity}'),
  
  // Vertical drag
  onVerticalDragStart: (details) => print('Vertical drag started'),
  onVerticalDragUpdate: (details) => print('Delta: ${details.delta.dy}'),
  onVerticalDragEnd: (details) => print('Velocity: ${details.primaryVelocity}'),
  
  // Pan (any direction)
  onPanStart: (details) => print('Pan started'),
  onPanUpdate: (details) => print('Position: ${details.localPosition}'),
  onPanEnd: (details) => print('Pan ended'),
  
  child: MyWidget(),
)

Skalieren (Pinch)

GestureDetector(
  onScaleStart: (details) => print('Scale started'),
  onScaleUpdate: (details) {
    print('Scale: ${details.scale}');
    print('Rotation: ${details.rotation}');
  },
  onScaleEnd: (details) => print('Scale ended'),
  child: MyWidget(),
)

Alternative InkWell

Wenn Sie den Ripple-Effekt des Material Design möchten, können Sie InkWell verwenden:

InkWell(
  onTap: () => print('Tapped'),
  onLongPress: () => print('Long pressed'),
  splashColor: Colors.orange.withOpacity(0.3),
  highlightColor: Colors.orange.withOpacity(0.1),
  borderRadius: BorderRadius.circular(8),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Button with Ripple Effect'),
  ),
)

HitTestBehavior

Steuert, wie Touch-Ereignisse erkannt werden:

GestureDetector(
  behavior: HitTestBehavior.opaque, // Detect on empty areas too
  // behavior: HitTestBehavior.translucent, // Pass to widgets below
  // behavior: HitTestBehavior.deferToChild, // Only detect on child (default)
  onTap: () => print('Tapped'),
  child: Container(
    width: 200,
    height: 200,
    // no color, transparent
    child: Center(child: Text('Tap')),
  ),
)

Zusammenfassung

Ereignis	Beschreibung
onTap	Einfaches Tippen
onDoubleTap	Doppeltippen
onLongPress	Langes Drücken
onHorizontalDrag*	Horizontales Ziehen
onVerticalDrag*	Vertikales Ziehen
onPan*	Ziehen in beliebige Richtung
onScale*	Zoomen und Drehen per Pinch

GestureDetector ist der grundlegendste Weg, Nutzerinteraktionen in Flutter zu erfassen.