Flutter SVG渲染

我尝试将带有SVG源的图像添加到我的flutter应用程序中。

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

但是我没有任何视觉反馈。如何在Flutter中渲染SVG图片？

Flutter当前不支持SVG。请关注问题1831，以获取更新。

如果您绝对需要矢量绘图，则可以看到Flutter Logo小部件作为使用CanvasAPI进行绘制的示例，或者在本机光栅化图像并将其作为位图传递给Flutter，但目前最好的选择是嵌入高分辨率的光栅化资产图像。

在很多情况下，字体都是不错的选择。

我一直在研究在画布上渲染SVG的库，可在这里找到：https : //github.com/dnfield/flutter_svg

到目前为止的API看起来像

new SvgPicture.asset('asset_name.svg')

渲染asset_name.svg（大小为其父对象，例如a SizedBox）。您还可以指定color和blendMode来为资产着色。

现在，它可以在pub上使用，并且最低可使用Flutter 0.3.6版本。它可以处理很多情况，但不能处理所有情况-有关更新和文件问题，请参阅GitHub存储库。

实际上，Colin Jackson所引用的原始GitHub问题并不意味着主要关注Flutter中的SVG。我在这里为此打开了另一个问题：https : //github.com/flutter/flutter/issues/15501

Flutter社区的开发人员创建了一个库来处理svg文件。我们可以将其用作

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

我在这里找到了一个SVG实现的小例子。

现在的解决方法是使用字体

https://icomoon.io/

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

使用情况

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

替换###例如（906）

您可以按照以下步骤操作
-访问http://fluttericon.com-
上传SVG图标
-单击下载按钮
-您将获得两个文件
1. iconname.dart
2. iconname.ttf字体文件
-在flutter中使用此文件＆导入iconname.dart

您可以使用flare创建动画，只需将.flr导入为资产

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

访问flare_flutter https://pub.dev/packages/flare_flutter

您可以使用此库来渲染SVG图像-https: //pub.dev/packages/flutter_svg

范例-

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)