BoxDecoration
- Flutter kursu
- Başlangıç
- Ders 29/99
- 4 dk
BoxDecoration ile kenarlık ve köşe yarıçapı eklemeyi öğrenirsin.
BoxDecoration
BoxDecoration, Container'ın decoration parametresine verilen ve görsel süslemeleri tanımlayan nesnedir. border kenarlık, borderRadius köşe yuvarlama, color arka plan rengi ekler. BoxDecoration kullanırken Container'ın doğrudan color parametresini kullanamazsın; renk decoration içine yazılır.
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 2),
),
child: Text('Süslü'),
)borderRadius ve border
borderRadius, köşelerin yarıçapını belirler; BorderRadius.circular tek değer, BorderRadius.only her köşe için ayrı değer alır. border, Border.all ile dört kenara aynı kenarlığı veya Border.symmetric ile yatay/dikey farklı kenarlıkları ekler. Renk ve kalınlık parametrelerle ayarlanır.
BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.grey,
width: 1.5,
),
)Uygulama BoxDecoration bilgisini yazdır
main içinde iki satırı print ile yazdır: decoration susle ve borderRadius kose.
Başlangıç kodu
void main() {
// iki satır yazdır:
// decoration susle
// borderRadius kose
}Örnek çözüm
void main() {
print('decoration susle');
print('borderRadius kose');
}Beklenen çıktı
decoration susle borderRadius kose
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 BoxDecoration nereye verilir?
- Text'in style parametresine
- Container'ın decoration parametresine Doğru cevap
- runApp fonksiyonuna
- main metoduna
Açıklama: BoxDecoration, Container'ın decoration parametresine verilir; border ve borderRadius burada tanımlanır.
2 Köşeleri yuvarla
decoration: BoxDecoration(
____: BorderRadius.circular(12),
color: Colors.blue,
),decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.blue,
),Açıklama: borderRadius parametresi BoxDecoration içinde köşe yarıçapını belirler.
3 BoxDecoration kavramları
| Kavram | Anlamı |
|---|---|
BoxDecoration |
Container süsleme nesnesi |
borderRadius |
Köşe yuvarlama |
border |
Kenarlık |
Border.all |
Dört kenara aynı kenarlık |