Merhabalar.

Flutter’da önemli konularımızdan biri Image kullanımıdır.

Bu yazımda detaylıca bunu anlatmaya çalışacağım.

İlk olarak bu dersi anlatacağım konu klasörümün altında Images diye klasör oluşturdum. Sonra bilgisayarımda bulunan 3 tane resim dosyasını Images altında yapıştırdım.

Kodları main.dart dosyasına yazacağım.

Flutterda projemize dahil ettiğimiz dosyaları pubspec.yaml dosyası altında aşağıdaki bölümde bildirmemiz gerekir.

Şimdi burada iki yöntem var bunlardan ilki bütün resim dosyalarını tek tek eklemek.

Bunun için resim dosyalarının adresini almak gerekir. Bunu kısa yoldan aşağıdaki gibi yapabilirsiniz.

Assets kısmını düzenlerken girinti ve çıkıntılara dikkat etmemiz gerekir.

assets: 4 karakter içerdedir.

Altına yazılan ifadeler ise asetten itibaren iki karakter içerdedir.

Şimdi aklımıza şöyle bir soru gelir. Elimde 1000 tane resim olsa hepsini buraya tanıtmamız mı gerekecekti.

Tabii ki hayır. Burada yapmanız gereken işlem sadece şudur.

Images dosyasını adres olarak göstersek altındaki tüm dosyaları alacaktır.

İşte bu kadar.

Şimdi artık kodlarımıza geçebiliriz.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text("Brainy Tech"),
        elevation: 12,
        centerTitle: true,
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              margin: EdgeInsets.all(5),
              height: 200,
              alignment: Alignment.center,
              child: Image(
                image: AssetImage("lib/08_Images/Images/flutter1.jpg"),
                height: 200,
                width: 200,
              ),
            ),
            Container(
              margin: EdgeInsets.all(5),
              height: 200,
              alignment: Alignment.center,
              child: Image(
                image: AssetImage
                  ("lib/08_Images/Images/flutter2.png"),
                height: 200,
                width: 200,

              ),
            ),
            Container(
              margin: EdgeInsets.all(5),
              height: 200,
              alignment: Alignment.center,
              child: Image(
                image: AssetImage
                  ("lib/08_Images/Images/flutter3.png"),
                height: 200,
                width: 200,
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}
child: Image(
                image: AssetImage
                  ("lib/08_Images/Images/flutter3.png"),
                height: 200,
                width: 200,
              ),

Localde tuttuğumuz resim dosyalarına Image widgetının image özelliği ile ulaşabiliyoruz.

Burada image özelliği AssetImage tipinden bir sınıf alıyor. Ve bu sınıfa image’in adresini yazıyoruz.

Resme yükseklik ve genişlik verebiliyoruz.

Bunu 3 alan için yaptığımızda aşağıdaki görüntü oluşuyor.

Bunu direkt Image.Asset() widget’ı ilede yapabilirdik.

child: Image.asset(
                "lib/08_Images/Images/flutter1.jpg",
                height: 200,
                width: 200,
              ), 

Internetten resim eklemek istiyorsak eğer kullanacağımız widget ise şu şekildedir:

child: Image.network(
                "https://www.mobilhanem.com/wp-content/uploads/2020/07/3.png",
                height: 200,
                width: 200,
                fit: BoxFit.fill,
              ),

İnternetten resim yüklediğimizde resmin gelmesi biraz zaman alabilir. Böyle bir durumda kullanıcıya bir hata ya da boş ekran göstermek hiç hoş olmayacaktır.

İşte bunu çözmek için aşağıdaki kod parçacığını kullanacağız.

Öncelikle bekle resmi için netten yükleniyor gibi bir resim bulalım bunu localdeki images içine atalım.

child: FadeInImage.assetNetwork(
                placeholder: "lib/08_Images/Images/loading.gif",
                image: "https://www.mobilhanem"
                    ".com/wp-content/uploads/2020/07/3.png",
                height: 200,
                width: 200,
              ),

Burada placeholder yerine netten resim gelene kadar tutacak localdeki resmi gösteriyoruz. image kısmına ise asıl resmin kaynağını.

Eğer profil resmi tarzı bir şekilde görsel eklemek istiyorsanız ise CircleAvatar() widget’ını kullanabilirsiniz. Bu widget’ın içine de dilerseniz lokalden, dilerseniz internetten görsel ekleyebilirsiniz.

CircleAvatar’ın backgroundimage özelliğinin bir imageprovider istediği unutulmamalıdır. Image.Asset metodu çalışmayacaktır.

Localden

child: CircleAvatar(
                radius: 300,
                backgroundImage: AssetImage("lib/08_Images/Images/flutter1"
                    ".jpg"),
              ),
Netten
              CircleAvatar(
                radius: 300,
                backgroundImage: NetworkImage("https://picsum.photos/seed/picsum/300/300"
                    ".jpg"),
              ),

Bu yazımda bu kadardı.


What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Murat Bilginer
21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.