Ho provato ad aggiungere un'immagine con una sorgente SVG alla mia applicazione flutter.
new AssetImage("assets/images/candle.svg"))
Ma non ho ricevuto alcun feedback visivo. Come posso eseguire il rendering di un'immagine SVG in Flutter?
Ho provato ad aggiungere un'immagine con una sorgente SVG alla mia applicazione flutter.
new AssetImage("assets/images/candle.svg"))
Ma non ho ricevuto alcun feedback visivo. Come posso eseguire il rendering di un'immagine SVG in Flutter?
Risposte:
Flutter attualmente non supporta SVG. Segui il numero 1831 per gli aggiornamenti.
Se hai assolutamente bisogno di un disegno vettoriale puoi vedere il widget Flutter Logo come esempio di come disegnare usando l' CanvasAPI, o rasterizzare la tua immagine sul lato nativo e passarla a Flutter come bitmap, ma per ora la soluzione migliore è probabilmente quella di incorporare immagini di asset rasterizzate ad alta risoluzione.
flutter_svgPacchetto utente
I caratteri sono un'ottima opzione per molti casi.
Ho lavorato a una libreria per il rendering di SVG su una tela, disponibile qui: https://github.com/dnfield/flutter_svg
L'API al momento sarebbe simile a
new SvgPicture.asset('asset_name.svg')
per rendere asset_name.svg (dimensionato al suo genitore, ad esempio a SizedBox). Puoi anche specificare un colore blendModeper colorare la risorsa.
È ora disponibile su pub e funziona con un minimo di Flutter versione 0.3.6. Gestisce un sacco di casi ma non tutto: vedere il repository GitHub per aggiornamenti e problemi di file.
Il problema originale di GitHub a cui fa riferimento Colin Jackson non è pensato per essere incentrato principalmente su SVG in Flutter. Ho aperto un altro numero qui per questo: https://github.com/flutter/flutter/issues/15501
Canvasmetodi.
Gli sviluppatori della comunità Flutter hanno creato una libreria per gestire i file svg. Possiamo usarlo come
new SvgPicture.asset(
'assets/images/candle.svg',
height: 20.0,
width: 20.0,
allowDrawingOutsideViewBox: true,
),
Ho trovato un piccolo esempio di implementazione SVG qui .
La soluzione per ora è usare i caratteri
fonts:
- family: icomoon
fonts:
- asset: assets/fonts/icomoon.ttf
Utilizzo
static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');
Sostituisci ### eg (906)
Puoi seguire i passaggi seguenti
: visita http://fluttericon.com
- carica le tue icone SVG
- fai clic sul pulsante di download
- otterrai due file
1. iconname.dart
2. iconname.ttf file font
- usa questo file in flutter & import iconname.dart
Puoi usare Flare per creare animazioni e importare semplicemente .flr come risorsa
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");
}
}
visita flare_flutter https://pub.dev/packages/flare_flutter
È possibile utilizzare questa libreria per il rendering di immagini SVG: https://pub.dev/packages/flutter_svg
Esempio -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
flutter_svg 0.14.0pacchetto semplice da usare funziona come un fascino maggiori informazioni qui pub.dev/packages/flutter_svg , tutto grazie a questo ragazzo github.com/dnfield che ha portato la logica di rendering svg di chrome su dart