44 votes

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?

34voto

Collin Jackson Points 29995

Flutter ne prend pas en charge le format SVG. Suivez problème 1831 pour les mises à jour.

Si vous avez absolument besoin de dessin vectoriel, vous pouvez voir le Flutter Logo widget comme un exemple de la façon de dessiner à l'aide de l' Canvas API, ou de pixellisation de l'image sur le natif de côté et passer à flotter comme une image bitmap, mais pour l'instant, votre meilleur pari est probablement à intégrer à haute résolution pixellisée de l'actif des images.

26voto

Dan Field Points 12945

Les polices sont une excellente option pour beaucoup de cas.

J'ai travaillé sur une bibliothèque de rendu SVGs sur une toile, disponible ici: https://github.com/dnfield/flutter_svg

L'API de plein droit maintenant ressemblerait à quelque chose comme

new SvgPicture.asset('asset_name.svg')

pour rendre asset_name.svg (de la taille de son parent, par exemple, un SizedBox). Vous pouvez également spécifier un color et blendMode de teinture à l'actif..

Il est maintenant disponible sur pub et fonctionne avec un minimum de Flottement version 0.3.6. Il gère un tas de cas, mais pas tout - voir le dépôt GitHub pour les mises à jour et des problèmes de fichiers.

L'original GitHub question référencé par Colin Jackson est vraiment pas destiné à être principalement axé sur les SVG en Flottement. J'ai ouvert un autre sujet ici pour que: https://github.com/flutter/flutter/issues/15501

13voto

Sunil Points 420

Flutter a créé une nouvelle bibliothèque 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,
),
 

12voto

Victor Tong Points 242

Pour le moment, utilisez les 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)

2voto

Arun R. Prajapati Points 101

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'
);
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: