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.
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