Flutter Image Widgeti Kullanımı

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

Flutter’da Image Widgeti, uygulamalarda resimleri görüntülemek için kullanılan en temel widgetlerden biridir. Image Widgeti, yerel dosya sisteminden, ağdan veya uygulamanın içindeki resimleri görüntüleyebilir. Ayrıca, resimlerin boyutunu ve konumunu özelleştirmek için çeşitli seçenekler sunar.

Yerel Dosyadan Resim Görüntüleme

Flutter’da Image Widgeti ile yerel bir dosyadan resim görüntülemek için, Image.asset() yöntemini kullanabilirsiniz. Image.asset() yöntemi, uygulamanın içindeki bir resmi görüntülemek için kullanılır. Bu yöntem, genellikle resimlerin uygulamanın assets klasöründe saklandığı durumlarda kullanılır. Aşağıdaki kodda, bir Image Widgeti kullanarak assets klasöründeki bir resmi görüntülüyoruz:

Image.asset('assets/images/example.png')

Yukarıdaki kod, uygulamanın assets/images klasöründe bulunan example.png adlı bir resmi görüntüler.

Ağdan Resim Görüntüleme

Flutter’da Image Widgeti ile ağdan resim görüntülemek için, Image.network() yöntemini kullanabilirsiniz. Image.network() yöntemi, bir URL’den resimler yüklemek için kullanılır. Aşağıdaki kod, bir Image Widgeti kullanarak bir URL’den bir resmi görüntüler:

Image.network('https://www.example.com/images/example.png')

Yukarıdaki kod, “https://www.example.com/images” URL’sindeki example.png adlı bir resmi görüntüler.

Özelleştirme

Flutter’da Image Widgeti, resimlerin boyutunu, konumunu ve görüntülenme şeklini özelleştirmek için çeşitli seçenekler sunar.

Resim Boyutunu Değiştirme

Örneğin, resmin boyutunu ayarlamak için, width ve height özelliklerini kullanabilirsiniz:

Image.asset(
  'assets/images/example.png',
  width: 200,
  height: 200,
)

Yukarıdaki kod, 200 piksel genişliğinde ve yüksekliğinde bir resim görüntüler.

Yerleşimi Değiştirme

Ayrıca, resmin tamamen görünmesini sağlamak için fit özelliğini kullanabilirsiniz. BoxFit, Image Widgeti’nin içeriği nasıl ölçeklendireceğini belirler. Aşağıdaki kod, resmin boyutunu korurken tamamen görüneceği şekilde ölçeklendirir:

Image.asset(
  'assets/images/example.png',
  width: 200,
  height: 200,
  fit: BoxFit.contain,
)

Yukarıdaki kod, resmin tamamen görünmesini sağlar ve boyutunu korur.

Resim Konumunu Değiştirme

Ayrıca, resmin konumunu ayarlamak için alignment özelliğini kullanılabilir.

Image.asset(
  'assets/images/example.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
)

Yukarıdaki kod, resmi kaplayacak şekilde ölçeklendirir ve Image Widgeti’nin ortasında hizalar.

Yer Tutucu Resim Belirleme

Ayrıca, Image Widgeti’nin yüklenmesi sırasında görüntülenecek bir yer tutucu resim de ekleyebilirsiniz. Yer tutucu resmi belirlemek için placeholder özelliğini kullanabilirsiniz:

Image.network(
  'https://www.example.com/images/example.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Text('Resim yüklenirken bir hata oluştu.');
  },
);

Yukarıdaki kodda, loadingBuilder özelliği, resim yüklenirken görüntülenecek yer tutucu resmi belirler. Bu özellik, yüklenme ilerlemesini gösteren bir İlerleme Çubuğu oluşturur.

Benzer şekilde, errorBuilder özelliği, resim yüklenirken bir hata oluşursa görüntülenecek bir hata mesajı belirler.

Sonuç

Flutter’da Image Widgeti, uygulamalarda resimleri görüntülemek için çok yönlü bir widgettir. Bu makalede, yerel dosyalardan ve ağdan resim görüntülemek için Image.asset() ve Image.network() yöntemlerini kullanmanın yanı sıra, resimlerin boyutunu, konumunu ve görüntülenme şeklini özelleştirmek için bir dizi özelliği de gösterdik. Bu özellikler, uygulamanızda görsel olarak çekici ve işlevsel bir deneyim yaratmanıza yardımcı olabilir.

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