Flutter
Kompozisyon
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.
Örnek çözümü göster
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');
}
Kendini test et
-
Kompozisyon neyi sağlar?
- İç içe widget'larla karmaşık arayüzler kurmak
- Veritabanına veri yazmak
- HTTP isteği atmak
- JSON dizesini çözmek
Cevabı göster
İç içe widget'larla karmaşık arayüzler kurmak — 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.
-
child parametresini ver
return Padding(
padding: const EdgeInsets.all(8),
____,
);
Cevabı göster
return Padding(
padding: const EdgeInsets.all(8),
child: child,
);
-
Kompozisyon parçaları
- 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ı
Sıradaki ders: Parametrelerle esneklik
