onTap ve onDoubleTap
- Flutter kursu
- Başlangıç
- Ders 52/99
- 4 dk
onTap ve onDoubleTap arasındaki farkı öğrenirsin.
onTap ve onDoubleTap
onTap, kullanıcı widget'a tek dokunduğunda çağrılır. onDoubleTap ise kısa süre içinde iki kez dokunulunca çağrılır. İkisini aynı GestureDetector'a verebilirsin; Flutter hangi hareketin gerçekleştiğini çözer ve uygun callback'i çağırır.
GestureDetector(
onTap: () => print('Tek'),
onDoubleTap: () => print('Cift'),
child: Container(width: 80, height: 80),
)Bekleme süresi
onTap ve onDoubleTap birlikte verildiyse, Flutter tek dokunuş mu yoksa çift dokunuş mu olduğunu anlamak için kısa bir süre bekler. Bu yüzden onTap, tek başına kullanıldığından biraz daha gecikmeli çağrılabilir. Yalnızca onTap verdiysen bu gecikme olmaz.
Uygulama onTap ve onDoubleTap bağla
tekDokunus adında bir fonksiyon yaz; çağrılınca Tek yazdırsın. ciftDokunus adında başka bir fonksiyon yaz; Cift yazdırsın. main içinde tekDokunus'u çağır ve GestureDetector'a hem onTap hem onDoubleTap bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// 1. tekDokunus fonksiyonunu yaz: "Tek" yazdirsin
// 2. ciftDokunus fonksiyonunu yaz: "Cift" yazdirsin
// 3. main icinde tekDokunus'u cagir
// 4. GestureDetector'a onTap ve onDoubleTap bagla
void main() {
// tekDokunus cagrisini ekle
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GestureDetector(
// onTap ve onDoubleTap parametrelerini ekle
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void tekDokunus() {
print('Tek');
}
void ciftDokunus() {
print('Cift');
}
void main() {
tekDokunus();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GestureDetector(
onTap: tekDokunus,
onDoubleTap: ciftDokunus,
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
),
),
);
}
}Beklenen çıktı
Tek
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir GestureDetector'da hem onTap hem onDoubleTap verirsen ne olur?
- Derleme hatası verir, ikisi aynı anda verilemez
- Yalnızca onTap çağrılır, onDoubleTap yok sayılır
- Flutter hangi hareketin gerçekleştiğini çözer ve uygun callback'i çağırır Doğru cevap
- Yalnızca onDoubleTap çağrılır, onTap yok sayılır
Açıklama: Flutter, dokunuşun tek mi çift mi olduğunu algılar ve yalnızca uygun callback'i çağırır. İkisi birlikte kullanılabilir.
2 onDoubleTap parametresini ekle
GestureDetector(
onTap: () => print('Tek'),
____: () => print('Cift'),
child: Text('X'),
)GestureDetector(
onTap: () => print('Tek'),
onDoubleTap: () => print('Cift'),
child: Text('X'),
)Açıklama: Çift dokunuş callback'i onDoubleTap parametresi ile verilir; başka isimle çalışmaz.
3 Dokunma callback'leri
| Kavram | Anlamı |
|---|---|
onTap |
Tek dokunuş |
onDoubleTap |
Çift dokunuş |
callback |
Olay gerçekleşince çağrılan fonksiyon |
child |
Hareketin dinlendiği widget |