onTap callback
- Flutter kursu
- Başlangıç
- Ders 59/99
- 4 dk
InkWell onTap ile tıklamayı işleyip geri bildirim vermeyi öğrenirsin.
onTap ve ScaffoldMessenger
InkWell'in onTap callback'i, dokunma gerçekleştiğinde istediğin kodu çalıştırır. Genellikle kullanıcıya geri bildirim vermek için ScaffoldMessenger.of(context).showSnackBar(...) çağrılır. SnackBar, ekranın altında kısa süreli bir mesaj gösterir ve context gerektirdiği için callback içinde kullanılır.
InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Text('Dokun'),
)ScaffoldMessenger ve context
ScaffoldMessenger, uygulama genelinde SnackBar gibi mesajları yönetir. ScaffoldMessenger.of(context) ifadesi, widget ağacındaki en yakın ScaffoldMessenger'a erişir; bu yüzden callback içinde context kullanılmalıdır. SnackBar widget'ı, içeride gösterilecek mesajı taşır.
Uygulama InkWell ile SnackBar göster
mesajGoster adında bir fonksiyon yaz; çağrılınca Mesaj gosterildi yazdırsın. main içinde mesajGoster'i çağır. InkWell'ın onTap'inde hem mesajGoster'i çağır hem de ScaffoldMessenger.of(context).showSnackBar ile bir SnackBar göster.
Başlangıç kodu
import 'package:flutter/material.dart';
// mesajGoster fonksiyonu yaz: "Mesaj gosterildi" yazdirsin
void main() {
// mesajGoster'i 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 ekle: mesajGoster cagir + SnackBar goster
child: Container(
width: 100,
height: 100,
color: Colors.purple,
),
),
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void mesajGoster() {
print('Mesaj gosterildi');
}
void main() {
mesajGoster();
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: () {
mesajGoster();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Container(
width: 100,
height: 100,
color: Colors.purple,
),
),
),
),
),
);
}
}Beklenen çıktı
Mesaj gosterildi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SnackBar'i ekranda göstermek için hangi ifade kullanılır?
- print(...)
- runApp(...)
- ScaffoldMessenger.of(context).showSnackBar(...) Doğru cevap
- Material(...)
Açıklama: ScaffoldMessenger.of(context) ile erişilen nesnenin showSnackBar metodu SnackBar'i ekranda gösterir.
2 ScaffoldMessenger'a eriş
InkWell(
onTap: () {
____.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Text('Dokun'),
)InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Text('Dokun'),
)Açıklama: SnackBar'ı göstermek için ScaffoldMessenger.of(context) ile messenger'a erişilir.
3 Geri bildirim parçaları
| Kavram | Anlamı |
|---|---|
onTap |
InkWell'ın dokunma callback'i |
ScaffoldMessenger |
SnackBar'a erişimi sağlar |
showSnackBar |
SnackBar'ı ekranda gösterir |
SnackBar |
Alt tarafta beliren mesaj |