Flutter Opacity Kullanımı #138

Kategori Featured, Flutter
16.03.2023
92 Okunma

Flutter’da Opacity widgeti, bir widgetin saydamlığını ayarlamaya olanak tanıyan bir widgetdir. Bu widget, içinde bulunduğu widgetin opaklığını değiştirmek için kullanılır. Bu makalede, Flutter’daki Opacity widgeti hakkında ayrıntılı bilgi edinecek ve örneklerle nasıl kullanıldığını öğreneceksiniz.

Opacity Widget’inin Kullanımı

Flutter’da Opacity widgeti, kullanımı oldukça basit bir widgetdir. Yalnızca bir child widgeti ve bir opacity değeri gerektirir. Opacity değeri, widgetin saydamlığını belirler ve 0,0 ile 1,0 arasında bir değer alır. Değer arttıkça, widgetin opaklığı artar. Değer azaldıkça, widgetin opaklığı azalır.

Yukarıdaki örnekte, bir Container widgeti içeren bir Opacity widgeti kullanılmıştır. Opacity değeri 0.5 olarak ayarlandığı için, Container widgeti yarı saydamdır.

Opacity Widget’inin Özellikleri

Opacity widgeti, child widgetine etki eden birkaç özellik sunar. Bu özellikler şunlardır:

opacity

Bu özellik, widgetin saydamlığını belirler. Değer 0,0 ile 1,0 arasında olmalıdır.

alwaysIncludeSemantics

Bu özellik, Opacity widgetinin, child widgetinin semantiğinin daima görünür olmasını sağlar. Varsayılan değeri false’dur.

child

Bu özellik, Opacity widgetinin içinde bulunan child widgetini belirler.

Opacity Widget’inin Örnekleri

Şimdi, Opacity widgetini kullanarak birkaç örnek görelim.

Örnek 1: Butonun Opaklığını Değiştirme

Bu örnekte, bir butonun opaklığını değiştirmek için Opacity widgeti kullanılır. Butona tıkladığınızda, opaklık değeri değişir.

Örnek 2: Animasyonlu Opacity

Bu örnekte, Opacity widget’ını kullanarak bir resmin opaklığını bir animasyon yardımıyla değiştireceğiz.

Bu örnekte, _visible adlı bir boolean değişken tanımlıyoruz ve varsayılan olarak true değerini atıyoruz. AnimatedOpacity widget’ı içindeki opacity özelliği, _visible değişkeninin değerine göre ayarlanıyor. duration özelliği, animasyonun süresini belirliyor.

Ayrıca, uygulamamızda bir düğme kullanarak _visible değişkeninin değerini tersine çeviriyoruz. Bu düğme, setState yöntemi kullanılarak MyHomePage sınıfının durumunu güncelliyor ve böylece resmin opaklığı da güncelleniyor.

Umarım bu örnekler, Opacity widget’ının ne işe yaradığını ve nasıl kullanıldığını anlamana yardımcı olmuştur.

Comments of this post

Henüz yorum bulunmuyor!