Flutter Assets ve Image Kullanımı

Mobil uygulamaların vazgeçilmez özelliklerinden olan görsel ve font kaynaklarına kod tarafından erişilip gösterimini sağlama yada kullanma işlemini Flutter içerisinde nasıl gerçekleştiriyoruz makale serimizin devamı niteliğinde olan bu makalede konuyu ele alacağız.

Flutter Assets ve Image Kullanımı

Flutter "FlutterError: Unable to load asset" Hatası ve Çözümü

Eğer projenizi yeni oluşturduysanız yada varolan bir projenizde ilk defa assets kullanacaksanız gerçekleştirmeniz gereken bazı adımlar ve kontroller yer almaktadır.

Assets dosyaları proje altında yer alan herhangi bir klasörde yer alabilir ama genellikle proje ana dizininde assets adında bir klasör açılarak bu klasörü kullanacağız. Fontlar, görseller diğer türde dosyalarınızı atabilirsiniz ama dediğimiz gibi assets klasörü olması zorunluluk değildir.

Altta örnek olarak oluşturulmuş bir assets klasörü yer almaktadır. Bu assets klasörü içerisine direkt atılmış bir görsel ve icons adında klasör açılıp bunun içerisine de atılmış 2 görsel yer almaktadır. Bir görseli icons klasörü dışında bırakma sebebimiz klasör içerisinde olması ve direkt assets klasörü içerisinde olmasının kodsal olarak yol belirtmede ne gibi farklılıklarının olduğunu göstermek içindir.

Sizinde bu şekilde Flutter projesi ana dizinine bir assets klasörü oluşturup içerisine aynı şekilde bir görsel atıp sonrasında icons adında klasör oluşturup yine yukarıdaki görselde olduğunu gibi aynı isimlerde görseller oluşturduğunuzu varsayıp makaleye bu senaryo ile devam ediyor olacağız.

Bu assets dosyalarının pubspec.yaml adlı dosya içerisinde tanımlanmış olması gerekmektedir aksi taktirde oluşturduğumuz 3 görseli de uygulamamızda kullanamayacağız. Şimdi assets dosyalarımızın tanımlarının yapılmış hali olan pubspec.yaml adlı dosyamızın son halini görelim.

Üstteki satırlardan bizi ilgilendiren kısım işaretli olan 21-27. satır arasındaki kodlardır. Burada görüldüğü üzere 3 dosyaya ait tanımlamalar yapılmıştır.

Assets dosyalarının örnek kullanımını altta görebilirsiniz. Bizi ilgilendiren asıl kod blokları 36-52 arasındaki kod satırlarıdır bu satırları dikkate almalısınız.

Gördüğünüz gibi Image sınıfının asset adlı metoduna asset yolunu vererek ilgili asset dosyasına erişimi sağladım. Burada hemen birşeyi farketmişsinizdir makale girişinde trafiklogo.png dosyasını bir farkı gösterebilmek için icons klasörü dışında assets ana dizininde bırakmıştım, eğer assets ana dizini içerisinde yer alan bir dosyaya erişmek isterseniz assets/ önekini kullanmadan yukarıdaki kodda yer aldığı gibi Image.asset('trafiklogo.png') kullanılarak da ilgili dosyaya erişilebilir ama istenirse assets/ öneki kullanılırak da asset dosyasına erişilebilir örnek olarak Image.asset('assets/trafiklogo.png') kodunu kullanırsanız hata almadan aynı sonucu elde edeceksiniz.

Uygulamanın Son Hali

3 farklı görsel kullanarak assets kullanımını ve asset kullanımı için gerekli yapılandırmaların nasıl yapıldığını gördük sonuç olarak alttaki gibi basit bir çıktı elde ediyoruz.

Flutter Assets Kullanimi Örnek Emulator Ekran Görüntüsü

Dış Bağlatıdan Image Kullanımı

Yukarıdaki 3 görseli yada farklı bazı görsellerinizi uygulama dışından bir link üzerinden kullanmak için NetworkImage adlı widget’ı kullanabilirsiniz. Yukarıdaki örneğin AssetImage kullanımı yerine NetworkImage olarak değiştirilmiş hali altta yer almaktadır ayrıca görsel kaynağı için placeimg.com adlı online bir görsel hizmeti kullanılmıştır. Üstteki kod bloğunun tamamı yerine kırpılmış olarak sadece body kısmı bizi ilgilendirdiğinden o kısım altta gösterilmiştir.

Makalede kullanılan örneğe ve Flutter ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.


📚 Kaynaklar


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir