Flutter Border Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Border widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, popüler bir mobil uygulama geliştirme çerçevesidir ve uygulamaların kullanıcı arayüzünü oluşturmak için bir dizi hazır widget sunar. Bu widgetlerden biri de Border widgetidir. Border widgeti, bir widget’in etrafına sınır eklemek için kullanılır. Bu makalede, Flutter’da Border widgetinin kullanımı ve özellikleri ile ilgili ayrıntılı bilgi vereceğim ve her özelliğin bir örneğini göstereceğim.

Border Widgetinin Özellikleri

Border widgeti, BoxDecoration sınıfının bir özelliğidir. Bu nedenle, Border widgeti dekorasyon özellikleri ile birlikte kullanılır. Bir Border widgeti, aşağıdaki özelliklere sahiptir:

• color: Sınırın rengini belirtir.
• width: Sınırın genişliğini belirtir.
• style: Sınırın stili (noktalı, kesikli vb.) belirtilir.
• radius: Sınırın köşelerinin yuvarlatılması için kullanılır.

Border Widgetinin Kullanımı

Border widgeti, Container widgetinin veya diğer widgetlerin dekorasyon özellikleri içinde kullanılabilir. Aşağıdaki örneklerde Container widgeti kullanılarak Border widgeti oluşturulmuştur.

Örnek 1: Border Oluşturma

Bu örnekte, bir Container widgetinin etrafına basit bir border ekleyeceğiz.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
)

Yukarıdaki örnekte, Container widgeti 200×200 boyutunda oluşturulur. decoration özelliği kullanılarak bir Border widgeti oluşturulur. Border.all() metodu kullanılarak, sınırın stil, genişlik ve rengi belirtilir.

Örnek 2: Kesikli Border

Bu örnekte, bir Container widgetinin etrafına kesikli bir border ekleyeceğiz.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.blue,
        width: 2,
        style: BorderStyle.dotted,
      ),
      bottom: BorderSide(
        color: Colors.blue,
        width: 2,
        style: BorderStyle.dotted,
      ),
      left: BorderSide(
        color: Colors.blue,
        width: 2,
        style: BorderStyle.dotted,
      ),
      right: BorderSide(
        color: Colors.blue,
        width: 2,
        style: BorderStyle.dotted,
      ),
    ),
  ),
)

Yukarıdaki örnekte, Border widgeti, top, bottom, left ve right özellikleri kullanılarak noktalı bir sınır oluşturulur. Her bir özellik, BorderSide sınıfından oluşturulan bir nesne içerir. Bu nesne, stil, genişlik ve renk gibi özellikleri belirler.

Örnek 3: Yuvarlatılmış Köşeler

Bu örnekte, bir Container widgetinin etrafına yuvarlatılmış köşeler ekleyeceğiz.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(20),
  ),
)

Yukarıdaki örnekte, BorderRadius sınıfı kullanılarak borderRadius özelliği oluşturulur. circular() metodu kullanılarak, köşelerin yuvarlatılması için bir yarıçap belirtilir.

Sonuç

Border widgeti, Flutter’da kullanıcı arayüzlerine sınır eklemek için kullanışlı bir widgettir. Bu makalede, Border widgetinin özellikleri ve kullanımı hakkında ayrıntılı bilgi verdim ve her özellik için bir örnek gösterdim. Umarım bu makale, Flutter’da Border widgetinin kullanımını daha iyi anlamanıza yardımcı olur.

Evet Border widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.