Flutter
Bileşen kütüphanesi
Yeniden kullanılabilir bileşen kütüphanesi yapmayı öğrenirsin.
Bileşen kütüphanesi nedir?
Bileşen kütüphanesi, yeniden kullanılabilir widget'lar topluluğudur. Buton, kart, input gibi sıklıkla kullanılan yapıları tek pakette toplar. Tasarım sisteminin uygulama tarafıdır ve tutarlı görünüm sağlar.
class PrimaryButton extends StatelessWidget {
final String label;
final VoidCallback onPressed;
const PrimaryButton({
super.key,
required this.label,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
}
}
Parametrelerle esneklik
Bileşenler parametrelerle esnek olur. Ancak tüm olasılıkları açmak yerine, en sık kullanılan varyasyonları parametre olarak açarsın. Varsayılan değerler vererek kullanımı basitleştirirsin.
class AppCard extends StatelessWidget {
final Widget child;
final EdgeInsets? padding;
final Color? color;
const AppCard({
super.key,
required this.child,
this.padding,
this.color,
});
@override
Widget build(BuildContext context) {
return Container(
padding: padding ?? const EdgeInsets.all(16),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
),
child: child,
);
}
}
Uygulama Özel buton bileşeni yaz
AppButton adında StatelessWidget yaz. label (String) ve onPressed (VoidCallback) parametreleri olsun, ikisi de zorunlu. build metodu ElevatedButton döndürsün ve child olarak Text(label) göstersin. main içinde bir AppButton oluştur ve label'ı yazdır.
Örnek çözümü göster
import 'package:flutter/material.dart';
class AppButton extends StatelessWidget {
final String label;
final VoidCallback onPressed;
const AppButton({
super.key,
required this.label,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
}
}
void main() {
final btn = AppButton(
label: 'Kaydet',
onPressed: () {},
);
print(btn.label);
}
Kendini test et
-
Bileşen kütüphanesinin temel faydası nedir?
- Uygulama boyutunu küçültmek
- Tutarlılık sağlamak ve kod tekrarını azaltmak
- Ağ isteklerini hızlandırmak
- Derleme süresini sıfırlamak
Cevabı göster
Tutarlılık sağlamak ve kod tekrarını azaltmak — Bileşen kütüphanesi, tekrarlanan UI yapılarını tek yerde toplar; böylece hem tutarlı görünüm hem de daha az kod tekrarı sağlanır.
-
Required parametre
class AppCard extends StatelessWidget {
final Widget child;
const AppCard({super.key, ____});
Cevabı göster
class AppCard extends StatelessWidget {
final Widget child;
const AppCard({super.key, required this.child});
-
Bileşen parçaları
- StatelessWidget
- Durumsuz bileşen tabanı
- required
- Zorunlu parametre işareti
- super.key
- Anahtarı ebeveyne aktarır
- VoidCallback
- Tıklama callback tipi
Sıradaki ders: Tema değiştirme
