Flutter: GestureDetector Kullanımı ve Dokunma Olayları

GestureDetector, herhangi bir widget'a tıklama, çift tıklama, uzun basma, kaydırma gibi dokunma olayları eklememizi sağlayan güçlü bir widget'tır. Normalde tıklanabilir olmayan widget'ları interaktif hale getirir.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

GestureDetector ile herhangi bir widget'ı tıklanabilir yapabilirsiniz:

GestureDetector(
  onTap: () {
    print('Tıklandı!');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text('Tıkla bana'),
  ),
)

Desteklenen Gesture Türleri

Tıklama Olayları

GestureDetector(
  onTap: () => print('Tek tıklama'),
  onDoubleTap: () => print('Çift tıklama'),
  onLongPress: () => print('Uzun basma'),
  onTapDown: (details) => print('Parmak değdi'),
  onTapUp: (details) => print('Parmak kalktı'),
  onTapCancel: () => print('Tıklama iptal'),
  child: MyWidget(),
)

Kaydırma (Drag) Olayları

GestureDetector(
  // Yatay kaydırma
  onHorizontalDragStart: (details) => print('Yatay kaydırma başladı'),
  onHorizontalDragUpdate: (details) => print('Delta: ${details.delta.dx}'),
  onHorizontalDragEnd: (details) => print('Hız: ${details.primaryVelocity}'),
  
  // Dikey kaydırma
  onVerticalDragStart: (details) => print('Dikey kaydırma başladı'),
  onVerticalDragUpdate: (details) => print('Delta: ${details.delta.dy}'),
  onVerticalDragEnd: (details) => print('Hız: ${details.primaryVelocity}'),
  
  // Her yöne kaydırma
  onPanStart: (details) => print('Pan başladı'),
  onPanUpdate: (details) => print('Pozisyon: ${details.localPosition}'),
  onPanEnd: (details) => print('Pan bitti'),
  
  child: MyWidget(),
)

Ölçekleme (Scale/Pinch) Olayları

GestureDetector(
  onScaleStart: (details) => print('Ölçekleme başladı'),
  onScaleUpdate: (details) {
    print('Ölçek: ${details.scale}');
    print('Rotasyon: ${details.rotation}');
  },
  onScaleEnd: (details) => print('Ölçekleme bitti'),
  child: MyWidget(),
)

InkWell Alternatifi

Material Design ripple efekti istiyorsanız InkWell kullanabilirsiniz:

InkWell(
  onTap: () => print('Tıklandı'),
  onLongPress: () => print('Uzun basıldı'),
  splashColor: Colors.orange.withOpacity(0.3),
  highlightColor: Colors.orange.withOpacity(0.1),
  borderRadius: BorderRadius.circular(8),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Ripple Efektli Buton'),
  ),
)

HitTestBehavior

Dokunma olaylarının nasıl algılanacağını kontrol eder:

GestureDetector(
  behavior: HitTestBehavior.opaque, // Boş alanlarda da algıla
  // behavior: HitTestBehavior.translucent, // Altındaki widget'lara da ilet
  // behavior: HitTestBehavior.deferToChild, // Sadece child üzerinde algıla (varsayılan)
  onTap: () => print('Tıklandı'),
  child: Container(
    width: 200,
    height: 200,
    // color yok, şeffaf
    child: Center(child: Text('Tıkla')),
  ),
)

Özet

Olay	Açıklama
onTap	Tek tıklama
onDoubleTap	Çift tıklama
onLongPress	Uzun basma
onHorizontalDrag*	Yatay kaydırma
onVerticalDrag*	Dikey kaydırma
onPan*	Her yöne kaydırma
onScale*	Pinch zoom/rotate

GestureDetector, Flutter'da kullanıcı etkileşimlerini yakalamanın en temel yoludur.