Flutter
InkWell nedir?
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.
Örnek çözümü göster
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,
),
),
),
),
),
);
}
}
Kendini test et
-
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
Cevabı göster
Dokunmada Material dalgalanma (ripple) efekti gösterir — InkWell, GestureDetector gibi hareket yakalar ama ek olarak Material dalgalanma efekti çizer.
-
InkWell widget'ını ekle
Material(
child: ____(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)
Cevabı göster
Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)
-
InkWell bileşenleri
- InkWell
- Dalgalanma gösteren dokunma widget'ı
- ripple
- Material tasarım dalgalanma efekti
- Material
- Dalgalanmanın çizileceği yüzey
- onTap
- Tek dokunuş callback'i
Sıradaki ders: InkWell vs GestureDetector
