J'ai essayé d'ajouter une image avec une source SVG à mon application de flutter.
new AssetImage("assets/images/candle.svg"))
Mais je n'ai eu aucun retour visuel. Comment puis-je rendre une image SVG dans Flutter?
Réponses:
Flutter ne prend actuellement pas en charge SVG. Suivez le numéro 1831 pour les mises à jour.
Si vous avez absolument besoin d'un dessin vectoriel, vous pouvez voir le widget Flutter Logo comme un exemple de comment dessiner à l'aide de l' CanvasAPI, ou pixelliser votre image du côté natif et la transmettre à Flutter sous forme de bitmap, mais pour l'instant, votre meilleur pari est probablement de incorporer des images d'actifs matricielles haute résolution.
Les polices sont une excellente option dans 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 à partir de maintenant ressemblerait à quelque chose comme
new SvgPicture.asset('asset_name.svg')
pour rendre asset_name.svg (dimensionné à son parent, par exemple a SizedBox). Vous pouvez également spécifier un coloret blendModepour teinter la ressource.
Il est maintenant disponible sur pub et fonctionne avec au minimum la version 0.3.6 de Flutter. Il gère un certain nombre de cas, mais pas tout - consultez le référentiel GitHub pour les mises à jour et les problèmes de fichier.
Le problème GitHub original référencé par Colin Jackson n'est vraiment pas censé être principalement axé sur SVG dans Flutter. J'ai ouvert un autre numéro ici pour cela: https://github.com/flutter/flutter/issues/15501
Canvasméthodes.
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 .
Le travail autour pour l'instant est d'utiliser des polices
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 ### par exemple (906)
Vous pouvez suivre les étapes ci-dessous
- visitez http://fluttericon.com
- téléchargez vos icônes SVG
- cliquez sur le bouton de téléchargement
- vous obtiendrez deux fichiers
1. iconname.dart
2. iconname.ttf fichier de police
- utilisez ce fichier dans flutter & import iconname.dart
Vous pouvez utiliser Flare pour créer des animations et simplement importer .flr en tant qu'actif
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");
}
}
visitez flare_flutter https://pub.dev/packages/flare_flutter
Vous pouvez utiliser cette bibliothèque pour rendre les images SVG - https://pub.dev/packages/flutter_svg
Exemple -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
flutter_svg 0.14.0package simple à utiliser cela fonctionne comme un charme plus d'infos ici pub.dev/packages/flutter_svg , tout cela grâce à ce gars github.com/dnfield qui a porté la logique de rendu svg de chrome sur dart