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?
Respuestas:
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.
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
Canvasmétodos.
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í .
La solución por ahora es usar fuentes
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)
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
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
Puede usar esta biblioteca para renderizar imágenes SVG: https://pub.dev/packages/flutter_svg
Ejemplo -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
flutter_svg 0.14.0paquete 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