Flutter SVG görselleri: Paketleme ve boyut kontrolü

Flutter'da bir SVG varlığını görüntülemek için flutter_svg paketini ekleyin, dosyayı pubspec.yaml içinde tanımlayın ve aynı yolu SvgPicture.asset ile yükleyin. Widget'a boyutlar veya uygun yerleşim kısıtları verin, ardından çizimi uygulamanızda inceleyin. Paketin varlık kurucusu, bu yükleme yöntemini belgeler.

İki soruyu ayrı tutun: uygulama amaçlanan dosyayı yükledi mi ve görüntüleyici amaçlanan çizimi doğru biçimde üretti mi? Çizimi yeniden dışa aktarmak yanlış yazılmış bir varlık anahtarını düzeltmez. Anahtarı düzeltmek de desteklenmeyen bir efekti basitleştirmez.

Bu rehber, kontrolleri kolaylaştırmak için özgün bir tepeler ve güneş çizimi kullanır. Kod, belgelenmiş API'yi izler; derlenmiş bir uygulama testinin raporu değildir.

İnceleyebileceğiniz küçük bir kaynakla başlayın

Flutter projenizde assets/illustrations/hills.svg dosyasını oluşturun:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

Kaynak, üst üste binen iki üçgen tepe ve onlardan ayrı duran kehribar rengi bir güneş içerir. Açıkça belirtilmiş dolgular kullanır, metin veya bağlantıyla eklenmiş görsel içermez ve güneşle tepeler arasında görünür bir boşluk bırakır. Bu ayrıntılar, uygulamayı kontrol ederken kısa bir kabul listesi oluşturmanızı sağlar.

Daha sonra kendi çiziminizi eklerken bu basit dosyanın bir kopyasını saklayın. Küçük kaynak çalışıyor ancak yerine koyduğunuz çizim çalışmıyorsa tüm yükleme düzenini değiştirmeden önce yapılarını karşılaştırın.

Flutter SVG varlığı, Android VectorDrawable XML'den de farklı bir teslim yöntemidir. Hedefiniz yerel bir Android drawable ise iki dosya biçimini birbirinin yerine kullanılabilir saymak yerine Android VectorDrawable hazırlama rehberini kullanın.

Paketi ekleyin ve tam olarak kullanılacak dosyayı tanımlayın

Flutter projesinin kök dizininde resmî kurulum komutunu kullanın:

flutter pub add flutter_svg

Ardından pubspec.yaml dosyasındaki mevcut flutter: bölümünün altına şu varlık girdisini ekleyin:

flutter:
  assets:
    - assets/illustrations/hills.svg

İkinci bir flutter: bölümü oluşturmak yerine girdiyi mevcut yapılandırmanıza ekleyin. Gösterilen girintileri koruyun. Flutter'ın varlık belgeleri, bu yolları pubspec.yaml dosyasına göre tanımlar ve listelenen dosyaların uygulama paketine nasıl dâhil edildiğini açıklar.

Dosya adında, tanımda ve Dart çağrısında aynı yazımı, büyük ve küçük harfleri ve dizin yapısını kullanın. İlk kontrol için açık bir dosya girdisini karşılaştırmak, geniş kapsamlı bir klasör girdisini karşılaştırmaktan daha kolaydır. Daha sonra dizinleri tanımlarsanız Flutter belgelerine göre bir dizin girdisinin doğrudan içindeki dosyaları kapsadığını unutmayın; alt dizinler kendi girdilerine ihtiyaç duyar.

Varlık yapılandırmasını değiştirdikten sonra normal geliştirme iş akışınızla uygulamayı yeniden derleyip çalıştırın. Düzenleyicinizde görünen bir dosyanın, baktığınız uygulamaya zaten dâhil olduğunu varsaymayın.

Çizimi boyutları tanımlanmış bir kutuya yükleyin

Widget'ınızı içeren Dart dosyasına şu içe aktarımları ekleyin:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

Bu widget'ı ekranınızın uygun bir bölümüne yerleştirin:

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

Kutu, kaynağın oranlarını izler. Daha küçük bir boyut denemeden önce ayrı duran güneşi, iki tepenin rengini ve dış kenar boşluklarını inceleyin. Ardından gerçek bileşeninizin gerektirdiği boyutları kullanın; yukarıdaki sayılar bir örnektir, minimum boyut veya performans önerisi değildir.

Kurucu belgeleri, yüklemenin yerleşimi beklenmedik biçimde değiştirmemesi için açıkça belirtilmiş boyutlar veya boyutu kesin olarak belirleyen yerleşim kısıtları önerir. Çizim kutunun içinde fazla küçük görünüyorsa widget'ın boyutlarının yanı sıra viewBox içindeki boş alanı da inceleyin.

Etiket, bu bağımsız görselin amacını açıklar. semanticsLabel API'si, bunu görselin semantik etiketine bağlar. Anlamı zaten aktaran bir metnin yanındaki dekoratif görsel için bunun yerine görseli semantik ağaçtan çıkarmayı değerlendirin. Kurucunun excludeFromSemantics seçeneği, etiketinden önceliklidir. Her şekli ayrı ayrı etiketlemek yerine bileşenin tamamının sesli olarak aktardığı anlamı değerlendirin.

Yükleme yer tutucusunu hatadan ayırt edin

Yükleme göstergesi, SVG'nin kabul edildiğini kanıtlamaz. Paket, görseli alma veya çözümleme süreci için placeholderBuilder sağlar; güncel errorBuilder API'si ise görsel yüklemesi başarısız olduğunda bir widget sağlar.

Yukarıdaki örnek, yedek içerik olarak kısa bir metin kullanır. Geliştirme sırasında Dart yolunu bilerek var olmayan bir dosya adına değiştirin ve hatayı fark edebildiğinizi kontrol edin. Devam etmeden önce doğru yolu geri yükleyin. Bu, çizimin kendisini değiştirmeden hata sunumunuzu test eder.

Ardından gerçek kaynağınızı test edin. Hâlâ başarısız oluyorsa tanılama çıktısını inceleyin ve önce tanımlanan yolu karşılaştırın. Farklı bir SVG'yi görüntüleyebilen bir ağ örneği, yerel dosyanızın pakete dâhil edildiğini veya özelliklerinin desteklendiğini kanıtlamaz.

Paleti korumakla tek renk uygulamak arasında seçim yapın

Tepelerin turkuaz ve lacivert, güneşin kehribar renginde kalması gerekiyorsa colorFilter ayarını boş bırakın. Bilinçli olarak tek renkli bir görünüm için şu tür bir filtre ekleyin:

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

Paket bu renklendirme biçimini belgeler. Flutter'ın BlendMode referansı, srcIn değerinin hedefin renk kanallarını yok sayarken opaklığını kullandığını açıklar. Dolayısıyla tek renkli bir filtre, kaynak paletindeki ayrımları kaldırır; bu bir tasarım tercihidir, renkleri korumaya yönelik bir düzeltme değildir.

Tepelerde, üst üste binen iki üçgen arasındaki kontrastın kaybolmasının çizimi okumayı zorlaştırıp zorlaştırmadığını kontrol edin. Bu bölgelerin ayrı görünmesi gerekiyorsa özgün paleti koruyun. Paket ayrıca seçici renk değişimleri için ColorMapper kullanımını belgeler; ancak bir uyumsuzluğu teşhis ederken daha basit olan filtresiz durumla başlayın.

Özellikleri yalnızca dosya yüklendikten sonra basitleştirin

flutter_svg belgeleri, CSS desteği eksik olduğu için Illustrator'dan dışa aktarırken sunum özniteliklerini ve dışarıya bağlantı verilen görseller yerine gömülü görselleri önerir. Ayrıca derleyiciye dayalı bir uyumluluk kontrolü sağlar. Karmaşık bir varlığı araştırmanız gerektiğinde bu kontrolü kendi Flutter/Dart ortamınızda uygulayın.

Tarayıcı önizlemesi, amaçlanan görünüm için yararlı bir referanstır; her SVG özelliğinin paket üzerinden aynı şekilde görüntüleneceğini kanıtlamaz. Özgün çizimi koruyun ve bir kopyayı her seferinde tek bir değişiklik yaparak basitleştirin.

Kaynakta yazı varsa bunun uygulama metni olarak mı, sabit çizim olarak mı kalması gerektiğine karar verin. SVG yazı tipi değişimi rehberi, görünümün metin ve yazı tipi işlenmesine neden bağlı olabileceğini açıklar. Sırf varlık yolu sorununu çözmek için bir etiketi vektörleştirmeyin.

Bir arayüz varlık ailesinde, görsel boyutları ve aralıkları birlikte karşılaştırın. Arayüz kiti simge hazırlama rehberi, bu tutarlılık kontrolünde yardımcı olur.

Kaynağın geri kazanılması gerektiğinde vektörleştirmeyi kullanın

Mevcut temiz bir SVG'yi koruyun. Bir fotoğraf veya dokulu arka plan, uygun bir raster varlık olarak daha iyi sunulabilir; uzantısını değiştirmek onu kullanışlı vektör geometrisine dönüştürmez.

Basit bir çizimin yalnızca kaba bir PNG'si kaldıysa PerfectVector'ın PNG'den SVG'ye dönüştürme iş akışı, düzenlenebilir bir aday hazırlamanıza yardımcı olabilir. Çizimi kapsayacak şekilde kırpın, önizlemede eksik şekilleri ve istenmeyen arka plan bölgelerini inceleyin ve SVG'yi indirin. Bu dosyayı uygulama paketine ekleyin; yükleme, palet, boyut ve semantik kontrollerini tekrarlayın.

Tepeler örneğinde, ayrı duran güneşe ve iki renkli yamaç arasındaki ayrıma bakın. Dosyanın amaçladığınız yapıyı içerdiğini doğrulayın; gömülü raster rehberi, bir SVG sarmalayıcısının neden hâlâ piksel barındırabileceğini açıklar.

Bir iyileştirme stratejisi seçmeden önce varlığı uygulamada değerlendirin. Bu iş akışı, SVG'nin PNG'den daha küçük veya daha hızlı olduğuna dair genel bir vaat sunmaz.

Çizimi bir .NET MAUI uygulamasında yeniden kullanıyorsanız MAUI kaynağından PNG'ye iş akışını izleyin. Proje ana SVG dosyasını korurken görünüm, derleme sırasında hazırlanan bir PNG'ye başvurur.

Sık sorulan sorular

Flutter'a nasıl SVG görseli eklerim? flutter_svg paketini ekleyin, SVG varlığını pubspec.yaml içinde tanımlayın ve eşleşen yolu SvgPicture.asset ile yükleyin. Boyutları veya uygun kısıtları belirleyin ve sonucu inceleyin.

Yerel SVG'm neden görünmüyor? Önce varlık tanımını, tam yolu, yükleme hatasını ve yerleşimi kontrol edin. Basit bir kaynak çalışıyorsa başarısız olan çizimin yapısını ve desteklenen özelliklerini karşılaştırın.

Neden tüm renkler aynı oldu? Tek renkli bir srcIn renk filtresi, görünür paleti kendi rengiyle değiştirir. Özgün renklerin ayrı kalması gerekiyorsa bu filtreyi kaldırın.

Flutter için PNG'yi SVG'ye dönüştürmek zorunda mıyım? Hayır. Çizime uygunsa bir raster varlık kullanın. Basit bir raster kaynaktan düzenlenebilir şekiller geri kazanırken vektörleştirme isteğe bağlıdır.

Kaynaklar

1. flutter_svg — Installing — Paket kurulumu ve Dart içe aktarımı.
2. Flutter — Adding assets and images — Varlık tanımları, yollar ve paketleme.
3. flutter_svg — SvgPicture.asset — Varlık yükleme, boyutlar, sığdırma ve semantik kontrolleri.
4. flutter_svg — errorBuilder — Yükleme yer tutucularından ayrı hata sunumu.
5. flutter_svg — semanticsLabel — Görselin semantik amacı.
6. Flutter — BlendMode — Opaklığa dayalı srcIn renklendirmesi.
7. flutter_svg — Package documentation — Renklendirme, seçici renk eşleme, dışa aktarım rehberi ve uyumluluk kontrolleri.

Tanımlanmış tek bir varlıkla başlayın ve uygulamanızda yolunu, paletini, boyutunu ve anlamını kontrol edin. Raster çizimin geri kazanılması gerekiyorsa bir SVG adayı hazırlayın, şekillerini inceleyin ve varlık ailenize eklemeden önce aynı kontrolleri uygulayın.