Günümüzde hızla artan mobil kullanıcı sayısı, mobil uygulamalara olan talebin büyük bir çılgınlıkla artmasına neden oldu. Bu nedenle birçok yazılım geliştirici mobil cihazlarda daha güzel ara yüzler, akıcı animasyonlar ve mükemmele yakın performans elde etmek için Flutter ile geliştirme yapmaya başladı. Flutter, Google tarafından oluşturulan ve ilk olarak 2015 yılında Dart geliştirici zirvesinde tanıtılan açık kaynaklı bir kullanıcı ara yüzü (UI) geliştirme kitidir. Android, IOS, Windows, Mac, Linux ve web gibi birçok platformda çalışabilen Flutter bu özellikleri sayesinde gün geçtikçe rakiplerine oranla daha fazla kullanılır hale geldi.
Tam da bu sebepten ötürü bazı zamanlarda bir uygulama, içerisinde bir resim gösterme ihtiyacı duyar. Aslında günümüzde tahmin edersiniz ki resim kullanmayan bir uygulama az rastlanır durumda. Kullanılan bu resim dosyaları kimi zaman kullanıcıya bilgi verirken, kimi zaman uygulamaya güzel bir görünüm kazandırır. Bu yüzden yapmış olduğumuz bir uygulamaya nasıl resim ekleyebileceğimizi bilmek bize her zaman bir avantaj sağlar. Flutter ile yapılmış olan bir uygulamaya resim eklemenin en güvenilir yolu Image Widget kullanmaktır. Bu widget’ı kullanarak uygulamamıza resim ekleyebileceğimiz 2 farklı yola gelin birlikte yakından bakalım.
Image.Network
Bu yöntem adından da anlayacağınız üzere internet üzerinden beğendiğimiz bir resmi kullanmamıza yarar. Eklenilen resim Flutter tarafından indirilir, önbelleğe alınır ve kullanıcıya gösterilir. Fakat burada dikkat etmemiz gereken internet üzerinden alınan resim dosyaları ‘asset’ üzerinden alınan resimler kadar hızlı yüklenmez. Buna ek olarak bu resmin görüntülenmesi için kullanıcının mobil cihazını bir internet ağına bağlaması gerekir. Kullanımı ise oldukça basit. Tarayıcınızda beğendiğiniz resmin adresini kopyalayıp NetworkImage Widget’ına yapıştırmak.
Image(
image: NetworkImage('https://www.valuebound.com/sites/default/files/2019-08/flutter_0.png),
)
İsterseniz bir de yapmış olduğumuz bir uygulamada görelim.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text('Image Widget Nasıl Kullanılır?'),
),
),
backgroundColor: Colors.white,
body: Center(
child: Image(
image: NetworkImage(
'https://www.valuebound.com/sites/default/files/2019-08/flutter_0.png'),
),
),
),
),
);
}Image.Asset
Asset, kelimesinin karşılığı Türkçe de ‘varlık’ anlamına geliyor. Bu yüzden kullanmak istediğimiz resmi öncelikle bir varlık olarak Flutter‘a tanıtmalı, bu işlem sonrasında uygulamamıza eklemeliyiz. Peki bu işlem nasıl gerçekleştirilir?
- İlk önce proje dosyamızda ‘assets’ adında bir klasör oluşturuyoruz.
- Bu klasöre ait ‘images’ adında bir alt klasör daha oluşturup kullanmak istediğimiz resmi içerisine kopyalıyoruz.
- Ardından ‘pubspec.yaml’ dosyasına gelip buradan ‘assets‘ başlığını buluyoruz.
- Assets başlığının önündeki # işaretine imlecimizi getirip 2 kez DEL tuşuna basıyoruz.
- Ardından ‘images’ ile başlayan satıra geçip başına ‘assets’ yazıyoruz ve # işaretinin önüne getirip 2 kez DEL tuşuna basıyoruz.
- Bu işlem tamamlandıktan sonra ‘Pub Get’ seçeneğine tıklıyoruz ve Flutter yapılan işlemi doğrulayıp yayınlıyor.
- Son olarak projemize gelip ‘Get Dependencies‘ seçeneğine tıklıyoruz ve AssetImage Widget içerisinde dosyamızın yolunu gösteriyoruz.
- İşlem tamamdır !
İsterseniz kodumuzun ve çıktımızın son haline yakından bakalım.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text('Image Widget Nasıl Kullanılır?'),
),
),
backgroundColor: Colors.white,
body: Center(
child: Image(
image: AssetImage(
'assets/images/flutter.png'),
),
),
),
),
);
}Flutter‘ın bu kadar hızla büyümesinin ve rakiplerinin önüne geçmesinin en büyük sebeplerinden biride sizlerin de görmüş olduğunuz gibi sağlamış olduğu kullanım kolaylığı, hız ve güçlü performans. Bu yetenekleri günden güne daha da geliştiren Flutter popülaritesini daha da arttıracağa benziyor. Peki siz ne düşünüyorsunuz, yakın zaman içerisinde mobil alanda söz sahibi olmaya aday mı?
