Flutter Icon Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Icon widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen bir mobil uygulama geliştirme SDK’sıdır. Flutter, zengin bir widget koleksiyonu ile birlikte gelir ve bu widget’lar, uygulama geliştiricilerine kolay bir şekilde arayüz oluşturma imkanı verir. Flutter’daki Icon widgeti de bu widget’lar arasında yer alır ve uygulama geliştiricilerinin kullanabileceği bir dizi özellik sunar.

Icon Widgeti Özellikleri

Flutter’daki Icon widgeti, uygulama geliştiricilerinin uygulama arayüzünde kullanabilecekleri farklı simgeleri temsil eder. Icon widgeti, aşağıdaki özellikleri içerir:

• icon: Widget’in görüntüleyeceği simgeyi belirtir.
• size: Widget’in boyutunu belirler. Varsayılan boyutu 24×24’tür.
• color: Widget’in rengini belirler.

Icon Widgeti Kullanımı

Flutter’daki Icon widgeti, farklı şekillerde kullanılabilir. Aşağıdaki örneklerde, Icon widgeti kullanarak nasıl farklı simgeler görüntüleyebileceğinizi gösteren bazı örnekler verilmiştir:

Örnek 1: Basit bir Icon Widgeti Kullanımı

Icon(
  Icons.add,
  size: 48.0,
  color: Colors.blue,
)

Bu örnekte, Icon widgeti, “add” simgesini görüntüler. Widget’in boyutu 48×48 ve rengi mavi olarak ayarlanmıştır.

Örnek 2: Daire Şeklinde Bir Icon Görüntülemek

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: Icon(
    Icons.add,
    size: 48.0,
    color: Colors.white,
  ),
)

Bu örnekte, bir Container widget’i kullanarak daire şeklinde bir Icon görüntülenir. Container, bir BoxShape.circle ile şekillendirilir ve arka plan rengi mavi olarak ayarlanır. Icon, beyaz renkte ve boyutu 48×48 olarak ayarlanır.

Örnek 3: Farklı Bir Icon Ölçeği Kullanmak

Icon(
  Icons.add,
  size: 48.0,
  color: Colors.blue,
  semanticLabel: 'Add',
  textDirection: TextDirection.ltr,
)

Bu örnekte, Icon widgeti “add” simgesini görüntüler. Widget’in boyutu 48×48 ve rengi mavi olarak ayarlanmıştır. Ayrıca, semanticLabel ve textDirection özellikleri de ayarlanmıştır.

Örnek 4: Icon Button Oluşturma

IconButton(
  icon: Icon(
    Icons.add,
    size: 24.0,
  ),
  onPressed: () {
    // Icon Buttona tıklandığında yapılacak işlemler
  },
)

Bu örnekte, IconButton widgeti kullanılarak bir Icon Button oluşturulur. Icon Button, “add” simgesini görüntüler ve boyutu 24×24 olarak ayarlanır. Ayrıca, onPressed özelliği de ayarlanır ve kullanıcı butona tıkladığında gerçekleştirilecek işlemler belirtilir.

Örnek 5: Icon Animasyonu

AnimatedIcon(
  icon: AnimatedIcons.arrow_menu,
  progress: _animationController.view,
),

Bu örnekte, AnimatedIcon widgeti kullanılarak bir Icon Animasyonu oluşturulur. AnimatedIcon, “arrow_menu” simgesi kullanılarak oluşturulur ve _animationController.view progress özelliğine atanarak animasyonu kontrol eder.

Örnek 6: Icon Simgeleri Yükleme

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: precacheImage(
        AssetImage('assets/icons/heart.png'),
        context,
      ),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return Icon(
            Icons.favorite,
            size: 48.0,
            color: Colors.red,
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

Bu örnekte, precacheImage() fonksiyonu kullanılarak bir Icon simgesi yüklenir. FutureBuilder, yükleme işlemi tamamlanıncaya kadar bir CircularProgressIndicator widgeti görüntüler. Yükleme işlemi tamamlandığında, Icon widgeti “favorite” simgesini görüntüler ve boyutu 48×48 olarak ayarlanır.

Sonuç

Flutter’daki Icon widgeti, uygulama geliştiricilerinin uygulama arayüzünde farklı simgeler görüntülemelerine olanak tanır. Yukarıdaki örnekler, Icon widgetinin nasıl kullanılabileceğine dair sadece birkaç örnektir. İhtiyacınıza uygun şekilde, farklı özellikler ve örnekler kullanarak Icon widgetini kullanabilirsiniz.

Evet Icon widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.