Gradient Zamanı…!

Merhabalar, bir önceki blogumuzda “appBar” propertisi ile kullanılan “AppBar Widget” idi. Şimdi ise biraz daha AppBar Widget’ını görsel olarak geliştirmek istiyorum. Bu sebeple “gradient” propertisinin özelliklerine değineceğim. Hem appBar, hemde body propertileri içerisinde incelemeler yapacağım.

İlk olarak gradient properti kullanımlarına başlamadan önce temel kodumuzu içeren bir sayfa oluşturmamız gerekiyor:

Oluşturmuş olduğumuz sayfada görsel değişiklikler yapacağımız için “debugShowCheckedModeBanner” özelliğini “false” yaptım ki daha önceki görsellerimizde de görünen ekranın sağ üst köşesindeki “Debug” yazısı görünmesin.

Hadi appBar ve body için ayrı ayrı olmak üzere  gradient çeşitlerini sırasıyla inceleyeceğim.

AppBar – LinearGradient:

Flutter içinde gradient kullanmak için, container widget’ımızın içindeki decoration propertisine erişmemiz ve ardından bir BoxDecoration kullanmamız gerekir.

Burada 3 renk için gradient örneği mevcuttur. Başlangıç noktası olarak appBar uygulama çubuğu içerisinde sol üst, bitiş noktası olarak ise sağ alt noktasını seçtim. Eğer herhangi bir şey belirtmemiş olsaydım başlangıç noktası için flutter bizlere “begin= Alignment.centerLeft”, bitiş noktası için ise “end=Alignment.centerRight” seçili olarak ayarlamış olacaktı.

AppBar – RadialGradient:

Daire biçiminde bir gradient oluşturmamızı sağlar. Bu kullanım body propertisi içerisinde daha güzel görüneceği düşüncesindeyim. Fakat istendiğinde appBar içerisinde de kullanılabildiğini görmüş olalım 🙂

Ek olarak stop propertisi kullandım. Bu sayede gradient boyunca kesirleri de belirleyebiliriz. Bunu yapmak için 0,0 ile 1,0 arasında bir değer atamamız gerekir. Daha detaylı inceleme ise body – RadialGradient kısmında yapılacaktır.

AppBar – SweepGradient:

LinearGradient ve RadialGradient benzemekle beraber daha göz doyurucu bir görsel sağlamaktadır.

startAngle ve endAngle propertileri ile görselimizi daha da zenginleştirebiliriz.

“tileMode” propertisini de ekleyelim. TileMode widget ile çalışır. Bu widget içerisinde mirror, clamp ve repeated seçenekleri mevcuttur. Şimdilik “TileMode.mirror” kullanalım.

Şimdi aynı widgetleri Scaffold’un body kısmında uygulamayalım.

İlk olarak appBar için yaptığımız gibi temel kodumuzu içeren bir sayfa oluşturalım.

Ve appBar için yaptığımız gradient çeşitlerini şimdi de body için inceleyeceğim.

body – LinearGradient:

Yukarıdaki örnekte de görüldüğü gibi eğer herhangi bir başlangıç ya da bitiş noktası belirtilmezse begin: Aligment.centerLeft, end:  Aligment.centerRight, olarak kabul edilmektedir. Bunları tabi istediğimiz gibi değiştirebiliriz. Aynı zamanda da daha da fazla renk ekleyebiliriz.

appBar widgetta olduğu gibi burada da “stop” propertisini kullanabiliriz.

body – RadialGradient:

RadialGradient, LinearGradient gibi colors ve stops gibi propertilerini alırlar. Bu propertiler ile bir örnek yapacak olursak:

Herhangi bir şey belirtmediğimiz takdirde şeklimiz yukarıdaki örnekte olduğu gibi merkezde yer alacaktır. Yerini değiştirmek “center” propertisi ile bizim elimizdedir:

RadialGradient focal, focalradius gibi bazı diğer özellikleri de alırlar. Hadi sırasıyla inceleyelim:

body – SweepGradient:

İlk olarak colors ve stops propertileri ile sade bir SweepGradient widget oluşturalım.

startAngle ve endAngle propertilerini de ekleyecek olursak görselimiz aşağıdaki şekli almaktadır.

Evet bir blogun da sonuna gelmiş bulunmaktayım. Bir sonraki konumuz ise “SnackBar” widget olacak. Şimdilik hoşçakalın… 🙂

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.