Menü Kapat

Flutter’da Resim Ekleme (Asset, Network)

Merhaba arkadaşlar bu yazımda sizlere Flutter’da çalışmamıza resim ekleme işleminden bahsedeceğim. Ekleyeceğimiz resim bilgisayarımızda (asset) veya internetten bir bağlantı üzerinden olabilir (network) olabilir. Şimdi bu iki yöntemi de kullanarak resim ekleme işlemi yapalım.

Öncelikle bilgisayarımızda yüklü olan bir resmi çalışmamıza dahil edelim. Bunun ben lib klasörünün altında “resimler” adında bir klasör oluşturdum ve bilgisayarımdaki resmi sürükleyerek içine attım.

Ardından resmimizi Flutter’a tanıtmamız gerekiyor. Bunun için pubspec.yaml dosyasının içinde assets satırını bulun ve başındaki # işaretini kaldırın. Eklemek istediğiniz resmin yolunu ve adını doğru bir şekilde yazın. Daha sonra Get Packages butonuna tıklayın. Burada girinti çıkıntı çok önemli arkadaşlar. Yani assets başlığının altında tanımlayacağımız resmin girintisi alttaki resimdeki gibi olmalıdır.

Ben resmi bir Container içine aldım. Bunun için kodlarımız aşağıdaki gibi olmalıdır.

Container(
      child: Image.asset("lib/resimler/sunflowers.jpg"),
    ),

Arkadaşlar şimdide internetten bir resmi çalışmamıza ekleyelim. Bunun için kodlarımız aşağıdaki gibi olmalıdır.

Container(
          child: Image.network("https://images.freeimages.com/images/large-previews/e4a/surf-3-1378236.jpg")
        ),

Şimdi de bu iki resmi alt alta göstermek için (Column kullanmak gerekir) genel kod yapımız aşağıdaki gibi olmalıdır. Ayrıca ben iki resmi birbirinden ayırmak için Divider kullandım bu kafa karışıklığına neden olmasın.

Column(
      children: [
        Container(
          child: Image.asset("lib/resimler/sunflowers.jpg"),
        ),
        Divider(),
        Container(
          child: Image.network("https://images.freeimages.com/images/large-previews/e4a/surf-3-1378236.jpg")
        ),
      ],
    );

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.