Question

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

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

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

Answer 1

Flutter目前不支持SVG。关注issue 1831以获取更新。

如果你绝对需要矢量绘图，你可以看到Flutter Logo widget作为如何使用Canvas API进行绘制的示例，或者在本机光栅化你的图像并将其作为位图传递给Flutter ，但现在最好的办法是嵌入高分辨率的光栅化资产图像。

Answer 2

字体是很多情况的绝佳选择。

我一直在创建一个库来在画布上渲染SVG，可在此处获得： https://github.com/dnfield/flutter_svg

现在的API看起来像

new SvgPicture.asset('asset_name.svg')

渲染asset_name.svg（大小为其父级，例如SizedBox）。您还可以指定color和blendMode来设置资产..

它现在可以在酒吧上使用，并且至少使用Flutter版本0.3.6。它处理了大量案例，但并非一切 - 请参阅GitHub仓库以获取更新和文件问题。

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

Answer 3

Flutter为处理svg文件创建了一个新的库flutter_svg: ^0.5.0`。我们可以将其用作

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

Answer 4

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

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');

替换### eg（906）

Answer 5

嗨，您可以使用插件“ flutter_svg”： https://pub.dartlang.org/packages/flutter_svg

简单易用，您也可以更改SVG的颜色。

final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = new SvgPicture.asset(
     assetName,
     color: Colors.red,
     semanticsLabel: 'A red up arrow'
);

Answer 6

第1步：

flutter_svg: ^0.12.4

第2步：

import 'package:flutter_svg/flutter_svg.dart';

第3步：

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

Answer 7

您可以使用该库渲染SVG图片-https://pub.dev/packages/flutter_svg

示例-

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

Answer 8

pubspeck.yaml

dependencies:
    flutter_svg: ^0.12.4

代码：堆栈和定位以设置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,
                  )
              ),
            ],
          )

Answer 9

步骤 1. 在 pubspec.yaml 中添加依赖项

dependencies:
     flutter_svg: any

版本 any 的优点是您可以在任何 SDK 版本中使用

第 2 步。导入应用中的 flutter svg 包

 import 'package:flutter_svg/flutter_svg.dart';

第 3 步。只需像下面这样使用

 SvgPicture.asset(
    'assets/images/bm-icon1.svg',
     width: 18.0,
     height: 18.0,
  ),

Answer 10

您可以使用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

Answer 11

Flutter不支持SVG，但是您可以使用flutter_svg软件包。

将此添加到您程序包的pubspec.yaml文件中：

dependencies:
  flutter_svg:

然后，运行flutter pub get以获取依赖关系。然后将其导入到您的dart类中：

import 'package:flutter_svg/flutter_svg.dart';

打包链接：https://pub.dev/packages/flutter_svg

Answer 12

首先在您的pubspec.yaml文件中添加最新版本的软件包 https://pub.dev/packages/flutter_svg

像波纹管

dependencies
flutter_svg: ^0.14.1

写flutter pub进入终端以安装软件包

然后在要显示svg图像的页面中添加包名称空间。

import 'package:flutter_svg/flutter_svg.dart';

然后添加以下代码以在您的应用程序屏幕中显示svg

SvgPicture.asset(
'assets/Share and collect 1.svg', 
 height: 280, 
 width: 280, 
 color: Colors.red
),

Answer 13

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

Answer 14

第1步：

flutter_svg: 0.13.0

第2步：

import 'package:flutter_svg/flutter_svg.dart';

第3步：

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

Answer 15

Old version: flutter_svg: ^0.12.4

此版本为最新的flutter应用程序版本。将您的版本升级到0.13.0

New working version: flutter_svg: 0.13.0

Flutter SVG渲染

15 个答案: