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.
|
1 2 3 4 5 6 7 8 |
Opacity( opacity: 0.5, child: Container( height: 100, width: 100, color: Colors.blue, ), ), |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { double _opacity = 1.0; void _changeOpacity() { setState(() { _opacity = _opacity == 1.0 ? 0.2 : 1.0; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Opacity Widget Örneği"), ), body: Center( child: Opacity( opacity: _opacity, child: ElevatedButton( onPressed: _changeOpacity, child: Text("Tıkla"), ), ), ), ); } } |
Örnek 2: Animasyonlu Opacity
Bu örnekte, Opacity widget’ını kullanarak bir resmin opaklığını bir animasyon yardımıyla değiştireceğiz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Opacity Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _visible = true; void _toggleVisibility() { setState(() { _visible = !_visible; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Opacity Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(milliseconds: 500), child: Image.asset( 'assets/images/flower.jpg', width: 200, height: 200, ), ), SizedBox(height: 20), ElevatedButton( onPressed: _toggleVisibility, child: Text(_visible ? 'Hide' : 'Show'), ), ], ), ), ); } } |
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.
İlk Yorumu Siz Yapın