Renderizado de Flutter SVG

90

Intenté agregar una imagen con una fuente SVG a mi aplicación Flutter.

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

Pero no recibí ningún comentario visual. ¿Cómo puedo renderizar una imagen SVG en Flutter?

dart flutter Arash
fuente
4
intente usar un flutter_svg 0.14.0 paquete simple de usar , funciona como un encanto, más información aquí pub.dev/packages/flutter_svg , todo gracias a este tipo github.com/dnfield que transfirió la lógica de renderizado svg de Chrome a dart
maheshmnj

Respuestas:

63

Flutter actualmente no es compatible con SVG. Siga el número 1831 para obtener actualizaciones.

Si es absolutamente necesario un dibujo vectorial, puede ver el widget del logotipo de Flutter como un ejemplo de cómo dibujar usando la CanvasAPI, o rasterizar su imagen en el lado nativo y pasarla a Flutter como un mapa de bits, pero por ahora su mejor opción es probablemente incrustar imágenes de activos rasterizadas de alta resolución.

Collin Jackson
fuente
Además, si no necesita color, siempre puede seguir la ruta de la fuente como lo hace el paquete de iconos.
prodaea
bueno, después de todo, necesita simplemente renderizar una imagen svg que cualquier biblioteca de svg podría hacer como esta pub.dev/packages/flutter_svg
maheshmnj
el problema está abierto desde el 13 de febrero de 2016. ¿Cuánto tiempo debemos esperar?
BloodLoss
70

Las fuentes son una gran opción para muchos casos.

He estado trabajando en una biblioteca para renderizar SVG en un lienzo, disponible aquí: https://github.com/dnfield/flutter_svg

La API a partir de ahora se vería algo así como

new SvgPicture.asset('asset_name.svg')

para representar asset_name.svg (tamaño a su padre, por ejemplo, a SizedBox). También puede especificar un coloryblendMode para teñir el activo.

Ahora está disponible en pub y funciona como mínimo con la versión 0.3.6 de Flutter. Maneja una gran cantidad de casos, pero no todos; consulte el repositorio de GitHub para obtener actualizaciones y problemas de archivos.

El problema original de GitHub al que hace referencia Colin Jackson no está destinado a centrarse principalmente en SVG en Flutter. Abrí otro problema aquí para eso: https://github.com/flutter/flutter/issues/15501

Dan Field
fuente
Un poco fuera de tema, pero ¿es compatible con iOS? Por lo que yo sé, iOS es compatible vectores en formato PDF así que estoy ansioso por ver si esto se puede utilizar para la prestación de los vectores en IOS, así
MRainzo
3
Debería funcionar en cualquier plataforma que admita Flutter. Todo está escrito en Dart usando Canvasmétodos.
Dan Field
1
¿Por qué no admite la última versión estable de flutter en lugar de la vista previa?
minigeek
Hola Dan, ¿También puedes agregar soporte para - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? ¿Flutter tiene soporte para dart2? Quiero tener múltiples SVGElements todos combinados en una cadena serializada grande y luego usar su biblioteca para representar el SVG
abhijat_saxena
dart: svg se usa con HTML y dart2js. Es muy diferente a esto.
Dan Field
25

Los desarrolladores de la comunidad Flutter crearon una biblioteca para manejar archivos svg. Podemos usarlo como

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

Encontré un pequeño ejemplo de implementación de SVG aquí .

Sunil
fuente
5
Solo para su información: este no es un complemento oficial / propio. Dicho esto, debería admitir muchos casos de uso comunes.
Dan Field
21

La solución por ahora es usar fuentes

https://icomoon.io/

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

Uso

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

Reemplazar el ### por ejemplo (906)

Victor Tong
fuente
9

Puede seguir los pasos a continuación
- visite http://fluttericon.com
- cargue sus iconos SVG
- haga clic en el botón de descarga
- obtendrá dos archivos
1. iconname.dart
2. archivo de fuente iconname.ttf
- use este archivo en flutter & importar iconname.dart

Nandakishor Valakunde
fuente
3

Puede usar flare para crear animaciones y simplemente importar .flr como activo

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

primeChandi
fuente