GestureDetector nedir?
- Flutter kursu
- Başlangıç
- Ders 51/99
- 4 dk
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.
Başlangıç kodu
import 'package:flutter/material.dart';
// dokunmaOlayi adinda bir fonksiyon yaz.
// Cagrilinca "Dokunuldu" metnini yazdirmali.
void main() {
// dokunmaOlayi fonksiyonunu cagir
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 parametresini dokunmaOlayi fonksiyonuna bagla
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}Örnek çözüm
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,
),
),
),
),
);
}
}Beklenen çıktı
Dokunuldu
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
- Evet, arka plan rengini değiştirir
Açıklama: GestureDetector görünmezdir; görsel değişiklik yapmaz. Yalnızca child'ı sarmalar ve hareketleri dinler.
2 onTap parametresini ekle
GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
____: () => print('Merhaba'),
)GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
onTap: () => print('Merhaba'),
)Açıklama: GestureDetector'da tek dokunuş callback'i onTap parametresi ile verilir.
3 GestureDetector parçaları
| Kavram | Anlamı |
|---|---|
GestureDetector |
Dokunma hareketlerini dinler |
onTap |
Tek dokunuş callback'i |
child |
Hareketin dinlendiği widget |
callback |
Olay gerçekleşince çağrılan fonksiyon |