Flutter
GestureDetector nedir?
GestureDetector ile dokunma olaylarını yakalamayı öğrenirsin.
GestureDetector nedir?
GestureDetector, child widget'ına dokunma, çift dokunma, uzun basma gibi hareketleri dinleyen bir widget'tır. Kendi görsel bir efekti yoktur; sadece child parametresine verdiğin widget'ı sarmalar ve üzerindeki hareketleri yakalar. Hareket gerçekleştiğinde verdiğin callback fonksiyonu çağrılır.
GestureDetector(
onTap: () {
print('Dokunuldu');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)
child parametresi
GestureDetector, child parametresine verdiğin widget üzerindeki hareketleri dinler. child olmadan dinlenecek bir alan oluşmaz; bu yüzden child neredeyse her zaman verilir. Çocuk ne kadar büyükse dokunma alanı da o kadar geniş olur.
GestureDetector(
onTap: () => print('Tik'),
child: Text('Buraya dokun'),
)
Uygulama onTap callback'i yaz
dokunmaOlayi adında bir fonksiyon yaz. Çağrılınca Dokunuldu yazdırmalı. Ana main içinde bu fonksiyonu çağır ve GestureDetector'a onTap olarak bağla.
Örnek çözümü göster
import 'package:flutter/material.dart';
void dokunmaOlayi() {
print('Dokunuldu');
}
void main() {
dokunmaOlayi();
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: dokunmaOlayi,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}
Kendini test et
-
GestureDetector'ın kendisi görsel bir etki yapar mı?
- Evet, çocuk widget'ı gizler
- Evet, etrafına çerçeve çizer
- Hayır, yalnızca hareketleri dinler
- Evet, arka plan rengini değiştirir
Cevabı göster
Hayır, yalnızca hareketleri dinler — GestureDetector görünmezdir; görsel değişiklik yapmaz. Yalnızca child'ı sarmalar ve hareketleri dinler.
-
onTap parametresini ekle
GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
____: () => print('Merhaba'),
)
Cevabı göster
GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
onTap: () => print('Merhaba'),
)
-
GestureDetector parçaları
- GestureDetector
- Dokunma hareketlerini dinler
- onTap
- Tek dokunuş callback'i
- child
- Hareketin dinlendiği widget
- callback
- Olay gerçekleşince çağrılan fonksiyon
Sıradaki ders: onTap ve onDoubleTap
