InkWell vs GestureDetector
- Flutter kursu
- Başlangıç
- Ders 57/99
- 4 dk
InkWell ve GestureDetector arasındaki farkı öğrenirsin.
InkWell ve GestureDetector farkı
Hem InkWell hem GestureDetector onTap ve onLongPress gibi callback'leri alır. Temel fark görsel geri bildirimdedir: InkWell dokunmada dalgalanma çizerken GestureDetector görünmezdir ve yalnızca hareketi raporlar. Görsel efekt istemeyen sürükleme takibi gibi durumlarda GestureDetector tercih edilir.
// Ripple istiyorsan
Material(child: InkWell(onTap: () {}, child: Text('A')))
// Sadece hareket yakalamak istiyorsan
GestureDetector(onTap: () {}, child: Text('B'))Hangi widget'ı kullanmalısın?
Bir buton, kart veya liste öğesi için görsel geri bildirim istiyorsan InkWell kullan. Sürükleme takibi gibi sadece hareketi yakalamak istediğin ve dalgalanma gerekmeyen durumlarda GestureDetector daha uygundur. İkisi de onTap callback'ini destekler, ama yalnızca InkWell görsel bir efekt çizer.
Uygulama InkWell ile buton yap
butonTiklandi adında bir fonksiyon yaz; çağrılınca Buton yazdırsın. main içinde butonTiklandi'yı çağır. Material içine bir InkWell ekle ve onTap'i butonTiklandi'ya bağla. GestureDetector kullanma.
Başlangıç kodu
import 'package:flutter/material.dart';
// butonTiklandi fonksiyonu yaz: "Buton" yazdirsin
void main() {
// butonTiklandi'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Material(
// InkWell ekle ve onTap bagla
child: Container(
width: 80,
height: 40,
color: Colors.green,
),
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void butonTiklandi() {
print('Buton');
}
void main() {
butonTiklandi();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Material(
child: InkWell(
onTap: butonTiklandi,
child: Container(
width: 80,
height: 40,
color: Colors.green,
),
),
),
),
),
);
}
}Beklenen çıktı
Buton
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 InkWell ve GestureDetector arasındaki temel fark nedir?
- GestureDetector child parametresi almaz
- InkWell Material'e ihtiyaç duymaz
- InkWell dalgalanma efekti gösterir, GestureDetector göstermez Doğru cevap
- InkWell yalnızca çift dokunuş yakalar
Açıklama: İkisi de benzer callback'leri alır; fark, InkWell'in dalgalanma çizmesi, GestureDetector'ın ise görsel efekt yapmamasıdır.
2 child parametresini ekle
InkWell(
onTap: () => print('Tik'),
____: Text('Dokun'),
)InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
)Açıklama: InkWell, dokunma alanını belirlemek için child parametresine bir widget alır.
3 InkWell ve GestureDetector
| Kavram | Anlamı |
|---|---|
InkWell |
Dalgalanma efekti gösterir |
GestureDetector |
Görsel efekt yapmaz |
onTap |
İkisinde de tek dokunuş callback'idir |
ripple |
Yalnızca InkWell'da bulunur |