J'ai essayé d'ajouter une image avec une source SVG à mon application flutter.
new AssetImage("assets/images/candle.svg"))
Mais je n'ai eu aucun retour visuel. Comment puis-je afficher une image SVG dans Flutter?
Les polices de caractères sont une excellente option pour de nombreux 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 actuelle ressemblerait à quelque chose comme
new SvgPicture.asset('nom_de_l_ressource.svg')pour rendre l'élément nom_de_l_ressource.svg (dimensionné à son parent, par exemple un SizedBox). Vous pouvez également spécifier une couleur et un mode_de_mélange pour teinter la ressource.
Elle est désormais disponible sur pub et fonctionne avec un minimum de la version Flutter 0.3.6. Elle gère un tas de cas mais pas tout - consultez le dépôt GitHub pour les mises à jour et pour signaler des problèmes.
L'issue GitHub originale mentionnée par Colin Jackson ne concerne vraiment pas principalement les SVG dans Flutter. J'ai ouvert une autre issue ici pour cela : https://github.com/flutter/flutter/issues/15501
Un peu hors sujet mais est-ce que cela prend en charge iOS? Autant que je sache, iOS prend en charge les vecteurs au format PDF donc je suis juste curieux de savoir si ceci peut être utilisé pour le rendu des vecteurs sur iOS également
Il devrait fonctionner sur n'importe quelle plateforme prise en charge par Flutter. Tout est écrit en Dart en utilisant les méthodes Canvas.
Pourquoi ne prend-il pas en charge la dernière version stable de Flutter au lieu de la version de prévisualisation
Flutter ne prend pas en charge SVG pour le moment. Suivez l'issue 1831 pour les mises à jour.
Si vous avez absolument besoin d'un dessin vectoriel, vous pouvez consulter le widget Flutter Logo comme exemple de la façon de dessiner en utilisant l'API Canvas, ou de rasteriser votre image côté natif et de la passer à Flutter sous forme de bitmap, mais pour l'instant, votre meilleure option est probablement d'intégrer des images d'asset rasterisées en haute résolution.
Aussi, si vous n'avez pas besoin de couleur, vous pouvez toujours suivre le chemin de la police comme le fait le package Icons.
Eh bien après tout, il a juste besoin de rendre une image svg, n'importe quelle bibliothèque svg pourrait le faire comme celle-ci pub.dev/packages/flutter_svg
Les développeurs de la communauté Flutter ont créé une bibliothèque pour gérer les fichiers svg. Nous pouvons l'utiliser comme
new SvgPicture.asset(
'assets/images/candle.svg',
height: 20.0,
width: 20.0,
allowDrawingOutsideViewBox: true,
),J'ai trouvé un petit exemple d'implémentation SVG ici.
Juste pour information - il ne s'agit pas d'un plugin officiel/première partie. Cela dit, il devrait prendre en charge de nombreux cas d'utilisation courants.
La solution temporaire est d'utiliser des polices de caractères
polices:
- famille: icomoon
polices:
- ressource: assets/fonts/icomoon.ttfUtilisation
static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');Remplacer les ### par exemple (906)
Salut vous pouvez utiliser le plugin "flutter_svg" : https://pub.dartlang.org/packages/flutter_svg
Simple et facile, vous pouvez également changer la couleur du SVG.
final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = new SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'Un flèche vers le haut rouge'
); 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.
4 votes
Essayez d'utiliser le paquet
flutter_svg 0.14.0facile à utiliser, ça marche comme un charme plus d'infos ici pub.dev/packages/flutter_svg, tous les remerciements à ce gars github.com/dnfield qui a porté la logique de rendu svg de chrome en dart