Flutter’da Image Widget Kullanımı
Flutter’da Image widget, adından da anlaşılacağı üzere farklı kaynaklardan ve biçimlerden görselleri görüntülemek için kullanılır. Flutter’da esteklenen görüntü biçimleri JPEG, PNG, GIF, hareketli GIF, WebP, hareketli WebP, BMP ve WBMP formatlarıdır.
Image Widget
Aşağıdaki özellikleri nedeniyle Text widget veya Icon widget gibi diğer temel widget’lardan biraz daha karmaşık bir kullanıma sahiptir:
- Görüntü kaynağını alma
Görüntü kaynağı, uygulamanın kendisine bizzat kullanıcı tarafından gömülü olarak eklenir veya internet’ten link ekleyerek oluşturulan bir görüntü olabilir.
- Boyutlandırma
Ayrıca boyut ve şekline göre görselin ölçeklenmesi de oldukça önemlidir.
Gömülü Görseller (Embedded Images)
Gömülü görseller daha hızlı olmakla beraber uygulamanızın yükleme boyutunu da artıracaktır. Ancak, uygulamanızın logosu gibi uygulamanızın ömrü boyunca asla değişmeyecek bir görsel kullancaksanız, görselinizi gömülü olarak kullanmalısınız.
Görseli uygulamanıza gömmek ve karışıklığı önlemek adına öncellikle assets ya da images adında bir dosya oluşturun. İçine dilediğiniz görselleri ekledikten sonra pubspec.yaml dosyasına gidip yorum içinde bulunan assets dosyasını ve içindekileri yorumdan kaldırın.
Bunu yapmak için kısayol olarak ilgili satırları fareyle seçip CTRL K ve ardından da CTRL U tuşuna basmak işe yarayacaktır:
Sonrasında ise varsayılan olarak gelen görselleri silip aşağıdaki haline getirelim:
|
1 2 |
assets: - assets/ |
Ardından dosyayı kaydedip ve projenizin dosyayı işlemesini sağlaması adına komut satırından “flutter pub get” komutunu çalıştırın.
Projemizde gömülü görseli kullanmak için aşağıdaki kodları kullanabiliriz:
|
1 |
Image(image: AssetImage("assets/1kodum.png")) |
|
1 |
Image.asset("assets/Flutter.jpg") |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Images")), ), body: //1. Yol /*Image(image: AssetImage("assets/1kodum.png"))*/ //2. Yol Image.asset("assets/Flutter.jpg") ), ), ); |
Ağ Görselleri (Network Images)
Ağ görselleri tahimn edebileceğiniz üzere HTTP aracılığıyla internet üzerinden görüntü yüklenmesini sağlar.
Haliyle, bunlar gömülü görsellerden daha yavaştır. Zira internet üzerinden bir sunucuya gönderilirken ve resim cihazınız tarafından indirilirken bir gecikme olur. Avantajı ise bu görüntülerin canlı olmasıdır. Yani herhangi bir resmin sadece URL’si girilerek dinamik bir şekilde yüklenebilir.
|
1 |
Image.network(imageUrl) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Images")), ), body: //1. Yol /*Image(image: AssetImage("assets/1kodum.png"))*/ //2. Yol /*Image.asset("assets/Flutter.jpg")*/ //3. Yol (internet üzerinden) Image.network("https://images.unsplash.com/photo-1520085601670-ee14aa5fa3e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80") ), ), ); |
Görsel Boyutlandırma (Sizing an Image)
Malum yüklenilen görsel sahip olduğu boyutlarla yüklenmektedir. Flutter’ın yerleşim motoru, görüntüyü içine konuladuğu şeye (container vb.) sığdırmak için küçültür, ancak büyütmez.
Bu uyum BoxFit olarak adlandırılır. Ancak başka hangi seçenekler mevcut ve hangisini kullanacağımıza nasıl karar vereceğiz diyorsanız aşağıdaki görsel yardımcı olacaktır:
- fill: Hem genişlik hem de yükseklik tam olarak oturacak şekilde görsel gerilir. Haliyle orjinal boyutları deforme olur.
- cover: Boşluk dolana kadar resmin boyutunda küçültme veya büyültme olur. Orjinal boyutun üst/alt veya yanları kırpılır.
- fitHeight: Yüksekliği tam olarak sığdırır. Genişliği kırpar veya gerektiğinde fazladan boşluk eklenir.
- fitWidth: Genişliği tam olarak sığdırır. Yüksekliği kırpar veya gerektiğinde fazladan boşluk eklenir.
- contain: Hem yükseklik hem de genişlik oturana kadar sığdırır. Haliyle hangisi küçükse o sığar. Üstte/altta veya yanlarda fazladan boşluk olabilir.
Yukarıdaki bilgiler ışığında kullanacağımız görseli bir container içine yerleştirebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Images")), ), body: Container( color: Colors.amber.shade400, width: 300, height: 900, child: Image( image: AssetImage("assets/1kodum.png"), fit: BoxFit.contain, ), )), ), ); |
Çıktı:
