Material ebeveyn
- Flutter kursu
- Başlangıç
- Ders 58/99
- 4 dk
InkWell'ın Material ebeveyne ihtiyaç duyduğunu öğrenirsin.
Material ebeveyn
InkWell'in çizdiği dalgalanma yalnızca bir Material widget'ı üzerinde görünür. Material, Ink'in çizileceği yüzeyi sağlar; bu yüzden InkWell genellikle bir Material ile sarmalanır. Material ebeveyni yoksa InkWell'in callback'leri çalışır ama dalgalanma görünmez.
Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Scaffold ve MaterialApp
Scaffold ve MaterialApp gibi widget'lar zaten bir Material sağlar; bu yüzden çoğu ekranda ayrıca Material eklemek gerekmez. Ancak saf bir widget ağacında, örneğin doğrudan Center içinde InkWell kullanıyorsan, Material ile sarmalaman gerekir. Material ebeveyni widget ağacında herhangi bir derinlikte olabilir.
Uygulama InkWell'i Material ile sar
tikla adında bir fonksiyon yaz; çağrılınca Material yazdırsın. main içinde tikla'yı çağır. InkWell'i bir Material ile sar ve onTap'i tikla'ya bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// tikla fonksiyonu yaz: "Material" yazdirsin
void main() {
// tikla'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// InkWell'i Material ile sar
child: InkWell(
// onTap parametresini ekle
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void tikla() {
print('Material');
}
void main() {
tikla();
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: tikla,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
),
),
);
}
}Beklenen çıktı
Material
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 InkWell, Material ebeveyni olmadan kullanılırsa ne olur?
- InkWell otomatik Material ekler
- Uygulama derleme hatası verir
- Uygulama çöker
- Callback'ler çalışır ama dalgalanma görünmez Doğru cevap
Açıklama: Material ebeveyni yoksa InkWell'in onTap gibi callback'leri çalışmaya devam eder, ancak dalgalanma efekti çizilemez.
2 Material widget'ını ekle
return ____(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);return Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);Açıklama: InkWell'in dalgalanması için onu Material widget'ı ile sarmalısın.
3 Material ve InkWell
| Kavram | Anlamı |
|---|---|
Material |
Ink için yüzey sağlar |
InkWell |
Material ebeveyne ihtiyaç duyar |
ancestor |
Widget ağacındaki üst widget |
ripple |
Material olmadan görünmez |