InkWell nedir?
- Flutter kursu
- Başlangıç
- Ders 56/99
- 4 dk
InkWell ile Material ripple efektli dokunma yapmayı öğrenirsin.
InkWell nedir?
InkWell, dokunma olaylarını yakalarken aynı zamanda Material tasarıma uygun dalgalanma (ripple) efekti gösteren bir widget'tır. GestureDetector gibi onTap ve onLongPress gibi callback'ler alır; ancak ek olarak dokunma noktasından yayılan bir animasyon çizer. Bu yüzden butonlar, kartlar ve liste öğeleri için uygundur.
Material(
child: InkWell(
onTap: () {
print('Tiklandi');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
)Material tasarımı ve ripple
InkWell'in çizdiği dalgalanma yalnızca bir Material widget'ı üzerinde görünür. Material, dalgalanmanın çizileceği yüzeyi sağlar; bu yüzden InkWell genellikle bir Material ile sarmalanır. Scaffold ve MaterialApp gibi widget'lar zaten Material sağladığından çoğu ekranda ayrıca Material eklemek gerekmez.
Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Uygulama InkWell ile dokunma yakala
tiklandi adında bir fonksiyon yaz; çağrılınca Tiklandi yazdırsın. main içinde tiklandi'yı çağır ve InkWell'a onTap olarak bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// tiklandi fonksiyonu yaz: "Tiklandi" yazdirsin
void main() {
// tiklandi'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(
child: InkWell(
// onTap parametresini ekle
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void tiklandi() {
print('Tiklandi');
}
void main() {
tiklandi();
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: tiklandi,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
),
);
}
}Beklenen çıktı
Tiklandi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 GestureDetector'a kıyasla InkWell'i ayırt eden özellik nedir?
- Yalnızca çift dokunuşları yakalar
- Hiçbir görsel efekt yapmaz
- Yalnızca yatay sürüklemeleri dinler
- Dokunmada Material dalgalanma (ripple) efekti gösterir Doğru cevap
Açıklama: InkWell, GestureDetector gibi hareket yakalar ama ek olarak Material dalgalanma efekti çizer.
2 InkWell widget'ını ekle
Material(
child: ____(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Açıklama: Dalgalanma efekti için Material içinde InkWell widget'ı kullanılır.
3 InkWell bileşenleri
| Kavram | Anlamı |
|---|---|
InkWell |
Dalgalanma gösteren dokunma widget'ı |
ripple |
Material tasarım dalgalanma efekti |
Material |
Dalgalanmanın çizileceği yüzey |
onTap |
Tek dokunuş callback'i |