Flutter’da SVG Kullanımı

Mirkan
Mirkan
Jun 23 · 2 min read

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.

Örnek 1

İstersem FloatingActionButton ile kullanabilirim. semanticsLabel resmin amacını belirten bir mesaj, ekran okuyucular bunları okuyabiliyor ve erişilebilirlik için önemli bir faktör.

Demo

Bu yazımda sizlere Flutter’da SVG kullanmayı anlattım. Sorularınızı Twitter @mirkancal ve LinkedIn üzerinden yazabilirsiniz, sağlıcakla kalın.

Flutter İzmir

Flutter İzmir Topluluğu

Mirkan

Written by

Mirkan

İzmir’den Flutter mühendisiyim. Stackoverflow’da Flutter sorularını cevaplamayı seviyorum.

Flutter İzmir

Flutter İzmir Topluluğu

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade