Rendu SVG Flutter

90

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?

dart flutter Arash
la source
4
essayez d'utiliser un flutter_svg 0.14.0 package 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
maheshmnj

Réponses:

63

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.

Collin Jackson
la source
De plus, si vous n'avez pas besoin de couleur, vous pouvez toujours suivre l'itinéraire des polices comme le fait le package Icons.
prodaea
après tout, il doit simplement rendre une image svg que n'importe quelle bibliothèque svg pourrait faire comme celle-ci pub.dev/packages/flutter_svg
maheshmnj
le numéro est ouvert depuis le 13 février 2016. combien de temps faut-il attendre?
BloodLoss
70

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

Dan Field
la source
Un peu hors sujet mais cela prend-il en charge iOS? Pour autant que je sache, iOS prend en charge les vecteurs au format PDF, donc je suis juste curieux de savoir si cela peut également être utilisé pour le rendu de vecteurs sur iOS
MRainzo
3
Cela devrait fonctionner sur toutes les plates-formes prises en charge par Flutter. Tout est écrit en Dart à l'aide de Canvasméthodes.
Dan Field le
1
pourquoi ne prend-il pas en charge le dernier flutter stable à la place aperçu
minigeek
Bonjour Dan, Pouvez-vous également ajouter le support pour - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? flutter prend-il en charge dart2? Je veux avoir plusieurs SVGElements tous combinés dans une grande chaîne sérialisée, puis utiliser votre bibliothèque pour rendre le SVG
abhijat_saxena
dart: svg est utilisé avec HTML et dart2js. C'est très différent de ça.
Dan Field le
25

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 .

Sunil
la source
5
Juste pour info - ce n'est pas un plugin officiel / de première partie. Cela dit, il devrait prendre en charge de nombreux cas d'utilisation courants.
Dan Field
21

Le travail autour pour l'instant est d'utiliser 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 ### par exemple (906)

Victor Tong
la source
9

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

Nandakishor Valakunde
la source
3

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

primeChandi
la source