web-dev-qa-db-fra.com

Rendu SVG Flutter

J'ai essayé d'ajouter une image avec une source SVG à mon application Flutter.

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

Mais je n'ai reçu aucun retour visuel. Comment puis-je rendre une image SVG dans Flutter?

dartflutter
30
Arash

Flutter ne prend actuellement pas en charge le format SVG. Suivez numéro 1831 pour les mises à jour.

Si vous avez absolument besoin de dessins vectoriels, vous pouvez voir le widget Logo Flutter pour illustrer comment dessiner à l'aide de l'API Canvas ou pixelliser votre image du côté natif et la transmettre à Flutter en tant Le mieux est probablement d’incorporer des images d’images rasterisées haute résolution.

23
Collin Jackson

Les polices sont une excellente option pour beaucoup de cas.

J'ai travaillé sur une bibliothèque pour rendre des SVG sur un canevas, disponible ici: https://github.com/dnfield/flutter_svg

L'API de maintenant ressemblerait à quelque chose comme

new SvgPicture.asset('asset_name.svg')

rendre asset_name.svg (redimensionné en son parent, par exemple une SizedBox). Vous pouvez également spécifier color et blendMode pour teinter l’actif.

Il est maintenant disponible sur pub et fonctionne avec un minimum de la version 0.3.6 de Flutter. Il gère un grand nombre de cas, mais pas tout - voir le référentiel GitHub pour les mises à jour et les problèmes de fichiers.

Le problème original de GitHub référencé par Colin Jackson n’est pas vraiment destiné à être principalement axé sur SVG dans Flutter. J'ai ouvert un autre numéro ici pour cela: https://github.com/flutter/flutter/issues/15501

16
Dan Field

Flutter a créé une nouvelle lib flutter_svg: ^ 0.5.0` pour les fichiers de gestion svg. Nous pouvons l'utiliser comme

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

Pour le moment, utilisez des polices.

https://icomoon.io/

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

Utilisation

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

Remplacez le ### eg (906)

10
Victor Tong

salut vous pouvez utiliser le plugin "flutter_svg": https://pub.dartlang.org/packages/flutter_svg

Simple et facile, vous pouvez aussi changer la couleur de SVG.

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