Flottement de rendu SVG

J'ai essayé d'ajouter une image avec une SVG source de mon flottement de l'application.

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

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

InformationsquelleAutor Arash | 2017-05-20

40

Flutter ne prend pas en charge le format SVG. Suivez question 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 la 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é actif images.
- Aussi, si vous n'avez pas besoin de couleur, vous pouvez toujours aller à la police de la route la façon dont les Icônes colis n'.
InformationsquelleAutor Collin Jackson
30

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')
```
de 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..

Elle 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 les problèmes de fichier.

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
- Un peu hors sujet mais est ce que cela a prise en charge d'iOS? Autant que je sache, iOS prend en charge les vecteurs en format PDF, donc je suis juste curieux de savoir si cela peut être utilisé pour le rendu de vecteurs sur iOS ainsi
- Il devrait fonctionner sur n'importe quelle plateforme de Flottement prend en charge. C'est écrit dans le Dard à l'aide de Canvas méthodes.
InformationsquelleAutor Dan Field
16

Les développeurs de l'émoi de la communauté a créé une lib 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 de SVG mise en œuvre ici.
- Juste pour info, ce n'est pas un officiel/première partie plugin. Cela dit, il devrait aider beaucoup de cas d'utilisation courants.
InformationsquelleAutor Sunil

Le contourner pour l'instant est d'utiliser des polices

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

Useage

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

Remplacer le ### eg (906)

essayez de fluttericon.com

InformationsquelleAutor Victor Tong

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

Simple et Facile, ainsi vous pouvez 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'
);

InformationsquelleAutor Arun R. Prajapati

Étape 1:

flutter_svg: ^0.12.4

Étape 2:

import 'package:flutter_svg/flutter_svg.dart';

Étape 3:

SizedBox.fromSize(
      child:  SvgPicture.asset(
        'assets/empty.svg',
      ),
      size: Size(300.0, 400.0),
    ),

InformationsquelleAutor Alan John

pubspeck.yaml

dependencies:
    flutter_svg: ^0.12.4

Code: Pile et Positionné pour définir la position absolue de l'svg

        Stack(
            children: <Widget>[
              Positioned(
                  right: 0,
                  child: IconButton(
                    icon: SvgPicture.asset('assets/profileView/iconAjustes.svg',
                        height: 30,
                        width: 30,
                        color: Colors.white, 
                        semanticsLabel: 'Ajustes Logo'
                      ),
                    onPressed: _onPrefsButtonPressed,
                  )
              ),
            ],
          )

InformationsquelleAutor Jose Remolar Gallén

Vous pouvez utiliser les reflets pour créer des animations et il suffit d'importer .flr comme un atout

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");
  }
}

visite flare_flutter https://pub.dev/packages/flare_flutter

InformationsquelleAutor primeChandi

Vous devez vous connecter pour publier un commentaire.