Industryolog Destekçimiz Ol

Industryolog

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

6 min

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,
  ),
),
Image for post

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]
      ),
    ),
  ),
)
Image for post

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
),
Image for post

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
  ),
),
Image for post
Image for post
Image for post
TileMode.repeated vs. TileMode.mirror vs. TileMode.clamp (varsayılan)

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]
      ),
    ),
  ),
)
Image for post

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),
    ),
  ),
)
Image for post

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
    ),
  ),
)
Image for post

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),),
  ),
)
Image for post

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),
  ),
),
Image for post

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),
  ),
)
Image for post

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)),
  ),
)
Image for post

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
Image for post
Image for post
Radius.circular vs Radius.elliptical

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),
),
Image for post
Image for post
BorderRadius.vertical vs BorderRadius.horizontal

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),
      ),
    ),
  ),
)
Image for post

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),
          ),
        ]),
  ),
)
Image for post

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
        ),
      ]),
)
Image for post

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,
        ),
      ]),
)
Image for post

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 for post

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

PinPrintLinkedIn

What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Murat Bilginer

Posted by

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.

log in

Forgot password?

forgot password

Back to
log in