Özet - Özel widget
- Flutter kursu
- Orta seviye
- Ders 75/99
- 4 dk
Özel widget ve kompozisyonu birleştirerek kart kütüphanesi yaparsın.
Kart kütüphanesi
Özel widget, kompozisyon ve tekrar kullanılabilirliği birleştirerek bir kart kütüphanesi kurarsın. Kart adlı widget, baslik ve altlik parametreleri alır; Padding ve Column ile bunları birleştirir. Aynı Kart sınıfı birçok ekranda kullanılır.
class Kart extends StatelessWidget {
final String baslik;
final Widget altlik;
const Kart({super.key, required this.baslik, required this.altlik});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);
}
}Uygulama Kart kütüphanesi kur
Kart adında StatelessWidget tanımla: final String baslik ve final Widget altlik alanları required olsun. build metodu Padding döndürsün; padding EdgeInsets.all(8), child bir Column olsun ve children listesinde Text(baslik) ile altlik bulunsun. Sonra AnaEkran tanımla; build metodu Kart(baslik: 'Başlık', altlik: Text('İçerik')) döndürsün. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/widgets.dart';
// Kart StatelessWidget tanımla
// final String baslik (required)
// final Widget altlik (required)
// build Padding döndürsün
// padding EdgeInsets.all(8), child Column
// children [Text(baslik), altlik]
// AnaEkran tanımla
// AnaEkran build metodu Kart widget'ını kullansın
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/widgets.dart';
class Kart extends StatelessWidget {
final String baslik;
final Widget altlik;
const Kart({super.key, required this.baslik, required this.altlik});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);
}
}
class AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) {
return Kart(
baslik: 'Başlık',
altlik: const Text('İçerik'),
);
}
}
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 Kart kütüphanesi hangi kavramları birleştirir?
- Provider + ChangeNotifier + setState
- sqflite + http + jsonDecode
- Özel widget + kompozisyon + tekrar kullanılabilirlik Doğru cevap
- GoRouter + GoRoute + context.go
Açıklama: Kart kütüphanesi özel widget (Kart sınıfı), kompozisyon (Padding + Column) ve tekrar kullanılabilirliği (aynı Kart'ın birçok yerde kullanımı) birleştirir. Diğer seçenekler veri/ağ, navigasyon ve state yönetimi ile ilgilidir.
2 Kart içinde Column children
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
____: [Text(baslik), altlik],
),
);return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);Açıklama: Column birden fazla widget aldığı için children parametresi kullanılır. child tek widget ister, items ve widgets Column'un parametre adları değildir.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
özel widget |
StatelessWidget alt sınıfı |
kompozisyon |
widget'ları iç içe geçirme |
tekrar kullanılabilirlik |
aynı widget'ı çok yerde kullanma |
Kart kütüphanesi |
birleşik sonuç |