Flutter BoxDecoration Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda BoxDecoration kullanımını anlatacağım. Hadi başlayalım !
Table of Contents
lutter, Google tarafından geliştirilen ve hızlı bir şekilde popüler hale gelen bir mobil uygulama geliştirme çerçevesidir. Flutter, birçok özellikli widgetler içerir ve bu widgetlerden biri de BoxDecoration’dır. BoxDecoration, Flutter’da kutu şekillerini, renkleri, gölgeleri ve daha fazlasını oluşturmak için kullanılan bir widgettir.
Bu makalede, BoxDecoration widgetinin özelliklerini ve kullanımını açıklayacağız ve birkaç örnek kodla birlikte kullanımını göstereceğiz.
BoxDecoration Özellikleri
BoxDecoration, aşağıdaki özelliklere sahiptir:
- color: BoxDecoration’ın rengi.
- gradient: BoxDecoration’ın gradient rengi.
- border: BoxDecoration’ın kenarlığı.
- borderRadius: BoxDecoration’ın kenar yarıçapı.
- boxShadow: BoxDecoration’ın gölgesi.
- shape: BoxDecoration’ın şekli.
BoxDecoration Kullanımı
BoxDecoration widgeti, bir Container içinde kullanılır. Container widgeti, bir kutu oluşturmak için kullanılır ve BoxDecoration, Container’ın özelliklerini şekillendirmek için kullanılır. Aşağıda bir örnek kodda, BoxDecoration kullanımı gösterilmiştir:
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text(
'Merhaba, Dünya!',
style: TextStyle(color: Colors.white),
),
),
Yukarıdaki kod, mavi bir kutu oluşturur. BoxDecoration kullanarak, kutunun kenar yarıçapını 10’a ayarladık ve gölge efekti ekledik. Kutunun içindeki metnin rengini beyaz olarak ayarladık.
BoxDecoration Örnekleri
Aşağıda, BoxDecoration kullanarak oluşturulmuş birkaç örnek kod verilmiştir:
Örnek 1: Daire Şekilli Kutu
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
Yukarıdaki kod, kırmızı bir daire oluşturur.
Örnek 2: Dikey Gradient Kutu
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
Yukarıdaki kod, üstten aşağıya doğru mavi ve yeşil bir dikey gradyan oluşturur.
Örnek 3: Kenarlıklı Kutu
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(10),
),
child: Text('Merhaba, Dünya!'),
),
Yukarıdaki kod, beyaz bir kutu oluşturur ve kenarlığını kırmızı bir çizgi olarak ayarlar. Kutunun kenar yarıçapını 10’a ayarladık.
Örnek 4: Gölge Efektli Kutu
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text('Merhaba, Dünya!'),
),
Yukarıdaki kod, beyaz bir kutu oluşturur ve gölge efektini ekler.
Örnek 5: Kenarlıklı ve Gölgeli Kutu
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text('Merhaba, Dünya!'),
),
Yukarıdaki kod, kenarlıklı ve gölgeli bir kutu oluşturur.
Sonuç
BoxDecoration, Flutter’da kutu şekillerini, renkleri, gölgeleri ve daha fazlasını oluşturmak için kullanılan bir widgettir. Bu makalede, BoxDecoration widgetinin özelliklerini ve kullanımını açıkladık ve birkaç örnek kodla birlikte kullanımını gösterdik. Bu özellikler sayesinde, Flutter uygulamalarında çok çeşitli tasarımlar oluşturmak mümkündür.
Evet BoxDecoration ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.