10 ay ago 10 ay ago

Flutter 0’dan Mobil Uygulama Geliştirme 32 – BoxDecoration Detaylı Anlatım

6 min

by Murat Bilginer 10 ay ago10 ay ago

BoxDecoration nedir?

BoxDecoration, Container dediğimiz kutuları şekillendirmeye, boyamaya ve istenilen türde kutu yaratmaya yarayan dekorasyon aracıdır.

Bu yazıyı okumadan önce eğer Container hakkında bilgi sahibi değilseniz şu yazıyı okumanızda fayda var.

BoxDecoration, içini renk veya resim ile doldurabileceğimiz body, gövdenin kenarlarını dolduran kenarlık border ve kutuya gölge verebileceğimiz boxShadow kısımlarından oluşur.

BoxDecoration dikdörtgen veya daire şeklinde olabilir. Eğer dikdörtgen yapmak istersek borderRadius parametresi ile kenarlarına yuvarlaklık verilebilir.

Image for post — Kenarlarına borderRadius verilmiş bir BoxDecoration

BoxDecoration Nasıl Kullanılır?

Yaygın kullanımda BoxDecoration, Container yapısının içinde decoration parametresinin içinde tanımlanır. Şimdi örneklerle BoxDecoration yapısının parametrelerini inceleyelim.

Color

Color parametresi renk atamamızı sağlar. Şimdi bir örnekle inceleyelim

Container(
  width: 250,
  height: 250,
  alignment: Alignment.center,
  child: Text("Container",style: TextStyle(fontSize: 24,fontWeight: FontWeight.w700,color: Colors.white),),
  decoration: BoxDecoration(
    color: Colors.amber,
  ),
),

Uygulamada görüldüğü üzere Container’ a renk atamaktan bir farkı yok. Ama dikkat edilmesi gereken hem Container da hem BoxDecoration da aynı anda renk atarsak hata ile karşılaşırız rengi sadece birinde tanımlamamız lazım.

Gradient

BoxDecoration’ da renk geçişleri yapmamıza olanak sağlayan parametredir.

Eğer color parametresi ile beraber kullanılırsa color parametresinin üstünü kaplar.

LinearGradient ve RadialGradient olarak iki farklı değer alarak kullanılabilir. şimdi LinearGradient ile başlayalım.

LinearGradient

Doğrusal renk geçişleri sağlar. Beş parametreden oluşur.

begin (Renk geçişinin başlayacağı yer)
end (Renk geçişinin biteceği yer)
colors (Renk geçişinin alacağı renklerin listesi)
stops (Renk geçişini 0 ile 1 arasındaki sayılarla bölmeyi sağlayan parametre)
tileMode (Renk geçişlerini tekrarlayan biçimde döşemeyi sağlayan parametre)

Şimdi bir örnekle colors parametresi ile renkleri atayalım.

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: LinearGradient(
        colors: [Colors.blue,Colors.red]
      ),
    ),
  ),
)

Henüz begin ve end parametrelerini belirlememize rağmen. Varsayılan olarak gelen soldan sağa bir renk geçişi sağladık.

Begin, End

Şimdi bu parametreleri de belirleyelim.

LinearGradient(
  colors: [Colors.blue,Colors.red],
  begin: Alignment.topRight,
  end: Alignment.bottomLeft
),

Görüldüğü üzere başlangıç noktasını sağ üst ve bitiş noktasını sol alt olarak ayarladık. Eğer Alignment kullanımını bilmiyorsanız şu yazının ilgili başlığına bakabilirsiniz.

TileMode

TileMode parametresi üç değer alır.

TileMode.clamp
TileMode.mirror
TileMode.repeated

Şimdi bir örnekle tileMode kullanımını inceleyelim.

BoxDecoration(
  color: Colors.amber,
  gradient: LinearGradient(
    colors: [Colors.blue,Colors.red],
    begin: Alignment.center,
    end: Alignment.centerRight,
    tileMode: TileMode.repeated
  ),
),

Stops

Stops parametresine 0.0 ile 1.0 arasındaki sayıları liste olarak vererek renklerin geçiş noktalarını belirleyebiliriz. Sayılar küçükten büyüğe sıralı olmalıdır ve sayı listesinin ve renk listesinin elaman sayısı aynı olmalıdır.

Bir örnekle inceleyelim

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: LinearGradient(
          colors: [Colors.blue, Colors.amber, Colors.red,],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          stops: [0.3, 0.4, 0.7]
      ),
    ),
  ),
)

RadialGradient

Dairesel renk geçişleri sağlar. Beş parametreden oluşur.

center (Renk geçişinin merkezi)
radius (Renk geçişinin yarıçapı, 0 ile 1 arasında değer alır)
colors (Renk geçişinin alacağı renklerin listesi)
stops (Renk geçişini 0 ile 1 arasındaki sayılarla bölmeyi sağlayan parametre)
tileMode (Renk geçişlerini tekrarlayan biçimde döşemeyi sağlayan parametre)

Kullanımı LinearGradient ile hemen hemen aynıdır. Tek bir örnekle inceleyelim

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(colors: [
        Colors.blue,
        Colors.amber,
        Colors.red,
      ], center: Alignment.center, radius: 0.5),
    ),
  ),
)

Shape

Shape parametresini kullanarak BoxDecoration şeklini belirleriz. İki değer alabilir.

BoxShape.rectangle (varsayılan)
BoxShape.circle

Şimdi BoxShape.circle örneğini inceleyelim

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(colors: [
        Colors.blue,
        Colors.amber,
        Colors.red,
      ], center: Alignment.center, radius: 0.5),
      shape: BoxShape.circle
    ),
  ),
)

Border

Şeklimizin etrafına kenarlık çizmek için kullanılan parametredir.

Değer olarak Border, Border.all ve Border.symmetric değerlerini alabilir. Şimdi örneklerle bunları inceleyelim.

Border.all

Bütün kenarlara kenarlık verir ve üç parametre alır.

color (kenarlığın rengi)
width (kenarlığın kalınlığı)
style (Kenarlığın stili, iki değer alır. BorderStyle.solid ve BorderStyle.none)

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(
          colors: [Colors.blue, Colors.amber, Colors.red],
          center: Alignment.center,
          radius: 0.5),
      border: Border.all(
          color: Colors.black, width: 5.0, style: BorderStyle.solid),),
  ),
)

Border

Özel olarak bir kenara veya kenarlara border eklemek için kullanılır. bottom,top,right,left parametrelerini kullanarak istenilen kenara border verilir.

decoration: BoxDecoration(
  color: Colors.amber,
  gradient: RadialGradient(
      colors: [Colors.blue, Colors.amber, Colors.red],
      center: Alignment.center,
      radius: 0.5),
  border: Border(
    bottom: BorderSide(
        color: Colors.black, width: 5.0, style: BorderStyle.solid),
  ),
),

Border.symmetric

Kullanımı Border ile hemen hemen aynıdır, tek fark Border.symmetric’ de horizontal ve vertical olarak iki parametre alır. ver karşılıklı kenarlara border atanır.

decoration: BoxDecoration(
  color: Colors.amber,
  gradient: RadialGradient(
      colors: [Colors.blue, Colors.amber, Colors.red],
      center: Alignment.center,
      radius: 0.5),
  border: Border.symmetric(
    vertical: BorderSide(
        color: Colors.black, width: 5.0, style: BorderStyle.solid),
  ),
)

borderRadius

borderRadius parametresini kullanarak şeklimizin kenarlarını ovalleştirebiliriz.

NOT: Eğer şeklimiz daire (BoxShape.circle) ise borderRadius parametresini kullanamayız.

Şu değerleri alabilir : BorderRadius.circular, BorderRadius.all, BorderRadius.only, BorderRadius.horizontal, BorderRadius.vertical.

BorderRadius.circular

Bütün kenarlara ovallik verir değer olarak double bir sayı değeri alır. Kullanımı ise şu şekildedir.

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
        color: Colors.amber,
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.amber, Colors.red],
            center: Alignment.center,
            radius: 0.5),
        border: Border.all(
            color: Colors.black, width: 5.0, style: BorderStyle.solid),
        borderRadius: BorderRadius.circular(20.0)),
  ),
)

BorderRadius.all

Bütün köşelere ovallik verir. Verdiği sonuç açısından BorderRadius.circular ile benzerlik gösterir. Değer olarak Radius.circular veya Radius.elliptical (Eliptik) alır. Şimdi kodu görelim.

borderRadius:BorderRadius.all(Radius.circular(20)), //Dairesel borderRadius:BorderRadius.all(Radius.elliptical(20,40)), //Eliptik

BorderRadius.vertical, BorderRadius.horizontal

Dikey (BorderRadius.vertical) veya Yatay (BorderRadius.horizontal) kenarlara ovallik vermek için kullanılır.

BorderRadius.vertical (top ve bottom parametreleri ile üst ve alt kenarlara ovallik verilebilir.)
BorderRadius.horizontal (left ve right parametreleri ile sol ve sağ kenarlara ovallik verilebilir.)

Kullanımı BorderRadius.all ile aynıdır.

borderRadius: BorderRadius.vertical(
  bottom: Radius.circular(20),
 // top: Radius.circular(20),
),borderRadius: BorderRadius.horizontal(
  right: Radius.circular(20),
 // left: Radius.circular(20),
),

BorderRadius.only

Sadece belirli bir köşeye veya köşelere ovallik vermek istenirse kullanılır. topLeft, topRight, bottomLeft, bottomRight ile sırasıyla üst-sol, üst-sağ, aşağı-sol ve aşağı-sağ köşeye ovallik verilebilir. Kullanımı şu şekildedir.

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(
          colors: [Colors.blue, Colors.amber, Colors.red],
          center: Alignment.center,
          radius: 0.5),
      border: Border.all(
          color: Colors.black, width: 5.0, style: BorderStyle.solid),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        //topRight: Radius.circular(20),
        //bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        // right: Radius.circular(20),
      ),
    ),
  ),
)

boxShadow

boxShadow parametresi ile şeklimizin arkasına gölge efekti veririz. Değer olarak BoxShadow class’ı kullanılır.

Not: İstenirse liste şeklinde birden fazla BoxShadow kullanılabilir.

Şimdi BoxShadow kullanımını inceleyelim. BoxShadow 4 farklı parametre alır.

color: Gölgenin rengini belirler
offset: Gölgenin kutuya göre mesafesi
blurRadius: The standard deviation of the Gaussian to convolve with the box’s shape.
spreadRadius: The amount the box should be inflated prior to applying the blur.

color, offset

İlk örnekte color ve offset parametrelerini inceleyelim.

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
        color: Colors.amber,
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.amber, Colors.red],
            center: Alignment.center,
            radius: 0.5),
        border: Border.all(
            color: Colors.black, width: 5.0, style: BorderStyle.solid),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          //topRight: Radius.circular(20),
          //bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
          // right: Radius.circular(20),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.amber,
            offset: Offset(20.0, 10.0),
          ),
        ]),
  ),
)

Uygulamada görüldüğü üzere gölgemiz x ekseninde yani yatay eksende 20, y ekseninde yani dikey eksende 10 piksel hareket etti.

blurRadius

Şimdi BoxShadow ‘ a blurRadius ekleyerek bulanıklaştırıp, gerçek bir gölge gibi görünmesini sağlayalım

Container(
  width: 250,
  height: 250,
  alignment: Alignment.center,
  child: Text(
    "Container",
    style: TextStyle(
        fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
  ),
  decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(
          colors: [Colors.blue, Colors.amber, Colors.red],
          center: Alignment.center,
          radius: 0.5),
      border: Border.all(
          color: Colors.black, width: 5.0, style: BorderStyle.solid),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        //topRight: Radius.circular(20),
        //bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        // right: Radius.circular(20),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.amber,
          offset: Offset(20.0, 10.0),
          blurRadius: 20
        ),
      ]),
)

spreadRadius

Şimdi de BoxShadow ‘ a spreadRadiusekleyerek gölgenin daha fazla alana yayılmasını sağlayalım.

Container(
  width: 250,
  height: 250,
  alignment: Alignment.center,
  child: Text(
    "Container",
    style: TextStyle(
        fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
  ),
  decoration: BoxDecoration(
      color: Colors.amber,
      gradient: RadialGradient(
          colors: [Colors.blue, Colors.amber, Colors.red],
          center: Alignment.center,
          radius: 0.5),
      border: Border.all(
          color: Colors.black, width: 5.0, style: BorderStyle.solid),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        //topRight: Radius.circular(20),
        //bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        // right: Radius.circular(20),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.amber,
          offset: Offset(20.0, 10.0),
          blurRadius: 20,
          spreadRadius: 20,
        ),
      ]),
)

Multi BoxShadow

Listeye birden fazla BoxShadow eklemeyi deneyelim.

Scaffold(
  appBar: AppBar(
    title: Text("Flutter BoxDecoration"),
  ),
  body: Container(
    width: 250,
    height: 250,
    alignment: Alignment.center,
    child: Text(
      "Container",
      style: TextStyle(
          fontSize: 24, fontWeight: FontWeight.w700, color: Colors.white),
    ),
    decoration: BoxDecoration(
        color: Colors.amber,
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.amber, Colors.red],
            center: Alignment.center,
            radius: 0.5),
        border: Border.all(
            color: Colors.black, width: 5.0, style: BorderStyle.solid),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          //topRight: Radius.circular(20),
          //bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
          // right: Radius.circular(20),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.red,
            offset: Offset(10.0, 5.0),
            blurRadius: 20,
            spreadRadius: 40,
          ),
          BoxShadow(
            color: Colors.amber,
            offset: Offset(20.0, 10.0),
            blurRadius: 20,
            spreadRadius: 20,
          ),
          BoxShadow(
            color: Colors.blue,
            offset: Offset(30.0, 15.0),
            blurRadius: 20,
            spreadRadius: 1,
          ),
        ]),
  ),
)

Image

Renk veya Gradient ‘ in önünde yer alan nesneyi belirler. Değer olarak DecorationImage alır. Biraz uzun bir yazı olacağından bir sonraki yazımda incelemeye çalışacağım.

Bu yazı eğitime devam edebilmek için şimdilik alıntılanmıştır.

Kaynak: https://medium.com/@cahitsahin/flutter-boxdecoration-nedir-ve-nasıl-kullanılır-f95cfb10b09f

Facebook Tweet Pin Print LinkedIn Email

What's Your Reaction?

hate

fail

fun

geeky

love

lol

omg

win

Posted by Murat Bilginer

21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.