Saya mencoba menambahkan gambar dengan sumber SVG ke aplikasi flutter saya.
new AssetImage("assets/images/candle.svg"))
Tapi saya tidak mendapatkan umpan balik visual. Bagaimana cara merender gambar SVG di Flutter?
Jawaban:
Flutter saat ini tidak mendukung SVG. Ikuti masalah 1831 untuk pembaruan.
Jika Anda benar-benar membutuhkan gambar vektor, Anda dapat melihat widget Logo Flutter sebagai contoh cara menggambar menggunakan CanvasAPI, atau rasterisasi gambar Anda di sisi asli dan berikan ke Flutter sebagai bitmap, tetapi untuk saat ini taruhan terbaik Anda mungkin adalah sematkan gambar aset raster resolusi tinggi.
Font adalah pilihan yang bagus untuk banyak kasus.
Saya sedang mengerjakan perpustakaan untuk merender SVG di kanvas, tersedia di sini: https://github.com/dnfield/flutter_svg
API yang sekarang akan terlihat seperti ini
new SvgPicture.asset('asset_name.svg')
untuk merender asset_name.svg (berukuran induknya, misalnya a SizedBox). Anda juga dapat menentukan colordan blendModeuntuk mewarnai aset ..
Sekarang tersedia di pub dan berfungsi dengan minimal Flutter versi 0.3.6. Ini menangani banyak kasus tetapi tidak semuanya - lihat repo GitHub untuk pembaruan dan masalah file.
Masalah GitHub asli yang dirujuk oleh Colin Jackson sebenarnya tidak dimaksudkan untuk difokuskan terutama pada SVG di Flutter. Saya membuka masalah lain di sini untuk itu: https://github.com/flutter/flutter/issues/15501
Canvasmetode.
Pengembang dari komunitas Flutter membuat lib untuk menangani file svg. Kita bisa menggunakannya sebagai
new SvgPicture.asset(
'assets/images/candle.svg',
height: 20.0,
width: 20.0,
allowDrawingOutsideViewBox: true,
),
Saya menemukan contoh kecil implementasi SVG di sini .
Solusi untuk saat ini adalah menggunakan font
fonts:
- family: icomoon
fonts:
- asset: assets/fonts/icomoon.ttf
Penggunaan
static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');
Ganti ### mis. (906)
Anda dapat mengikuti langkah
- langkah di bawah ini - kunjungi http://fluttericon.com
- unggah ikon SVG Anda
- klik tombol unduh
- Anda akan mendapatkan dua file
1. iconname.dart
2. file font iconname.ttf
- gunakan file ini di flutter & impor iconname.dart
Anda dapat menggunakan suar untuk membuat animasi dan hanya mengimpor .flr sebagai aset
import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
}
}
kunjungi flare_flutter https://pub.dev/packages/flare_flutter
Anda dapat menggunakan perpustakaan ini untuk merender Gambar SVG - https://pub.dev/packages/flutter_svg
Contoh -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
flutter_svg 0.14.0paket yang mudah digunakan itu berfungsi seperti pesona info lebih lanjut di sini pub.dev/packages/flutter_svg , semua berkat orang ini github.com/dnfield yang mem-porting logika rendering svg chrome ke dart