webentwicklung-frage-antwort-db.com.de

Flattern SVG-Rendering

Ich habe versucht, meiner Flatter-Anwendung 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?

30
Arash

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 Widget Flutter Logo als Beispiel dafür verwenden, wie Sie mit der Canvas - API zeichnen oder Ihr Bild auf der nativen Seite rastern und als Bitmap an Flutter übergeben Am besten ist es, hochauflösende gerasterte Asset-Bilder einzubetten.

23
Collin Jackson

Schriften sind für viele Fälle eine gute Option.

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

Die API von jetzt an würde ungefähr so ​​aussehen

new SvgPicture.asset('asset_name.svg')

zur Darstellung von asset_name.svg (in der Größe des übergeordneten Elements, z. B. einer SizedBox). Sie können auch eine color und blendMode angeben, um das Asset zu färben.

Es ist jetzt im Pub verfügbar und arbeitet mit einem Minimum von Flutter-Version 0.3.6. Es behandelt eine Reihe von Fällen, aber nicht alles - das GitHub-Repo enthält Updates und Probleme mit Dateien.

Die ursprüngliche GitHub-Ausgabe, auf die Colin Jackson verwiesen hat, ist nicht unbedingt auf SVG in Flutter ausgerichtet. Ich habe hier eine andere Ausgabe aufgeschlagen: https://github.com/flutter/flutter/issues/15501

16
Dan Field

Flutter hat eine neue lib flutter_svg: ^ 0.5.0` für svg-Handle erstellt. Wir können es als verwenden

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

Die Problemumgehung ist jetzt die Verwendung von Schriftarten

https://icomoon.io/

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

Nutzung

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

Ersetzen Sie das ### zB (906)

10
Victor Tong

Schritt 1:

flutter_svg: ^0.12.4

Schritt 2:

import 'package:flutter_svg/flutter_svg.Dart';

Schritt 3:

SizedBox.fromSize(
      child:  SvgPicture.asset(
        'assets/empty.svg',
      ),
      size: Size(300.0, 400.0),
    ),     
5
Alan John

pubspeck.yaml

dependencies:
    flutter_svg: ^0.12.4

Code: Stapeln und Positionieren, um die absolute Position des SVG festzulegen

        Stack(
            children: <Widget>[
              Positioned(
                  right: 0,
                  child: IconButton(
                    icon: SvgPicture.asset('assets/profileView/iconAjustes.svg',
                        height: 30,
                        width: 30,
                        color: Colors.white, 
                        semanticsLabel: 'Ajustes Logo'
                      ),
                    onPressed: _onPrefsButtonPressed,
                  )
              ),
            ],
          )

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

1
primeChandi

hi du kannst das Plugin "flutter_svg" verwenden: https://pub.dartlang.org/packages/flutter_svg

Einfach und einfach können Sie auch die Farbe von SVG ändern.

final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = new SvgPicture.asset(
     assetName,
     color: Colors.red,
     semanticsLabel: 'A red up arrow'
);
0