Özet - InkWell
- Flutter kursu
- Başlangıç
- Ders 60/99
- 4 dk
InkWell, Material ve callback'i birleştirerek dalgalanan buton yaparsın.
Üç parçayı birleştir
Dalgalanmalı bir buton yapmak için üç parçayı birleştirirsin: yüzey sağlayan Material, dalgalanmayı çizen InkWell ve dokunmayı işleyen onTap callback'i. InkWell Material ile sarılır, onTap callback'i de dokunmada yapılacak işi belirler. Görsel geri bildirim için SnackBar da eklenebilir.
Material(
child: InkWell(
onTap: () => print('Tik'),
child: Container(width: 100, height: 50),
),
)Uygulama Dalgalanmalı buton yap
tiklandi adında bir fonksiyon yaz; çağrılınca InkWell yazdırsın. main içinde tiklandi'yı çağır. Material ile sarılmış bir InkWell'a onTap olarak tiklandi'yı bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// tiklandi fonksiyonu yaz: "InkWell" 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(
// Material ve InkWell ekle, onTap bagla
child: Container(
width: 120,
height: 60,
color: Colors.orange,
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void tiklandi() {
print('InkWell');
}
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: 120,
height: 60,
color: Colors.orange,
),
),
),
),
),
);
}
}Beklenen çıktı
InkWell
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Dalgalanmalı bir buton için hangi widget'lar bir arada kullanılır?
- Text + Padding + Center
- InkWell + Material + onTap Doğru cevap
- Column + Row + SizedBox
- ListView + ListTile + Separator
Açıklama: Dalgalanmalı buton için Material yüzey, InkWell dalgalanma ve onTap callback birlikte kullanılır.
2 showSnackBar metodunu ekle
ScaffoldMessenger.of(context).
____(
SnackBar(content: Text('Merhaba')),
);ScaffoldMessenger.of(context).
showSnackBar(
SnackBar(content: Text('Merhaba')),
);Açıklama: SnackBar'ı ekranda göstermek için ScaffoldMessenger üzerinde showSnackBar metodu çağrılır.
3 InkWell özeti
| Kavram | Anlamı |
|---|---|
InkWell |
Dalgalanma veren dokunma widget'ı |
Material |
Ink için yüzey sağlar |
onTap |
Tek dokunuş callback'i |
ScaffoldMessenger |
SnackBar'a erişimi sağlar |