Flutter’da SVG Kullanımı
Neden SVG?
SVG, scalable vector graphics’in kısaltılmışı, yani ölçeklenebilen vektör grafikler. SVG formatını kullanmak için birçok sebebiniz olabilir, grafiker arkadaşınızdan gelen vektör görseli uygulamanızda kullanmak isteyebilirsiniz, ya da bir görselin 3–5 farklı boyutunu kullanmak yerine direkt vektör görsel kullanmak isteyebilirsiniz.
Flutter’da nasıl kullanabiliriz?
SVG görselleri Image.network veya Image.asset widgetlarını kullandığınızda codec hatası alıyorsunuz, çünkü henüz desteklenmiyorlar. Fakat neyse ki topluluğun buna bir çözümü var. flutter_svg paketini kullanabilirsiniz.
pubspec.yaml dosyamıza paketi ekleyerek başlıyoruz. Ekleyeceğimiz yer dependencies kısmı. Şuandaki son versiyon 0.12.1 değil fakat denediğim daha üst versiyonlar şuandaki stabil Flutter sürümü v1.5.4-hotfix.2 ile çalışmadı.
Daha sonra kullanacağımız yerde import ederek kullanmaya başlayabiliriz.
import ‘package:flutter_svg/flutter_svg.dart’;İki tane de SVG url’ini bir değişkene atıyorum.
final String dogUrl = ‘https://www.svgrepo.com/show/2046/dog.svg ‘;final String dogFoodUrl = ‘https://www.svgrepo.com/show/3682/dog-food.svg';
Daha sonrasında ise aşağıdaki gibi kullanabiliriz. placeholderBuilder ile internet olmadığında veya resim yüklenirken ne gösterebileceğimizi ayarlayabiliriz, örnekte ben dairesel bir ilerleme göstergesi göstermeyi tercih ettim.
İstersem FloatingActionButton ile kullanabilirim. semanticsLabel resmin amacını belirten bir mesaj, ekran okuyucular bunları okuyabiliyor ve erişilebilirlik için önemli bir faktör.
Bu yazımda sizlere Flutter’da SVG kullanmayı anlattım. Sorularınızı Twitter @mirkancal ve LinkedIn üzerinden yazabilirsiniz, sağlıcakla kalın.
