Flattern SVG-Rendering

90

Ich habe versucht, meiner Flatteranwendung ein Bild mit einer SVG-Quelle hinzuzufügen.

new AssetImage("assets/images/candle.svg"))

Aber ich habe kein visuelles Feedback bekommen. Wie kann ich ein SVG-Bild in Flutter rendern?

dart flutter Arash
quelle
4
Versuchen Sie es mit einem einfach zu bedienenden flutter_svg 0.14.0 Paket. Es funktioniert wie Charme. Weitere Informationen finden Sie hier. pub.dev/packages/flutter_svg , alles dank dieses Typen github.com/dnfield , der die SVG-Rendering-Logik des
Chroms

Antworten:

63

Flutter unterstützt SVG derzeit nicht. Folgen Sie der Ausgabe 1831 für Updates.

Wenn Sie unbedingt eine Vektorzeichnung benötigen, können Sie das Flutter-Logo-Widget als Beispiel für das Zeichnen mit der CanvasAPI sehen oder Ihr Bild auf der nativen Seite rastern und als Bitmap an Flutter übergeben. Im Moment ist es jedoch wahrscheinlich die beste Wahl Betten Sie hochauflösende gerasterte Asset-Bilder ein.

Collin Jackson
quelle
Auch wenn Sie keine Farbe benötigen, können Sie die Schriftroute immer so ausführen, wie es das Icons-Paket tut.
Prodaea
Nun,
maheshmnj
Die Ausgabe ist seit dem 13. Februar 2016 geöffnet. Wie lange müssen wir warten?
BloodLoss
@BloodLoss Schau dir die Antwort von Dan Field an. flutter_svgBenutzerpaket
kovalyovi
73

Schriftarten sind in vielen Fällen eine gute Option.

Ich habe an einer Bibliothek gearbeitet, um SVGs auf einer Leinwand zu rendern, die hier verfügbar ist: https://github.com/dnfield/flutter_svg

Die API würde ab sofort ungefähr so ​​aussehen

new SvgPicture.asset('asset_name.svg')

um render_name.svg zu rendern (Größe auf das übergeordnete Element, z SizedBox. B. a ). Sie können auch ein colorund angebenblendMode zum Abtönen des Assets .

Es ist jetzt im Pub erhältlich und funktioniert mit einem Minimum von Flutter Version 0.3.6. Es behandelt eine Reihe von Fällen, aber nicht alles - Updates und Dateien finden Sie im GitHub-Repo.

Die ursprüngliche GitHub-Ausgabe, auf die Colin Jackson verweist, soll sich eigentlich nicht in erster Linie auf SVG in Flutter konzentrieren. Ich habe hier eine andere Ausgabe dafür geöffnet: https://github.com/flutter/flutter/issues/15501

Dan Field
quelle
Ein wenig abseits des Themas, aber hat dies iOS-Unterstützung? Soweit ich weiß, unterstützt iOS Vektoren im PDF-Format, daher bin ich nur gespannt, ob dies auch zum Rendern von Vektoren unter iOS verwendet werden kann
MRainzo
3
Es sollte auf jeder Plattform funktionieren, die Flutter unterstützt. Es ist alles in Dart mit CanvasMethoden geschrieben.
Dan Field
1
Warum unterstützt es nicht den neuesten Flatterstall statt Vorschau
Minigeek
Hallo Dan, kannst du auch Unterstützung für - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html hinzufügen ? Hat Flutter Unterstützung für Dart2? Ich möchte mehrere SVGElements zu einer großen serialisierten Zeichenfolge zusammenfassen und dann Ihre Bibliothek verwenden, um die SVG
abhijat_saxena
dart: svg wird mit HTML und dart2js verwendet. Es ist ganz anders als das.
Dan Field
25

Entwickler aus der Flutter-Community haben eine Bibliothek für den Umgang mit SVG-Dateien erstellt. Wir können es als verwenden

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

Ich habe hier ein kleines Beispiel für die SVG- Implementierung gefunden .

Sunil
quelle
5
Nur zu Ihrer Information - dies ist kein offizielles Plugin / Erstanbieter-Plugin. Das heißt, es sollte viele gängige Anwendungsfälle unterstützen.
Dan Field
21

Die Problemumgehung besteht derzeit darin, Schriftarten zu verwenden

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

Verwendung

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

Ersetzen Sie das ### zB (906)

Victor Tong
quelle
Wie kann ich das nutzen? Nehmen wir an, ich habe eine SVG-Datei in Asset / SVG / MySVG.SVG. Ich kann das Hex nicht durch den Pfad ersetzen. 1. Argument ist ein int.
FrontMobe
9

Sie können die folgenden Schritte ausführen
- besuchen Sie http://fluttericon.com
- laden Sie Ihre SVG-Symbole hoch
- klicken Sie auf den Download-Button
- Sie erhalten zwei Dateien
1. iconname.dart
2. iconname.ttf-Schriftartdatei
- verwenden Sie diese Datei in flutter & importiere iconname.dart

Nandakishor Valakunde
quelle
3

Sie können Flare verwenden, um Animationen zu erstellen und einfach .flr als Asset zu importieren

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");
  }
}

Besuchen Sie flare_flutter https://pub.dev/packages/flare_flutter

primeChandi
quelle