Gambar SVG Flutter: Bundel, Atur Ukuran, dan Periksa Aset

Untuk menampilkan aset SVG dalam Flutter, tambahkan flutter_svg, deklarasikan file dalam pubspec.yaml, dan muat path yang sama dengan SvgPicture.asset. Berikan dimensi widget atau batasan tata letak yang sesuai, lalu periksa artwork dalam aplikasi. Konstruktor asset paket mendokumentasikan jalur pemuatan tersebut.

Pisahkan dua pertanyaan: apakah aplikasi memuat file yang dimaksudkan, dan apakah renderer mereproduksi artwork yang dimaksudkan? Mengekspor ulang gambar tidak memperbaiki kunci aset yang salah eja. Memperbaiki kunci tidak menyederhanakan efek yang tidak didukung.

Panduan ini menggunakan ilustrasi bukit dan matahari orisinal agar pemeriksaan tersebut mudah dilakukan. Kode mengikuti API yang didokumentasikan; ini bukan laporan pengujian aplikasi yang dikompilasi.

Mulai dengan sumber kecil yang dapat Anda periksa

Buat assets/illustrations/hills.svg dalam proyek Flutter Anda:

<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>

Sumber memiliki dua bukit segitiga yang tumpang tindih dan matahari amber terpisah. Sumber menggunakan isian eksplisit, tidak memiliki teks atau gambar tertaut, dan menyisakan celah terlihat antara matahari dan bukit. Detail itu memberikan daftar penerimaan pendek ketika memeriksa aplikasi.

Simpan salinan file sederhana ini sambil memperkenalkan artwork Anda sendiri nanti. Jika sumber kecil berfungsi tetapi penggantinya gagal, bandingkan strukturnya sebelum mengubah seluruh penyiapan pemuatan.

Aset SVG Flutter juga merupakan jalur penyerahan berbeda dari XML VectorDrawable Android. Jika tujuan Anda adalah drawable Android native, gunakan panduan persiapan VectorDrawable Android alih-alih memperlakukan kedua format file dapat dipertukarkan.

Tambahkan paket dan deklarasikan file yang persis sama

Dari root proyek Flutter, gunakan perintah instalasi resmi:

flutter pub add flutter_svg

Kemudian tambahkan entri aset ini di bawah bagian flutter: yang sudah ada dalam pubspec.yaml:

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

Gabungkan entri ke konfigurasi saat ini alih-alih membuat bagian flutter: kedua. Pertahankan indentasi yang ditunjukkan. Dokumentasi aset Flutter mendefinisikan path ini relatif terhadap pubspec.yaml dan menjelaskan bagaimana file yang dicantumkan masuk ke bundle aplikasi.

Gunakan ejaan, kapitalisasi, dan struktur direktori yang sama dalam nama file, deklarasi, dan pemanggilan Dart. Untuk pemeriksaan pertama ini, entri file eksplisit lebih mudah dibandingkan daripada entri folder luas. Jika Anda kemudian mendeklarasikan direktori, Flutter mendokumentasikan bahwa entri direktori mencakup file langsungnya; direktori bersarang membutuhkan entri sendiri.

Setelah mengubah konfigurasi aset, build ulang dan jalankan aplikasi dengan alur kerja pengembangan normal. Jangan menganggap file yang terlihat di editor sudah disertakan dalam aplikasi yang sedang Anda lihat.

Muat artwork ke kotak yang didefinisikan

Tambahkan impor ini ke file Dart yang berisi widget Anda:

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

Letakkan widget ini dalam bagian layar yang sesuai:

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'),
)

Kotak mengikuti proporsi sumber. Periksa matahari terpisah, kedua warna bukit, dan margin luar sebelum mencoba ukuran lebih kecil. Kemudian gunakan dimensi yang dibutuhkan komponen sebenarnya; angka di atas adalah contoh, bukan ukuran minimum atau rekomendasi performa.

Dokumentasi konstruktor merekomendasikan dimensi eksplisit atau batasan tata letak ketat agar pemuatan tidak mengubah tata letak secara tak terduga. Jika artwork terlihat terlalu kecil dalam kotak, periksa ruang kosong dalam viewBox serta dimensi widget.

Label mendeskripsikan tujuan gambar mandiri ini. API semanticsLabel menghubungkannya ke label semantis gambar. Untuk gambar dekoratif di samping teks yang sudah menyampaikan makna, pertimbangkan mengecualikan gambar dari semantik. Opsi excludeFromSemantics konstruktor diprioritaskan atas labelnya. Tinjau makna lisan seluruh komponen alih-alih melabeli setiap bentuk secara terpisah.

Bedakan placeholder pemuatan dari error

Indikator pemuatan bukan bukti bahwa SVG diterima. Paket menyediakan placeholderBuilder untuk periode pengambilan atau dekode, sedangkan API errorBuilder saat ini menyediakan widget ketika pemuatan gambar gagal.

Contoh di atas menggunakan fallback teks pendek. Selama pengembangan, sengaja ubah path Dart ke nama file yang tidak ada dan periksa bahwa Anda dapat mengenali kegagalan. Pulihkan path benar sebelum melanjutkan. Ini menguji presentasi kegagalan tanpa mengubah gambar itu sendiri.

Kemudian uji sumber sebenarnya. Jika masih gagal, periksa output diagnostik dan bandingkan path yang dideklarasikan terlebih dahulu. Contoh jaringan yang kebetulan menampilkan SVG berbeda tidak membuktikan bahwa file lokal Anda dibundel atau fiturnya didukung.

Tentukan apakah mempertahankan palet atau menerapkan tint

Biarkan colorFilter tidak diatur ketika bukit harus tetap hijau kebiruan dan biru tua dengan matahari amber. Untuk perlakuan satu warna yang disengaja, tambahkan filter seperti:

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

Paket mendokumentasikan pola tint ini. Referensi BlendMode Flutter menjelaskan bahwa srcIn menggunakan opacity tujuan sambil mengabaikan kanal warnanya. Karena itu, tint seragam menghapus perbedaan palet sumber; itu pilihan desain, bukan perbaikan pelestarian warna.

Untuk bukit, periksa apakah hilangnya kontras antara dua segitiga yang tumpang tindih membuat ilustrasi lebih sulit dibaca. Pertahankan palet asli jika wilayah itu perlu tetap berbeda. Paket juga mendokumentasikan ColorMapper untuk substitusi selektif, tetapi mulailah dengan kasus tanpa filter yang lebih sederhana saat mendiagnosis ketidaksesuaian.

Sederhanakan fitur hanya setelah file dimuat

Dokumentasi flutter_svg merekomendasikan atribut presentasi ketika mengekspor dari Illustrator karena dukungan CSS belum lengkap, dan gambar tertanam alih-alih tertaut eksternal. Paket juga menyediakan pemeriksaan kompatibilitas berbasis compiler. Ikuti pemeriksaan itu dalam lingkungan Flutter/Dart sendiri ketika aset kompleks perlu diselidiki.

Pratinjau browser adalah referensi berguna untuk tampilan yang dimaksudkan; pratinjau tidak membuktikan bahwa setiap fitur SVG akan dirender identik melalui paket. Pertahankan artwork asli dan sederhanakan salinan satu perubahan setiap kali.

Jika sumber berisi tulisan, tentukan apakah tulisan harus tetap menjadi teks aplikasi atau artwork tetap. Panduan perubahan font SVG menjelaskan mengapa tampilan dapat bergantung pada penanganan teks dan font. Jangan menelusuri label hanya untuk menyelesaikan masalah path aset.

Untuk keluarga aset UI, bandingkan ukuran visual dan jaraknya bersama. Panduan persiapan ikon kit UI membantu pemeriksaan konsistensi itu.

Gunakan vektorisasi ketika sumber membutuhkan pemulihan

Pertahankan SVG bersih yang sudah ada. Foto atau latar belakang bertekstur mungkin lebih baik diserahkan sebagai aset raster yang sesuai; mengubah ekstensi tidak membuatnya menjadi geometri vektor berguna.

Jika ilustrasi sederhana hanya tersisa sebagai PNG kasar, alur kerja PNG-ke-SVG PerfectVector dapat membantu menyiapkan kandidat yang dapat diedit. Crop ke artwork, periksa pratinjau untuk bentuk hilang dan wilayah latar belakang yang tidak diinginkan, dan unduh SVG. Tambahkan file tersebut ke bundle aplikasi dan ulangi pemeriksaan pemuatan, palet, ukuran, dan semantik.

Untuk contoh bukit, cari matahari terpisah dan pemisahan antara dua lereng berwarna. Pastikan file berisi struktur yang Anda maksudkan; panduan raster tertanam menjelaskan mengapa pembungkus SVG masih dapat berisi piksel.

Nilai aset dalam aplikasi sebelum memilih strategi optimasi. Alur kerja ini tidak menjanjikan secara umum bahwa SVG lebih kecil atau lebih cepat daripada PNG.

Jika Anda menggunakan ulang artwork dalam aplikasi .NET MAUI, ikuti alur kerja sumber-ke-PNG MAUI. Proyek mempertahankan master SVG sementara view merujuk PNG yang disiapkan selama build.

FAQ

Bagaimana cara menambahkan gambar SVG ke Flutter? Tambahkan flutter_svg, deklarasikan aset SVG dalam pubspec.yaml, dan muat path yang cocok dengan SvgPicture.asset. Tetapkan dimensi atau batasan yang sesuai dan periksa hasil.

Mengapa SVG lokal saya tidak muncul? Periksa deklarasi aset, path persisnya, error pemuatan, dan tata letak terlebih dahulu. Jika sumber sederhana berfungsi, bandingkan struktur dan fitur yang didukung dari artwork yang gagal.

Mengapa semua warna menjadi sama? Filter warna srcIn seragam mengganti palet terlihat dengan tint-nya. Hapus filter tersebut ketika warna asli harus tetap berbeda.

Apakah saya harus mengubah PNG menjadi SVG untuk Flutter? Tidak. Gunakan aset raster yang sesuai ketika cocok dengan artwork. Vektorisasi opsional ketika memulihkan bentuk yang dapat diedit dari sumber raster sederhana.

Sources

1. flutter_svg — Instalasi — Instalasi paket dan impor Dart.
2. Flutter — Menambahkan aset dan gambar — Deklarasi aset, path, dan pembundelan.
3. flutter_svg — SvgPicture.asset — Pemuatan aset, dimensi, penyesuaian, dan kontrol semantik.
4. flutter_svg — errorBuilder — Presentasi kegagalan yang berbeda dari placeholder pemuatan.
5. flutter_svg — semanticsLabel — Tujuan semantis gambar.
6. Flutter — BlendMode — Perlakuan warna srcIn berbasis opacity.
7. flutter_svg — Dokumentasi paket — Tint, pemetaan warna selektif, panduan ekspor, dan pemeriksaan kompatibilitas.

Mulailah dengan satu aset yang dideklarasikan dan periksa path, palet, ukuran, dan maknanya dalam aplikasi. Jika ilustrasi raster membutuhkan pemulihan, siapkan kandidat SVG, periksa bentuknya, dan jalankan pemeriksaan yang sama sebelum menambahkannya ke keluarga aset Anda.