Kompozisyon
- Flutter kursu
- Orta seviye
- Ders 72/99
- 4 dk
Widget'ları iç içe geçirerek kompoze etmeyi öğrenirsin.
Kompozisyon nedir?
Kompozisyon, widget'ları iç içe geçirerek daha karmaşık arayüzler oluşturmaktır. Bir widget'ın child parametresi başka bir widget alır; böylece widget ağacı dallanır. Bu, Flutter'ın arayüz kurma felsefesinin temelidir.
class Cerceve extends StatelessWidget {
final Widget child;
const Cerceve({super.key, required this.child});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: child,
);
}
}Bu widget, kendisine verilen child'ı bir Padding ile sarar.
child parametresi
Birçok Flutter widget'ı child parametresi alır; bu parametre tek bir widget kabul eder. Column ve Row gibi bazı widget'lar ise children adında bir liste alır. child'ı kendi özel widget'ına parametre olarak eklemek, onu esnek bir sarmalayıcı yapar.
class Cerceve extends StatelessWidget {
final Widget child;
const Cerceve({super.key, required this.child});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(12),
child: child,
);
}
}Uygulama Cerceve widget'ı yaz
Cerceve adında bir StatelessWidget tanımla. final Widget child alanı olsun ve required ile kurucuya eklensin. build metodu Padding döndürsün; padding EdgeInsets.all(8) ve child parametresi de gelen child olsun. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/widgets.dart';
// Cerceve StatelessWidget tanımla
// final Widget child alanı olsun, required ile kurucuya ekle
// build metodu Padding döndürsün
// padding EdgeInsets.all(8), child gelen child olsun
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/widgets.dart';
class Cerceve extends StatelessWidget {
final Widget child;
const Cerceve({super.key, required this.child});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: child,
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kompozisyon neyi sağlar?
- İç içe widget'larla karmaşık arayüzler kurmak Doğru cevap
- Veritabanına veri yazmak
- HTTP isteği atmak
- JSON dizesini çözmek
Açıklama: Kompozisyon widget'ları iç içe geçirerek arayüz kurmayı sağlar. Veritabanı, HTTP ve JSON çözme kompozisyonla ilgili değildir; bunlar farklı katmanların işidir.
2 child parametresini ver
return Padding(
padding: const EdgeInsets.all(8),
____,
);return Padding(
padding: const EdgeInsets.all(8),
child: child,
);Açıklama: Padding bir child parametresi alır; children bir liste ister, widget ve body Padding'in parametre adları değildir.
3 Kompozisyon parçaları
| Kavram | Anlamı |
|---|---|
child |
tek widget alır |
children |
widget listesi alır |
Padding |
iç boşluk bırakan sarmalayıcı |
iç içe geçme |
widget ağacı dallanması |