Flutter rendering SVG

90

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?

dart flutter Arash
sumber
4
coba gunakan flutter_svg 0.14.0 paket 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
maheshmnj

Jawaban:

63

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.

Collin Jackson
sumber
Juga jika Anda tidak membutuhkan warna, Anda selalu dapat menggunakan rute font seperti yang dilakukan paket Ikon.
prodaea
bagaimanapun juga dia hanya perlu membuat gambar svg yang dapat dilakukan oleh perpustakaan svg seperti ini pub.dev/packages/flutter_svg
maheshmnj
masalah terbuka sejak 13 Feb 2016. berapa lama kita harus menunggu?
BloodLoss
71

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

Dan Field
sumber
Sedikit keluar dari topik tetapi apakah ini memiliki dukungan iOS? Sejauh yang saya tahu, iOS mendukung vektor dalam format PDF jadi saya hanya ingin tahu apakah ini dapat digunakan untuk merender vektor di iOS juga
MRainzo
3
Ini harus berfungsi pada platform apa pun yang mendukung Flutter. Semuanya ditulis dalam Dart menggunakan Canvasmetode.
Dan Field
1
mengapa tidak mendukung flutter stable terbaru sebagai gantinya pratinjau
minigeek
Hai Dan, Bisakah Anda juga menambahkan dukungan untuk - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? apakah flutter memiliki dukungan dart2? Saya ingin memiliki beberapa SVGElements yang semuanya digabungkan menjadi satu string berseri besar dan kemudian menggunakan perpustakaan Anda untuk membuat SVG
abhijat_saxena
dart: svg digunakan dengan HTML dan dart2js. Ini sangat berbeda dari ini.
Dan Field
25

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 .

Sunil
sumber
5
FYI - ini bukan resmi / plugin pihak pertama. Karena itu, itu harus mendukung banyak kasus penggunaan umum.
Dan Field
21

Solusi untuk saat ini adalah menggunakan font

https://icomoon.io/

  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)

Victor Tong
sumber
9

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

Nandakishor Valakunde
sumber
3

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

primeChandi
sumber