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

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

2

Sie können diese Bibliothek zum Rendern von SVG-Bildern verwenden - https://pub.dev/packages/flutter_svg

Beispiel -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)

— Robin
quelle