Cara Menampilan Gambar SVG Berwarna di Flutter

Hi, jadi kali ini aku mau bahas tentang flutter. Nah temen-temen yang coba memulai desain aplikasi dengan flutter tentunya akan sangat sering juga pakai asset svg. Kenapa? karena file svg itu ga pecah saat dicoba dibanyak device, beda sekali dengan menggunakan image aset perupa png atau jpg pasti dalam resolusi tertentu akan pecah dan kurang maksimal. Jadi saya akan coba buat tulisan Cara Menampilan Gambar SVG Berwarna di Flutter. Flutter menggunakan bahasa dart sekarang banyak sekali digunakan oleh developer, karena dalam sekali kodingan bisa dijadikan aplikasi android, ios atau web. Lalu apa package flutter yang biasa dipakai untuk load SVG, biasanya saya pakai flutter_svg bisa lihat contoh penggunaanya. jangan lupa load asset dulu di pubspec.yaml caranya adalah dengan menambahkan path dari svg kita di file pubspec.yaml

assets:

  - images/

  - assets/cfg/

  - assets/images/

cari tulisan assets di pubspec.yaml, hilangkan tanda # jika ada. Kemudian deklarasikan folder tempat asset gambar. Saya disini ga deklarasiin satu-satu ya, dulu sebelum tau satu-satu aset kita masukkan ke sini, padahal kita bisa masukkan langsung sekaligus folder yang berisi aset gambar/ icon kita.

dependencies:

  flutter:

    sdk: flutter

  flutter_svg: ^0.17.4

kemudian jika lakukan perintah flutter pub get untuk load dependencies dan asset. Kode untuk load svg, itu hanya garis besar ya, karena tutorial ini khususn pembahasan load svg saja bukan ke layouting, jika teman-teman perlu tutorial untuk layouting bisa komen dibawah ini dan nanti saya akan buatkan tutorial lengkapnya. Karena saya bikin itu tujuannya buat yang mencari kenapa saya load svg tapi waranya jadi hitam padahal itu full color dibuka di chrome, namun saat di load ke flutter malah warna hitam semua. Saya cari-cari tutorial masih belum ketemu solusinya, salahsatunya adalah dengan menambahkan param color di svgpicturenya namun hanya bisa satu warna, dan itu akan sulit jika svg kita full color atau lebih dari 1 warna.

import 'package:flutter_svg/svg.dart'; SvgPicture.asset( 'assets/images/motor.svg',)

Nah setelah coba code seperti di documentation dan diatas warnanya kenapa bisa hitam? ternyata setelah saya lihat svg file dan inspect elemet file svg nya dia menerapkan dan salahsatu isian svgnya seperti ini, huruf ... artinya ada kode lain sebelum atau setelah itu ya, saya ga full copy codenya

...<style xmlns="http://www.w3.org/2000/svg">.cls-1{fill:#f9f8f7;}.cls-2{fill:#fc0;}.cls-3{fill:#413661;}</style> ... <circle xmlns="http://www.w3.org/2000/svg" class="cls-3" cx="39.06" cy="94.53" r="20.3"/> ...

Otomatis itu tidak akan terbaca di flutter, yang harus dilakukan adalah tidak menyimpan parameter warna di style dan mengganti menjadi :

<circle xmlns="http://www.w3.org/2000/svg" fill="#413661" cx="39.06" cy="94.53" r="20.3"/>

maka warnanya akan muncul dan tidak hanya hitam saja, semua warna bisa ditampilkan. Jadi kalau file svg kamu yang tampil di flutter tidak sesuai harapan coba cek lagi file svg nya. Nah sekian saja tutorial Cara Menampilan Gambar SVG Berwarna di Flutter semoga membantu bagi yang mencari infonya.

Share this post