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 !

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.