Flutter ShaderMask nedir ve nasıl kullanılır sorularını ele alacağımız bu yazıda ShaderMask’ın işlevlerini ve kullanım biçimini öğreneceğiz. Aynı zamanda görsellerle ShaderMask’ın nasıl UI ile uyumlu hale getirileceğini de ele alacağım.
Flutter ShaderMask nedir?
ShaderMask, içerisinde yer alan her türlü widget’a kendi gölgesini ve rengini maskeleyen bir widget’tır. Yani ShaderMask bir nevi resimler üzerinde gölgeli geçişler elde etmenizi sağlar. Aynı zamanda BlendMode ile beraber üzerinde uygulanan renkleri farklı efektlerle birleştirebilirsiniz.
Flutter ShaderMask kullanımı
Örneğin aşağıda göstereceğim ekran görüntüsünde, sayfada bulunan giriş görselinin sanki ekranın arkasındaymış gibi bir derinlik algısı oluşturmasını ShaderMask ile sağladım. ShaderMask kullanırken aynı anda da LinearGradient’i de kullanarak resim üzerindeki renk geçişini oldukça yumuşak yapmaya çalıştım.
Görselin belirli bir kısmında background color olarak belirlendiğim rengi LinearGradient içerisinde kullanarak istediğim efekti sağladım. Resim sanki sayfadan ayrı değil de, bütünleşikmiş gibi bir görüntü yakaladım. Keskin geçişleri bu şekilde kapatmayı deneyebilirsiniz.
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color.fromARGB(255, 49, 58, 88),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ShaderMask(
blendMode: BlendMode.srcATop,
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.mirror,
stops: [0.05, 0.85],
colors: [
Color.fromARGB(0, 48, 57, 87),
Color.fromARGB(255, 49, 58, 88),
],
).createShader(bounds);
},
child: Image.asset(
'assets/GirisGorsel.png',
),
),
],
),
),
);ShaderMask BlendMode nedir?
BlendMode, uygulanacak Shader’ın biçimini ve efekt şeklini belirler. Örneğin yukarıdaki kod parçasında BlendMode.srcATop olarak belirlenen bu modu farklı bir moda çevirirseniz renklerin resim üzerindeki izdüşümü farklı olacaktır.
Orjinalinde mavi renklerin yoğun olduğu bir fotoğrafımda LinearGradient içerisinde kırmızı ve siyah renklerini yoğun kullanarak bazı BlendMode çeşitlerini aşağıda göstermeye çalışacağım.
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color.fromARGB(255, 49, 58, 88),
),
child: ShaderMask(
blendMode: BlendMode.lighten,
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.mirror,
colors: [Colors.red, Colors.black],
).createShader(bounds);
},
child: Image.asset(
'assets/zahidcoin.jpg',
fit: BoxFit.cover,
),
),
),
);
Bu şekilde BlendMode kullanarak uygulama içerisinde kullanacağınız resimlere LinearGradient, RadialGradient gibi niteliklerle farklı efektler katabilirsiniz. Doğru uyumu bulursanız çok güzel UI elementleriyle birleştiğinde benim yaptığım gibi yukarıdaki gibi bir sonuç elde edebilirsiniz.
Flutter widget elementlerinden biri olan ShaderMask’ı anlattığım yazı şimdilik bu kadardı. ShaderMask’ın nasıl kullanılacağını gösterip aynı zamanda bu widget ile yapılabilecek güzel bir örneği paylaşmam siz okuyucularım için yol gösterici olacaktır diye düşünüyorum. Bir sonraki yazıda görüşmek üzere! İyi kodlamalar. 🙂
Okuyucuya Not
Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.
Sağlıcakla kalın!